API Reference

이 페이지는 @featuring-corp/data-grid의 공개 표면 전체입니다. 표에 적힌 이름은 패키지 진입점(index.ts)에서 실제로 export하는 이름과 1:1로 일치합니다. 설명은 개념만 짚고, 시그니처와 옵션의 자세한 의미는 각 딥 페이지로 연결합니다.

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

훅 (Hooks)

기능을 명시적으로 합성하는 진입점입니다. useDataGrid가 인스턴스를 만들고, 기능 훅이 그 위에 셀 선택·편집·자동 채우기를 얹습니다. 반환값은 <DataGrid.Root>에 prop으로 주입합니다(table에 부착하지 않음). 자세한 합성 모델은 Composition & DI를 참고하세요.

parseTsv는 훅이 아니라 순수 함수지만, useDataGridEditing과 같은 모듈에서 export됩니다(커스텀 클립보드 헬퍼).

각 훅의 옵션 타입도 export됩니다.

컴포넌트 (Compound components)

컴파운드 트리는 두 가지 형태로 동시에 export됩니다.

• Namespace — import { DataGrid } from '@featuring-corp/data-grid' → DataGrid.Root, DataGrid.Header, …
• Flat 원본 이름 — import { DataGridRoot } from '@featuring-corp/data-grid'

두 형태가 같은 컴포넌트를 가리킵니다. namespace는 작성용(JSX가 짧음), flat 이름은 docgen용입니다 — react-docgen-typescript가 namespace alias(X as Y)에서 __docgenInfo를 잘못 할당하는 이슈가 있어, prop 문서 추출을 위해 원본 이름을 별도로 flat export합니다. Storybook의 component/subcomponents에는 flat 이름을 쓰고, JSX는 namespace를 씁니다.

각 컴포넌트의 Props 타입과(있는 경우) state-callback 인자 State 타입도 export됩니다.

DataGridRootState/DataGridRowState/DataGridCellState/DataGridHeaderCellState는 도메인 타입으로 분류되어 별도 그룹(아래 "공개 타입")에서 export됩니다 — 컴포넌트 state-callback과 data-* 상태에 공유됩니다.

Root의 veto seam 컨텍스트 타입도 export됩니다.

Context

컴파운드 내부에서 그리드 전역/현재 셀 상태를 읽는 훅입니다. 커스텀 셀·에디터를 만들 때 사용합니다.

반환 타입 DataGridContextValue·DataGridCellContextValue도 export됩니다.

클립보드 헬퍼 (Clipboard helpers)

커스텀 클립보드(onCellKeyDown veto로 키 리맵 등)나 내보내기를 만들 때, 그리드 내장과 동일한 규칙을 재사용하기 위한 헬퍼입니다. Root 모듈에서 export됩니다(parseTsv는 editing 모듈).

자세한 사용은 Clipboard & Fill을 참고하세요.

공개 타입 (Public types)

도메인 타입은 그룹별로 export됩니다. 모두 type-only export입니다(단, dataGridSizeValues·SIZE_TO_ROW_HEIGHT는 값).

인스턴스 / 옵션

• DataGridInstance — useDataGrid 반환. TanStack Table extends + loading/error/getSkeletonRowCount/debug/virtualization/runtime.
• UseDataGridOptions — useDataGrid 옵션. TanStack TableOptions extends.

좌표 / 범위

• DataGridCellCoord — { rowId, columnId }.
• DataGridCellRange — { start, end }.
• DataGridClipboardSource — 복사/잘라내기한 영역(range·mode: 'copy' | 'cut').

선택 (Selection)

• DataGridSelection — selection 인스턴스(공개 표면).
• DataGridSelectionState — { anchor, focused, ranges }.

편집 (Editing)

• DataGridEditing — editing 인스턴스(공개 표면).
• DataGridEditingState — { coord, trigger, prefillChar }.
• DataGridCellEdit — column.cell 안 per-cell 편집 상태(useDataGridCellEdit 반환).
• DataGridCellEditInput — applyEdits 입력({ coord, value }).
• DataGridCellSaveStatus — 'idle' | 'pending' | 'error'.
• DataGridEditTrigger — 'doubleclick' | 'F2' | 'Enter' | 'typing'.
• DataGridEditCommitMove — 'down' | 'up' | 'right' | 'left'.
• DataGridEditableCellState — DataGridCellEdit의 deprecated alias(하위호환 유지).

자동 채우기 (Fill)

• DataGridFillHandle — fill handle 인스턴스(공개 표면).
• DataGridFillHandleState — { isVisible, isDragging }.
• DataGridFillArgs — getFillValue 콜백 인자(양축 fill).
• DataGridFillContext — doubleClickAction 함수형 콜백 인자(sourceRange·table·applyFill).
• DataGridFillDirection — 'down' | 'up' | 'right' | 'left'.
• DataGridColumnFill — column.meta.fill 값('copy' | 'series' | 함수).
• DataGridColumnFillFn — meta.fill 함수형.
• DataGridColumnFillArgs — meta.fill 함수형 인자(컬럼 스코프).

컴포넌트 state 형태 (data-* 표면에 공유)

• DataGridRootState·DataGridRowState·DataGridCellState·DataGridHeaderCellState — Root/Row/Cell/HeaderCell의 state-callback 인자.
• DataGridResizeHandleState — ResizeHandle state(isResizing·canResize).

Skeleton

• DataGridSkeletonContext — column.meta.skeleton 콜백 인자(table·column·rowIndex).

크기 (Size)

• DataGridSize — 'sm' | 'md' | 'lg'.
• dataGridSizeValues — ['sm', 'md', 'lg'] (값 export — 런타임에서 옵션 순회·검증에 사용).
• SIZE_TO_ROW_HEIGHT — 사이즈별 행 높이 px 맵(값 export).

디버그 (Debug)

• DataGridDebug — boolean | DataGridDebugAreas.
• DataGridDebugAreas — { selection?, editing?, clipboard?, keyboard? }.
• DataGridDebugArea — 'selection' | 'editing' | 'clipboard' | 'keyboard'.

가상화 (Virtualization)

• DataGridVirtualization — { rows?, columns?, estimateRowHeight?, overscan?, getScrollElement? }.

TanStack 재노출 (TanStack re-exports)

@featuring-corp/data-grid는 자주 쓰는 TanStack Table API를 그대로 재노출합니다. 소비자가 @tanstack/react-table을 직접 import하지 않아도 되도록 단일 진입점을 제공하는 것이 목적입니다 — 그리드와 row model이 같은 TanStack 버전을 공유하도록 보장합니다.

⚠️ row model 팩토리는 기본으로 깔리지 않습니다. getCoreRowModel() 등을 직접 useDataGrid 옵션에 넘겨야 합니다.

값 (factories / helpers)

타입 (type re-exports)

ColumnDef, ColumnFiltersState, SortingState, RowSelectionState, PaginationState, VisibilityState, ColumnPinningState, ColumnOrderState, ExpandedState, GroupingState, Header, CellContext, HeaderContext, HeaderGroup, TableOptions, ColumnHelper를 그대로 재노출합니다.

이름 충돌을 피하기 위해 alias로 재노출되는 타입이 있습니다 — 소비자는 alias 이름으로 import해야 합니다.

import {
	type ColumnDef,
	type SortingState,
	type TanstackRow,
	type TanstackTable,
} from '@featuring-corp/data-grid';

다음 단계

• Composition & DI — 훅을 Root에 주입하는 명시 DI 모델.
• Extending — 모든 override seam과 veto 패턴(transformSelection·onCellEdit·getFillValue·onCellKeyDown 등).
• Architecture — DataGridInstance·runtime registry·context 전파.