# antuikit / DataGrid

> A spreadsheet-like grid drawn from a `useDataGrid` table: virtualized rows, a sticky header, sticky pinned columns, cell editing, range selection and the keyboard map.

Docs: https://antuikit.com/docs/components/data-grid

## Install

npx antuikit@latest init
npx antuikit@latest add data-grid

## Import

import { DataGrid, useDataGrid } from "@/components/ui/data-grid";

## Demos

- [Basic](https://ui.antuikit.com/embed/data-grid/basic.md): Pass `columns`, `data` and `getRowId` to `useDataGrid` and keep each edit by setting `data` from `onDataChange`, here on bookings with guests, their countries, statuses and check-in times.
- [Variants](https://ui.antuikit.com/embed/data-grid/variants.md): One column per built-in `meta.variant`, from text, dates and times to a person, a color and a cascading path, each with its cell and editor.
- [Read-only](https://ui.antuikit.com/embed/data-grid/read-only.md): Set `meta.editable` to false to lock one column, or pass `readOnly` to lock the whole grid, here from a checkbox.
- [Validation](https://ui.antuikit.com/embed/data-grid/validation.md): Set `meta.required` or `meta.validate` to keep an invalid value out: the editor stays open with the message until you fix it or press Esc.
- [Add and delete rows](https://ui.antuikit.com/embed/data-grid/add-delete.md): Pass `onRowAdd` for an Add row button, and `onRowsDelete` and `onRowsDuplicate` for the actions on selected rows.
- [Row height](https://ui.antuikit.com/embed/data-grid/row-height.md): `DataGridToolbar` sets the row height from short to extra tall, and taller rows show more lines of long text.
- [Range selection](https://ui.antuikit.com/embed/data-grid/range-selection.md): Drag across cells, or Shift+click, to select a range, and the ActionBar counts the cells and clears them.
- [Edit on click](https://ui.antuikit.com/embed/data-grid/edit-on-click.md): Set `editTrigger: "click"` in `useDataGrid` so one click selects a cell and opens its editor at once.
- [Cell colors](https://ui.antuikit.com/embed/data-grid/cell-colors.md): Set `cellColors` for a Color button and `actionBarMinCells={1}` so clicking one cell opens the ActionBar to paint it.
- [Context menu](https://ui.antuikit.com/embed/data-grid/context-menu.md): Right-click the selection to copy, cut or clear cells, and to duplicate or delete rows when `onRowsDuplicate` and `onRowsDelete` are set.
- [Pinning and resizing](https://ui.antuikit.com/embed/data-grid/pinning-resizing.md): Set `columnPinning` in `initialState` to keep Guest at the start and Total at the end, and drag a header edge to resize.
- [Keyboard](https://ui.antuikit.com/embed/data-grid/keyboard.md): Move with the arrow keys, type to replace a value, press Enter to edit and Shift+Enter to add a row.
- [Room rates](https://ui.antuikit.com/embed/data-grid/room-rates.md): A room rates sheet with meal plans, prices, minimum stays, refund terms and valid dates, rows you can add, copy and delete, and a toolbar.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/data-grid`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `DataGrid` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.