Components

Context-aware pieces under grid/components/ and typed editors under grid/cells/. Mount only what you need as children of <DataGrid>: unmounted features attach no listeners and tree-shake out.

Source Code ↗Core ↗

Directory structure

• grid/components/: clipboard, fill, move, toolbar, status bar, menus
• grid/cells/: display shell + typed editors (GridTextCell, …)
• grid/core/: Core (DataGrid, context, features)
• grid/hooks/: Hooks
• grid/types/: Types
• grid/config/: Config

Feature children

Children of <DataGrid>. Unmounted = tree-shaken.

Component	Capability
DataGridClipboard	Copy / cut / paste (resolveCell optional — needed only for paste; copy/cut work without it)
DataGridFillHandle	Corner fill; double-click auto-fill
DataGridMove	Drag block to move (Ctrl/Cmd = copy)
DataGridRowReorder	Row drag: prefer without active sort
DataGridCrossHighlight	Selection chrome on header / gutter
DataGridStatusBar	Aggregate the selection

DataGridClipboard

Source Code ↗

<DataGrid grid={grid}>
  <DataGridClipboard resolveCell={resolveCell} />
  <DataTable>…</DataTable>
</DataGrid>

Prop	Type	Description
resolveCell?	(columnId: string, raw: string) => CellState<string>	Map pasted text into cell state (required for paste; copy/cut work without it)

DataGridFillHandle / DataGridMove / DataGridRowReorder

Fill ↗Move ↗Reorder ↗

No required props. Mount inside <DataGrid> next to the table.

DataGridCrossHighlight / DataGridStatusBar

Cross highlight ↗Status bar ↗

Cross-highlight paints header/gutter for the selection. Status bar aggregates the current range.

Toolbar

From grid-toolbar:

Component	Role
DataGridToolbar	Flex row for undo / redo / add / clear
DataGridUndo	Undo last mutation
DataGridRedo	Redo
DataGridAddRows	Append count blank rows
DataGridClearAll	Replace all rows with blanks
DataGridPasteHint	Clipboard paste affordance
DataGridShortcutsButton	Opens ? shortcuts dialog

<DataGridToolbar>
  <DataGridUndo />
  <DataGridRedo />
  <DataGridAddRows count={5} />
  <DataGridClearAll />
  <DataGridShortcutsButton />
</DataGridToolbar>

Dynamic columns UI

See Dynamic Columns.

Component	Role
DataGridAddColumnButton	Add a column at runtime
GridColumnMenuOptions	Column type / remove options in menu

Row menu

<GridRowMenu /> inside <DataTableRowContextMenuSlot>. Copy / Cut / Clear / Delete / Insert. Clipboard items appear only when DataGridClipboard is mounted.

Source Code ↗

Cell editors

Display shell for every visible cell; heavy editor mounts only while editing. Walkthrough: Cell Types.

Component	Use
GridTextCell	Free text
GridNumberCell	Numeric; optional format for currency display
GridCheckboxCell	Boolean; always interactive
GridDateCell	Calendar; stores YYYY-MM-DD
GridSelectCell	Dropdown (no search)
GridComboboxCell	Searchable dropdown
GridCellDisplay	Shared read-only shell for custom cells
GridMarchingAnts	Copy outline

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

Related guides

• Cell Types: editors in depth
• Validation: status / error and settle
• Persistence: useGridChanges
• API Reference: consolidated dump