0.1.0

@featuring-corp/data-grid가 첫 0.1.0으로 출시됩니다. 헤드리스 상태 로직(useDataGrid 계열 훅)과 컴파운드 컴포넌트(DataGrid.Root …)를 분리해, 정책은 소비자가 명시적으로 합성하고 렌더링은 디자인 토큰에 맞춰 제공합니다.

설치

pnpm add @featuring-corp/data-grid @tanstack/react-table

구성

useDataGrid로 모델을 만들고 DataGrid.* 컴포넌트로 렌더링합니다. row model 팩토리는 기본으로 깔리지 않으므로 getCoreRowModel()을 직접 넘깁니다. 읽기 전용 그리드는 아래만으로 충분합니다.

import { DataGrid, useDataGrid, getCoreRowModel, type ColumnDef } from '@featuring-corp/data-grid';

type Row = { id: string; name: string };

const columns: ColumnDef<Row>[] = [
  {
    accessorKey: 'name',
    header: ({ header }) => <DataGrid.HeaderCell header={header}>이름</DataGrid.HeaderCell>,
    cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue() as string}</DataGrid.Cell>,
  },
];

function Grid({ data }: { data: Row[] }) {
  const table = useDataGrid<Row>({ data, columns, getCoreRowModel: getCoreRowModel() });
  return (
    <DataGrid.Root table={table}>
      <DataGrid.Header />
      <DataGrid.Body />
    </DataGrid.Root>
  );
}

선택·편집·자동 채우기는 각각 useDataGridSelection / useDataGridEditing / useDataGridFillHandle로 만들어 Root에 prop으로 주입합니다. 주입하지 않은 기능은 조용히 비활성되며, 개발 모드에서 "Root에 소비되지 않음"을 1회 경고합니다.

기능

• 편집 — 인라인 셀 편집, 비동기 커밋, 되돌리기(undo) 히스토리.
• 선택 — 셀·행·범위 선택, 터치 코너 핸들 범위 선택.
• 클립보드 / Fill — TSV 복사·붙여넣기, 복사 범위 마퀴, fill handle 자동 채우기.
• 가상화 — 행 가상화(@tanstack/react-virtual).
• 그룹 / 트리 — 멀티레벨 그룹 헤더, row grouping, tree data, 확장.
• 레이아웃 — 컬럼 고정(pinning)·재정렬·리사이즈, 셀 병합(rowSpan/colSpan).
• 정렬·필터·페이지네이션 — 헤드리스 정렬/필터/페이지 모델.
• 접근성 — role="grid" 기반 aria 모델(aria-activedescendant 포커스, colindex/rowindex, 병합 colspan/rowspan).

레이어

그리드 CSS는 ft-components cascade layer를 공유해 components 패키지와 동일한 오버라이드 경로를 가집니다. 색상 프리셋(preset/featuring, preset/dataEffect)을 함께 제공합니다.