Data

DataGrid

A virtualized, sortable, filterable, resizable data table — the most involved component in the library, and the one built for real production datasets rather than demo lists.

DataGrid

Preview

Status

Jane Doe

jane@example.com

Design

Active

Alex Kim

alex@example.com

Engineering

Active

Sam Patel

sam@example.com

Product

Active

Priya Nair

priya@example.com

Engineering

On leave

Diego Cruz

diego@example.com

Design

Active

Mei Chen

mei@example.com

Product

Active

Usage

tsx

import { DataGrid } from "@vesture/react";

<DataGrid
  columns={[
    { key: "name", header: "Name", sortable: true },
    { key: "email", header: "Email", filterable: true },
  ]}
  data={users}
  getRowId={(u) => u.id}
  selectable
  onRowEdit={(id, values) => saveUser(id, values)}
/>

Behavior

Row virtualization computed manually from scrollTop / rowHeight / overscan — no external virtualization dependency.
Column resize via Pointer Events on a role="separator" handle; columns can pin left or right and stay sticky during horizontal scroll.
Inline row editing: Enter saves, Escape cancels.
Controlled independently for sort, filters, and selectedIds — or hand serverSide off to your own API.

Props

DataGridColumn<T>

Prop	Type	Default	Description
key	string	—	Column id / fallback data key.
header	ReactNode	—	Header cell content.
width / minWidth	number	160 / 60	Sizing in px.
sortable / resizable / filterable	boolean	—	Enable per-column features.
pinned	"left" \| "right"	—	Freeze column during horizontal scroll.
editable	boolean	—	Allow inline editing when a row is in edit mode.
filterType	"text" \| "select"	"text"	Filter input kind.
accessor	(row: T) => string \| number	—	Custom value getter.
render	(row: T) => ReactNode	—	Custom cell renderer.

DataGrid<T>

Prop	Type	Default	Description
columns / data / getRowId	required	—	Column defs, row data, and a row key extractor.
rowHeight / height / overscan	number	40 / 400 / 5	Virtualization tuning.
selectable / selectedIds / onSelectionChange	mixed	—	Row selection, controllable.
sort / onSortChange	SortState \| null	—	Controlled sort.
filters / onFilterChange	FilterState[]	—	Controlled filters (text input debounced 200ms).
serverSide	boolean	false	Treat data as pre-sorted/filtered/paginated by the caller.
loading	boolean	false	Shows a Spinner overlay without unmounting rows.
page / pageSize / onPageChange / totalRowCount	mixed	—	Enables a built-in Pagination footer.
onRowEdit	(rowId, values) => void	—	Enables inline editing; called on save.