DataGrid

A spreadsheet-like grid built on TanStack Table, with cell editing, range selection, a keyboard map, an action bar and a right-click menu.

Basic

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

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

Set meta.editable to false to lock one column, or pass readOnly to lock the whole grid, here from a checkbox.

Validation

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

Pass onRowAdd for an Add row button, and onRowsDelete and onRowsDuplicate for the actions on selected rows.

Row height

DataGridToolbar sets the row height from short to extra tall, and taller rows show more lines of long text.

Range selection

Drag across cells, or Shift+click, to select a range, and the ActionBar counts the cells and clears them.

Edit on click

Set editTrigger: "click" in useDataGrid so one click selects a cell and opens its editor at once.

Cell colors

Set cellColors for a Color button and actionBarMinCells={1} so clicking one cell opens the ActionBar to paint it.

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

Set columnPinning in initialState to keep Guest at the start and Total at the end, and drag a header edge to resize.

Keyboard

Move with the arrow keys, type to replace a value, press Enter to edit and Shift+Enter to add a row.

In context

The component inside real screens, with the components it usually sits beside.

Room rates

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.

Colorpicker DataTable

On This Page