Core

Essential building blocks under grid/core/. Place <DataGrid> inside DataTableRoot, wrapping DataTable.

Source Code ↗Hooks ↗

DataGrid

Owns keyboard nav, selection rectangle, drag-select, and scroll-into-view. Pass onRequestShortcuts to open the ? dialog.

Source Code ↗

import { DataGrid } from "@/components/niko-table/grid/core/data-grid"

<DataTableRoot data={grid.rows} columns={columns} getRowId={(r) => r.id}>
  <DataGrid grid={grid} onRequestShortcuts={openShortcuts}>
    <DataGridClipboard resolveCell={resolveCell} />
    <DataTable>…</DataTable>
  </DataGrid>
</DataTableRoot>

Props

Name	Type	Description
grid	UseDataGrid<TRow>	From useDataGrid
children	React.ReactNode	Features + DataTable
className	string	Wrapper classes
onRequestShortcuts	() => void	Called on ? when focused (not editing)

Whole-row / whole-column select and fillSelectionWith live on context, not on the headless hook. See useDataGridContext below.

DataGridCell

Wrap each column cell. Display index is resolved from row id (post sort/filter). Do not pass TanStack row.index.

Source Code ↗

cell: (ctx) => (
  <DataGridCell row={ctx.row.original} columnId="name">
    {(p) => <GridTextCell {...p} resolve={(raw) => resolveCell("name", raw)} />}
  </DataGridCell>
)

Prop	Type	Description
row	TRow	Row original (GridRow)
columnId	string	Editable column id
children	(p) => ReactNode	Render prop with cell APIs

useDataGridContext

Source Code ↗

Throws outside <DataGrid>. Context helpers include selectRow, selectColumn, fillSelectionWith, displayIndexOf, and the active selection bounds.

import { useDataGridContext } from "@/components/niko-table/grid/core/data-grid-context"

const { selectRow, fillSelectionWith } = useDataGridContext()

DataGridFeaturesProvider / useDataGridFeatures

Opt-in children register clipboard / fill / move / reorder via useRegisterGridFeature. You rarely call this directly: feature components do.

Source Code ↗

DataGridColumns

Provider for runtime column specs from useGridColumns. Required for Dynamic Columns.

Source Code ↗

const cols = useGridColumns({ initialColumns })

<DataGridColumns value={cols}>
  <DataGrid grid={grid}>…</DataGrid>
</DataGridColumns>

Hook / component	Role
DataGridColumns	Provides column API to descendants
useDataGridColumns	Read/write column specs (throws if missing)