DataGrid

A virtualized grid with sorting, filtering and selection.

Virtualized controlled data grid with local/manual sort, filtering and row selection.

DataGridProps<T> generic packages/core/src/desktop-controls.ts:213 ↗

Import

import { DataGrid } from "@tarve/core";

Usage

DataGrid.tsx

import { DataGrid, type DataGridKey, type DataGridSort } from "@tarve/core";

const files = Array.from({ length: 5_000 }, (_, index) => ({ id: index, name: `file-${index}.ts`, size: index * 13 }));
let sort: DataGridSort | undefined = { column: "name", direction: "asc" };
let selected: DataGridKey[] = [];

<DataGrid
  rows={files}
  rowKey={(row) => row.id}
  height={400}
  selectionMode="multiple"
  selectedKeys={selected}
  sort={sort}
  columns={[
    { key: "name", header: "Name", value: (row) => row.name, sortable: true, searchable: true },
    { key: "size", header: "Size", value: (row) => row.size, sortable: true, align: "end" },
  ]}
  onSortChange={(next) => {
    sort = next;
  }}
  onSelectionChange={(keys) => {
    selected = keys;
  }}
/>

Props

Prop	Type	Default
`columns` required	`readonly DataGridColumn<T>[]`	—
`rowKey` required	`(row: T, index: number) => DataGridKey`	—
`rows` required	`readonly T[]`	—
`empty`	`Child`	`"No results."`
`filter`	`string`	`""`
`filterMode`	`"local" \| "manual"`	`"local"`
`height`	`number`	`360`
`offset`	`number`	`0`
`onRowActivate`	`(row: T, index: number) => void`	—
`onScroll`	`(offset: number, max: number) => void`	`() => {}`
`onSelectionChange`	`(keys: DataGridKey[]) => void`	—
`onSortChange`	`(sort: DataGridSort \| undefined) => void`	—
`overscan`	`number`	`3`
`rowHeight`	`number`	`40`
`selectedKeys`	`readonly DataGridKey[]`	`[]`
`selectionMode`	`"none" \| "single" \| "multiple"`	`"none"`
`sort`	`DataGridSort`	—
`sortMode`	`"local" \| "manual"`	`"local"`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

DataGridColumn

interface DataGridColumn<T> {
  key: string;
  header: Child;
  value?: (row: T, index: number) => unknown;
  render?: (row: T, index: number) => Child;
  width?: Style["width"];
  align?: Style["align"];
  sortable?: boolean;
  searchable?: boolean;
  compare?: (a: T, b: T) => number;
}

DataGridKey

type DataGridKey = string | number;

DataGridSort

interface DataGridSort {
  column: string;
  direction: DataGridSortDirection;
}