Composition & DI

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

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

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>,
	},
	{
		accessorKey: 'quota',
		// editable: true 여야 dblclick/F2/Enter/typing이 편집 진입을 트리거한다.
		meta: { editable: true },
		header: ({ header }) => <DataGrid.HeaderCell header={header}>할당량</DataGrid.HeaderCell>,
		cell: (info) => (
			<DataGrid.Cell cell={info.cell}>
				<DataGrid.CellDisplay>{(info.getValue() as number).toLocaleString()}</DataGrid.CellDisplay>
				<DataGrid.CellEditor>
					<QuotaEditor cell={info.cell} />
				</DataGrid.CellEditor>
			</DataGrid.Cell>
		),
	},
];

// editor UI는 소비자 코드 — useDataGridCellEdit로 셀별 상태/액션을 읽는다.
function QuotaEditor({ cell }: { cell: any }) {
	const { initialValue, commit, cancel } = useDataGridCellEdit<number>(cell);
	// ... 실제 입력 UI. commit(Number(value), 'down') / cancel() 호출.
}

function Grid({ data, setData }: { data: Row[]; setData: (next: Row[]) => void }) {
	const table = useDataGrid<Row>({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
		getRowId: (r) => r.id,
	});

	// 같은 table을 세 훅에 넘긴다. 호출 순서는 동작과 무관(명시 DI).
	const selection = useDataGridSelection(table);
	const editing = useDataGridEditing(table, {
		// selection 주입 — commit(moveTo)·paste 타일링이 이 인스턴스를 source로 쓴다.
		selection,
		onCellEdit: ({ coord, newValue }) => {
			setData(data.map((r) => (r.id === coord.rowId ? { ...r, [coord.columnId]: newValue } : r)));
		},
	});
	const fillHandle = useDataGridFillHandle(table, { selection, editing });

	// 셋 다 Root에 주입. 미주입 시 그 기능만 조용히 비활성(dev에서 1회 경고).
	return (
		<DataGrid.Root table={table} selection={selection} editing={editing} fillHandle={fillHandle}>
			<DataGrid.Header />
			<DataGrid.Body />
		</DataGrid.Root>
	);
}

<DataGrid.Root table={table} selection={selection}>
	<DataGrid.Header /> {/* 모든 headerGroup 자동 */}
	<DataGrid.Body /> {/* 모든 row 자동 */}
</DataGrid.Root>

<DataGrid.Root table={table} selection={selection}>
	<DataGrid.Header>
		{(headerGroup) => (
			<DataGrid.HeaderRow>
				{headerGroup.headers.map((header) => (
					<DataGrid.HeaderCell key={header.id} header={header}>
						{flexRender(header.column.columnDef.header, header.getContext())}
					</DataGrid.HeaderCell>
				))}
			</DataGrid.HeaderRow>
		)}
	</DataGrid.Header>

	<DataGrid.Body>
		{(row, rowIndex) => (
			<DataGrid.Row row={row} rowIndex={rowIndex}>
				{row.getVisibleCells().map((cell) => (
					<DataGrid.Cell key={cell.id} cell={cell}>
						{flexRender(cell.column.columnDef.cell, cell.getContext())}
					</DataGrid.Cell>
				))}
			</DataGrid.Row>
		)}
	</DataGrid.Body>
</DataGrid.Root>

// 일반 모드 — column.cell / column.header 안에서.
{
	accessorKey: 'name',
	header: ({ header }) => <DataGrid.HeaderCell header={header}>이름</DataGrid.HeaderCell>,
	cell: (info) => <DataGrid.Cell cell={info.cell}>{info.getValue() as string}</DataGrid.Cell>,
}

// skeleton/dynamic 모드 — meta.skeleton 안에서 cell 인스턴스 없이.
{
	accessorKey: 'name',
	meta: {
		skeleton: ({ column }) => (
			<DataGrid.Cell column={column}>
				<Skeleton width="60%" />
			</DataGrid.Cell>
		),
	},
	// ...
}

// Root에 반응형 — mobile은 sm, desktop부터 md.
<DataGrid.Root table={table} size={{ mobile: 'sm', desktop: 'md' }}>
	{/* 특정 헤더만 lg로 override */}
	<DataGrid.HeaderCell header={header} size="lg">제목</DataGrid.HeaderCell>
</DataGrid.Root>

<DataGrid.Cell cell={info.cell} $css={{ textAlign: 'right', color: '$text-2' }}>
	{value}
</DataGrid.Cell>

// Cell을 button으로 렌더 — grid 상태/접근성 속성은 유지된 채 엘리먼트만 교체.
<DataGrid.Cell cell={info.cell} render={<button type="button" />}>
	{value}
</DataGrid.Cell>

<DataGrid.Cell
	cell={info.cell}
	className={(state) => (state.isActive ? 'cell--active' : '')}
	style={(state) => ({ fontWeight: state.isInRange ? 600 : 400 })}
>
	{value}
</DataGrid.Cell>