필요한 그리드 기능, 전부 무료로.

10만 건이 넘는 데이터도 가볍게 다루는 데이터 그리드입니다. 정렬과 필터, 컬럼 고정, 엑셀 복사·붙여넣기, 합계 행까지 모두 MIT 라이선스로 무료입니다. 자바스크립트, React, Vue 어디서나 바로 쓸 수 있습니다.

npm i @freegridjs/core데모 둘러보기 사용법 보기

지금 바로 쓸 수 있는 기능

이 표도 FreeGrid로 만들었습니다. 행을 누르면 해당 데모로 이동합니다.

몇 줄이면 충분합니다

패키지를 설치하고, 높이가 정해진 영역에 컬럼과 데이터를 넘기면 끝입니다.

import { createGrid } from '@freegridjs/core';
import '@freegridjs/core/styles.css';

const grid = createGrid(document.getElementById('grid'), {
  columns: [
    { field: 'name', header: 'Name', pinned: 'left' },
    { field: 'country', header: 'Country', filter: 'set' },
    { field: 'total', header: 'Total', type: 'number', format: '#,##0' },
  ],
  data: rows,
  rowSelection: 'multiple',
  summary: { rows: [{ label: 'Total', columns: { total: 'sum' } }] },
});

import { FreeGrid } from '@freegridjs/react';
import '@freegridjs/core/styles.css';

export function Customers({ rows }) {
  return (
    <FreeGrid
      columns={columns}
      data={rows}
      rowSelection="multiple"
      onCellClick={e => console.log(e.row)}
      style={{ height: 480 }}
    />
  );
}

<script setup>
import { FreeGrid } from '@freegridjs/vue';
import '@freegridjs/core/styles.css';
defineProps(['rows']);
</script>

<template>
  <FreeGrid :columns="columns" :data="rows" row-selection="multiple"
            :height="480" @cell-click="e => console.log(e.row)" />
</template>

앞으로 추가될 기능

버전마다 기능이 더해지고, 앞으로도 모두 무료입니다.