moda-grid - React·Vue·Svelte·Vanilla 멀티 프레임워크 데이터 그리드 | ModaOlive Tools

React·Vue·Svelte·순수 JS 어디서든 똑같이 동작하는, 헤드리스 데이터 그리드 라이브러리.

moda-grid는 정렬·필터·검색·페이징·편집 같은 모든 데이터 로직을 순수 TypeScript 코어(GridCore)에 두고, 각 프레임워크 어댑터는 얇은 렌더링 레이어만 담당합니다. 프레임워크가 달라도 기능 동작은 항상 같습니다.

Set 필터, 그룹화+집계, 클립보드, 범위 선택처럼 다른 그리드에서는 유료(Enterprise)인 기능을 MIT로 무료 제공합니다.

라이브 데모

CDN에서 불러온 실제 코어로 동작합니다. 정렬·다중 정렬·연산자/Set 필터·검색·페이징·가상 스크롤·셀/범위/행 선택·인라인 편집·Undo/Redo· 클립보드 복사/붙여넣기·컬럼 리사이즈/재배치/고정/숨김·행 그룹화와 집계·고정 행·총계·상태 저장/복원·행 드래그·행 상태 추적(I/U/D 마킹·변경분 저장)을 모두 써볼 수 있고, 트리 데이터와 서버 사이드 무한 스크롤 모드도 탭으로 전환해 볼 수 있습니다. 그리드 아래 패널에는 지금 설정과 방금 실행한 API 호출을 그대로 재현하는 코드가 실시간으로 표시됩니다.

환경별 패키지

3단계로 시작하기

1. 1

   패키지 설치

   npm i @moda-grid/react처럼 어댑터를 설치하거나, CDN <script> 한 줄로 코어를 로드합니다.

2. 2

   컬럼 + 데이터

   columns에 field·header만 적어도 동작합니다. filterable·cellEditor 등은 필요할 때 추가합니다.

3. 3

   렌더링

   어댑터는 <DataGrid> 컴포넌트 하나면 끝. 코어 직접 사용 시 subscribe + getSnapshot으로 연결합니다.

// npm i @moda-grid/react
import { DataGrid, useGridCore } from "@moda-grid/react";
import "@moda-grid/react/styles.css";

const columns = [
  { field: "id", header: "ID", width: 60 },
  { field: "name", header: "이름", filterable: true },
  { field: "role", header: "역할",
    renderCell: (value) => <span className={`badge role-${value}`}>{value}</span> },
];

function App() {
  const { grid, snapshot } = useGridCore({ columns, data: users });
  return (
    <>
      <input onChange={(e) => grid.setSearch(e.target.value)} />
      <button onClick={() => grid.exportToCsv({ filename: "users.csv" })}>
        CSV보내기
      </button>
      <DataGrid grid={grid} columns={columns}
        height={480} rowHeight={37}
        selectionMode="multi-cell" columnController />
    </>
  );
}

모든 뮤테이션은 내부에서 스냅샷을 재계산하고 구독자에게 알립니다. 스냅샷은 메모이즈되어 React useSyncExternalStore와도 바로 맞습니다.

기능별 사용법 — 무엇을 쓰면 되나

어댑터는 대부분 prop·옵션 한 줄로 켜지고, 코어만 쓸 때는 API를 직접 호출합니다. 라이브 데모의 각 컨트롤에 마우스를 올리면 대응 API가 툴팁으로 표시됩니다.

자주 쓰는 레시피

복사해서 바로 쓸 수 있는 코드 조각입니다.

// 컬럼에 filterType 지정
{ field: "role", header: "역할", filterable: true, filterType: "set" }

grid.getUniqueValues("role");   // ["admin","editor","viewer","guest"]
grid.setFilter("role", { operator: "set", values: ["admin","editor"] });
grid.setFilter("role", null);   // 전체 선택 = 필터 해제

grid.exportToCsv({
  filename: "users.csv",
  visibleColumnsOnly: true,   // 숨긴 컬럼 제외 (기본값)
  selectedRowsOnly: false,    // 선택한 행만 내보낼 때 true
});

// I = addRows/importCsv · U = 편집/pasteTsv · D = deleteRowsByIds (I행은 즉시 제거)
grid.addRows([{ id: "new-1", name: "새 사원" }]);
grid.deleteRowsByIds(["3", "7"]);   // D 마킹 — commit 전까지 화면에 남음
grid.restoreRowsByIds(["3"]);       // D 마킹 해제

async function save() {
  const errors = grid.validateChanges();          // I/U 행 required/validate 검사
  if (errors.length) return console.warn(errors);
  await fetch("/api/users", {
    method: "POST",
    body: JSON.stringify(grid.getChanges()),      // { inserted, updated, deleted }
  });
  grid.commitChanges();                           // D 제거 + 마킹 초기화
}
// 마킹만 취소(화면 복귀)는 grid.clearChanges()

// 저장 — 직렬화 가능한 객체가 반환됨
localStorage.setItem("grid", JSON.stringify(grid.getState()));

// 복원 — 없는 컬럼을 참조해도 무시되므로 스키마 변경에 안전
grid.applyState(JSON.parse(localStorage.getItem("grid")!));

// 부분 적용도 가능
grid.applyState({ sortState: saved.sortState });

const grid = new GridCore({
  columns,
  data: [],                       // 서버 모드에서는 무시
  serverSide: {
    cacheBlockSize: 50,
    dataSource: {
      async getRows({ startRow, endRow, sortModel, filterModel }) {
        const res = await fetch(`/api/rows?start=${startRow}&end=${endRow}`);
        return res.json();        // { rows, lastRowIndex? }
      },
    },
  },
  virtualScroll: { rowHeight: 37, viewportHeight: 480 },
});
grid.refreshServerRows();          // 캐시 폐기 + 재요청

// nested — 행 안에 자식 배열
new GridCore({ columns, data, treeData: { childrenKey: "children" } });

// flat — parentId로 연결 (부모가 필터링된 행은 루트로 승격)
new GridCore({ columns, data,
  getRowId: (r) => r.id,
  treeData: { getParentId: (r) => r.parentId },
});

grid.toggleTreeExpanded(rowId);    // 펼침/접힘

{
  field: "role",
  header: "역할",
  renderCell: (value) => <span className={`badge role-${value}`}>{value}</span>,
  renderEditor: (ctx) => (
    <select value={ctx.value} onChange={(e) => ctx.setValue(e.target.value)} />
  ),
}

// Vue는 #cell-{field} / #editor-{field} 슬롯, Svelte는 cell/editor snippet

{ field: "age", aggregationFn: "avg" }     // 집계 대상 지정

grid.setGroupBy(["dept", "role"]);   // 다단계 그룹화
grid.expandAllGroups();              // 모두 펼치기
grid.collapseAllGroups();            // 모두 접기
// snapshot.grandTotals에 전체 총계도 자동 계산

{
  field: "salary",
  header: "연봉",
  valueGetter: (row) => row.pay.annual,                  // 중첩 값 추출
  formatter: (v) => `${Number(v).toLocaleString()}원`,  // 표시 변환
  cellClass: (p) => (p.value > 5000 ? "text-red-500" : ""), // 조건부 클래스
}

상용 그리드는 유료, moda-grid는 무료

Set 필터·그룹화·집계·클립보드·범위 선택·피벗 같은 기능은 AG Grid에서는 Enterprise(유료) 전용입니다. moda-grid는 MIT 라이선스로 전부 무료입니다.

문서·소스

• 시작하기·플랫폼별 가이드(React/Vue 3/Vue 2.7/Svelte/Vanilla)
• 기능별 가이드 — 정렬·필터·편집·가상 스크롤·서버 사이드 등
• GridCore 헤드리스 API 레퍼런스