DataGrid

Spreadsheet-style data grid with sortable columns, double-click inline cell editing, and sticky headers.

DataGrid is the spreadsheet-style cousin of DataTable. It is also built on TanStack Table and takes data plus columns, but its focus is in-place editing: mark columns in editableColumns and users can double-click a cell to edit it, committing with Enter (and Escape to cancel) through onCellChange. It adds a sticky header (stickyHeader), sortable columns, and optional pagination. Choose DataGrid when users edit values directly in the table; choose DataTable for read-heavy lists with selection and export.

Example

Preview

Name	Status
Officina	Live
Template	Draft

import { DataGrid } from '@officina/ui';
import type { ColumnDef } from '@tanstack/react-table';

type Row = { sku: string; price: number };

const columns: ColumnDef<Row>[] = [
  { accessorKey: 'sku', header: 'SKU' },
  { accessorKey: 'price', header: 'Price' },
];

function PriceGrid({ rows }: { rows: Row[] }) {
  return (
    <DataGrid
      data={rows}
      columns={columns}
      editableColumns={['price']}
      stickyHeader
      onCellChange={(rowIndex, columnId, value) => console.log(rowIndex, columnId, value)}
    />
  );
}

API

Prop	Type	Default	Description
columns*	DataGridColumn<TData>[]	—	Column definitions.
data*	TData[]	—	Row data.
density	enum	—	Row height/padding density.
editableColumns	string[]	—	Column accessorKey/id values that allow double-click inline editing.
filters	DataGridFilters<TData>	—	Per-column filter configuration.
globalFilter	string	—	Controlled global search term.
onCellChange	(rowIndex: number, columnId: string, value: string) => void	—	Called when an editable cell is committed.
pageSize	number	—	Rows per page; enables pagination when set.
stickyHeader	boolean	—	Keep the header visible while scrolling.

Example

API

On this page