DataGrid

Usage

import { useRef } from "react";
import { DataGrid, type DataGridHandle } from "@vesture/react";

const gridRef = useRef<DataGridHandle<User>>(null);

<DataGrid
  ref={gridRef}
  columns={[
    { key: "name", header: "Name", sortable: true, editable: true },
    { key: "email", header: "Email", filterable: true },
    { key: "salary", header: "Salary", aggregate: "sum" },
  ]}
  data={users}
  getRowId={(u) => u.id}
  selectable
  enableExport
  groupBy="department"
  onRowEdit={(id, values) => saveUser(id, values)}
  onRowDoubleClick={(row) => router.push("/users/" + row.id)}
/>

// Or trigger export imperatively from your own UI:
gridRef.current?.exportToExcel({ filename: "users.xlsx" });

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.
• enableExport renders a toolbar Export button; exportToExcel is also exposed via a ref for a custom trigger. Export reads whatever's currently sorted/filtered on screen, not the raw data prop, and lazy-loads the xlsx library on first use so it never weighs down the base bundle.
• onRowClick / onRowDoubleClick / onCellClick fire with the row's data (and column, for cell clicks) plus the native mouse event — useful for row navigation or a custom detail panel. Clicking the row-select checkbox or an inline-edit action button doesn't also trigger onRowClick; those stop propagation.
• groupBy partitions rows into single-level groups (no nested multi-level grouping), rendered as collapsible group-header rows ahead of their data rows in the same virtualized flat list — group headers and data rows can have different heights (groupRowHeight vs rowHeight). Groups default to expanded; expandedGroups/onExpandedGroupsChange control which are open. Select-all only selects the currently visible (non-collapsed-group) rows. Any column with aggregate set ('sum' | 'avg' | 'count' | 'min' | 'max', or a custom (rows) => ReactNode) shows its computed value inline in that group's header row.