시작하기

topgrid는 TanStack Table v8 기반의 headless React 그리드 라이브러리입니다. 13개 패키지로 구성된 monorepo로, 공개(MIT) + Pro 기능 모두 지원합니다.

설치

# 공개 패키지 (headless core)
pnpm add @topgrid/grid @topgrid/grid-core @topgrid/grid-features @topgrid/grid-renderers

# Pro 패키지 (라이선스 필요)
pnpm add @topgrid/grid-pro-agg @topgrid/grid-pro-datamap @topgrid/grid-pro-header \
         @topgrid/grid-pro-master @topgrid/grid-pro-merging @topgrid/grid-pro-range \
         @topgrid/grid-pro-tracking

# peer dependencies
pnpm add react react-dom @tanstack/react-table @tanstack/react-virtual

기본 사용 예시

import { Grid } from '@topgrid/grid';
import { useGridState } from '@topgrid/grid-core';

const columns = [
  { accessorKey: 'id', header: 'ID' },
  { accessorKey: 'name', header: '이름' },
];

const data = [
  { id: 1, name: '홍길동' },
  { id: 2, name: '김철수' },
];

export function BasicGrid() {
  const gridState = useGridState({ columns, data });
  return <Grid state={gridState} />;
}

다음 단계

• 아키텍처 — 13개 패키지 구조와 의존성 다이어그램
• Pro 기능 — @topgrid/grid-license를 통한 라이선스 활성화 후 Pro 패키지 사용 가능