API reference

This page is generated from the real TypeScript source at build time through AutoTypeTable. Every exported symbol also carries a JSDoc comment in source, reproduced in the tables below.

<DataGrid>

This is a convenience wrapper: provider, scroll root, header, and body in one component. Compose DataGridProvider, DataGridRoot, DataGridHeader, and DataGridBody directly instead when you need a toolbar, overlays, or a context menu (see the Quick start).

<DataGridProvider>

This is the composable entry point. It has the same sync props as DataGrid above, including cellTypes, labels, and duplicateRow:

overlayPlugins

readonly OverlayPlugin[], optional, on both DataGridProvider and DataGrid. Each registered plugin paints into the same overlay layer the core's own selection and active-cell rendering use. See Overlay plugins for the full contract, and Multiplayer presence and Fill handle for two first-party consumers.

Hooks

The state of DataGridProvider is Zustand internally, but the store itself is never exported, only atomic selector hooks and one actions hook. You must call all of them under DataGridProvider. The full list lives in store/hooks.ts. These are the ones you will reach for most:

• useDataGridActions() — the single stable actions object (setSorts, setFilters, setSearch, setColumnWidth, setColumnOrder, setColumnPin, setColumnHidden, selectCell, extendTo, startEditing, commitCellEdit, deleteSelection, updateCells, updateRows, reconcileView, setCellErrors, clearCellErrors, plus the row operations insertRow, duplicateRows, deleteRows — see Row operations). The complete list is the DataGridActions type.
• useDataGridViewStale() — true when a write left the sorted order stale: a deferred updateCells batch, or an edit, paste, fill, or cleared selection that touched a column the active sort or filter reads. See Streaming updates.
• useDataGridCellTypes() — the resolved cell-type registry (built-ins or consumer-provided), for tooling that needs to inspect or resolve a column's renderer/editor.
• useDataGridActiveColumn() — the active cell's column index (or null), for tooling that only cares about the active column.
• useDataGridActiveCell(), useDataGridSelection(), useDataGridGetSelectionValues(), useDataGridEditing()
• useDataGridSortState(), useDataGridFilterState(), useDataGridSearchText()
• useDataGridVisibleColumns(), useDataGridAllColumns(), useDataGridColumnWidth(id), useDataGridIsColumnHidden(id)
• useDataGridLabels(), useDataGridKeymap(), useDataGridReadOnly()
• useDataGridScrollToCell() — imperative scroll.
• useDataGridCellErrors() — the full post-commit server-error map. See Editing & cell types: Server errors.

onSelectionChange, onColumnLayoutChange, and every other event source are covered in full on Events & state.

ColumnDef<TData, TValue>

AnyColumnDef (ColumnDef<unknown, unknown, any>) is the row-agnostic shape that the store and its hooks (useDataGridVisibleColumns(), useDataGridAllColumns(), and similar hooks) actually traffic in. Reach for it when you write custom column UI that does not know its TData generic.

CellType<TData, TValue, TOptions>

Register custom types through the cellTypes prop of DataGridProvider. A provided registry REPLACES the built-ins (text, number, checkbox, select, date) rather than merging over them: to extend the built-ins, spread the exported cellTypes in (cellTypes={{ ...cellTypes, myType }}). See Recipes for a worked example.

GridCellTypes

This interface map gives defineColumns its per-type inference. Augment it through declaration merging in your own module to give a custom cell type the same compile-time options and value narrowing as the built-ins:

declare module "@/components/data-grid/types" {
  interface GridCellTypes {
    currency: { value: number | null; options: { currency: string } };
  }
}

Adjust the module path to wherever your components.json aliases actually placed types.ts.

DataGridLabels

This groups every user-facing string, across the core and every add-on, by owning surface. Pass a DeepPartialLabels override to the labels prop of DataGridProvider. See i18n.

Other exported types

• CellCoord ({ col, row }, data-space) and GridRect ({ x, y, width, height }, half-open).

• GridSelection ({ current: {cell, range, rangeStack} | null, rows, columns }).

• DataOp<TData> (update, insert, or delete, id-keyed) and DataChange<TData> ({ ops, source }).

• SortSpec ({ columnId, direction }), FilterSpec, and FilterOperator.

• GridAction (every named keyboard action) and Keymap (Partial<Record<GridAction, string[]>>).

• RowMarkersMode, HeaderClickBehavior, and DensityMode.

• ColumnLayout ({ widths, order, pins, hidden }), the defaultColumnLayout and onColumnLayoutChange snapshot. See Events & state.

• OverlayPlugin ((ctx: OverlayPluginCtx) => ReactNode) and OverlayPluginCtx, the overlay-plugin seam that add-ons like data-grid-presence and data-grid-fill register into. See Overlay plugins for the full contract and a worked example, and Multiplayer presence and Fill handle for two first-party consumers.

  Prop

  Type

  windowStartnumber

  clampRowStartnumber

  clampRowEndnumber

  colCountnumber

  colOffsetnumber

  pinTrack?PinTrackData

  splitRectByPinZonesfunction

  clampRectToWindowfunction

• RowBandsSpec and RowBandRenderCtx, the provider-level row-bands seam that data-grid-pinned-rows registers into. See Pinned rows.

• CellErrorEntry ({ rowId, columnId, message }) and CellErrorTarget ({ rowId, columnId }), the input shapes for actions.setCellErrors/actions.clearCellErrors. See Editing & cell types: Server errors.

createFilterMatcher(filter) (from sort-filter) pre-parses the bounds of a FilterSpec once and returns a reusable (text: string) => boolean matcher. This has the same semantics as matchesFilter, but without re-parsing the filter's value on every row. buildViewIndex uses this internally for per-row matching over a whole dataset.

Add-on option types

Each add-on's public props follow the same source-of-truth convention. These are the ones you will reach for most:

DataGridUrlStateProps

UseDataGridStateOptions

This is the options object for useDataGridState, the uncontrolled quick-start hook from data-grid-history. See Quick start.

UseDataGridHistoryOptions

This is the options object for useDataGridHistory, the composable history hook of data-grid-history (it takes data and setData, mirroring the useState tuple). See Undo & redo.

DataGridToolbarProps

DataGridSearchProps

DataGridFilterMenuProps

DataGridColumnsMenuProps

DataGridSortListProps

See Sorting, filtering & search.

DataGridContextMenuProps

DataGridExportButtonProps

UseDataGridLazyRowsOptions

This is the options object for useDataGridLazyRows from data-grid-lazy. See Lazy loading.

DataGridPaginationControls / DataGridPaginationBarProps

This is the return shape of useDataGridPagination (client and server mode alike) and the props of the composable footer bar. See Pagination.

UseDataGridFillOptions

This is the options object for useDataGridFill from data-grid-fill. See Fill handle.

UseDataGridPinnedRowsOptions

This is the options object for useDataGridPinnedRows from data-grid-pinned-rows. See Pinned rows.