DataGrid

A spreadsheet-like grid for dense, editable data — distinct from DataTable: adds column resizing and inline cell editing on top of the same TanStack Table foundation. Reach for DataTable for display/sort/paginate; reach for DataGrid when users need to resize columns or edit values directly.

<DataGrid
columns={[
  { accessorKey: "name", header: "Name" },
  { accessorKey: "role", header: "Role" },
  { accessorKey: "status", header: "Status" },
]}
data={[
  { name: "Ada Lovelace", role: "Owner", status: "Active" },
  { name: "Grace Hopper", role: "Admin", status: "Active" },
  { name: "Alan Turing", role: "Member", status: "Invited" },
]}
/>

Editable — change the code above and the preview updates live.

Drag a column's right edge to resize it (or focus the resize handle and use the Left/Right arrow keys).

Inline editing

Use DataGridEditableCell inside a column's cell renderer — click a cell to edit, Enter to commit, Escape to discard.

function Demo() {
const [data, setData] = useState([
  { id: "1", name: "Ada Lovelace", role: "Owner" },
  { id: "2", name: "Grace Hopper", role: "Admin" },
]);

function updateCell(rowIndex, key, value) {
  setData((rows) => rows.map((r, i) => (i === rowIndex ? { ...r, [key]: value } : r)));
}

const columns = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row, getValue }) => (
      <DataGridEditableCell value={getValue()} onCommit={(v) => updateCell(row.index, "name", v)} />
    ),
  },
  {
    accessorKey: "role",
    header: "Role",
    cell: ({ row, getValue }) => (
      <DataGridEditableCell value={getValue()} onCommit={(v) => updateCell(row.index, "role", v)} />
    ),
  },
];

return <DataGrid columns={columns} data={data} />;
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Installation

import { DataGrid, DataGridEditableCell } from "@labanaat/ui/data-grid";

Props

Prop	Type	Default	Description
columns	DataGridColumn<T>[]	—	Same shape as TanStack's ColumnDef
data	T[]	—	Row data
isLoading	boolean	false	Shows skeleton rows
emptyTitle / emptyDescription	string	—	Shown when data is empty
sorting / onSortingChange	SortingState	—	Controlled sorting; omit to manage internally
enableColumnResizing	boolean	true	Shows drag handles on column edges