DS0
Patterns

DataGrid

The ultimate feature-rich data grid with sorting, filtering, pagination, selection, inline editing, column resizing, and more — all toggleable.

Interactive Playground

Toggle features on and off to build exactly the table you need. Every feature is a simple boolean prop.

Feature Toggles4 / 20 enabled
Employee directory
First Name
Last Name
Email
Department
Role
Salary
Start Date
Status
Location
Performance
AliceJohnsonalice.johnson@company.comFinanceLead$80,0122024-10-24HybridTokyoExceptional
BobSmithbob.smith@company.comLegalLead$176,7522022-10-08ActiveSingaporeExceptional
CarolWilliamscarol.williams@company.comDesignVP$77,7272019-11-04RemoteSan FranciscoNeeds Improvement
DavidBrowndavid.brown@company.comLegalIntern$90,6222024-06-07ActiveLondonExceptional
EvaJoneseva.jones@company.comOperationsVP$181,7602021-06-20ActiveSan FranciscoExceptional
FrankGarciafrank.garcia@company.comOperationsMid-level$69,1292019-09-06HybridBerlinExceptional
GraceMillergrace.miller@company.comOperationsManager$133,4572018-03-22On LeaveBerlinMeets Expectations
HenryDavishenry.davis@company.comHRLead$82,4562019-02-13On LeaveLondonExceptional
IrisRodrigueziris.rodriguez@company.comDesignSenior$163,8922019-01-04RemoteSan FranciscoExceptional
JackMartinezjack.martinez@company.comOperationsJunior$152,5632018-04-26HybridNew YorkNeeds Improvement
50 total rows
Page 1 of 5

Usage

import { DataGrid } from '@/recipes/data-grid/DataGrid';

<DataGrid
  columns={[
    { key: 'name', header: 'Name', sortable: true, editable: true },
    { key: 'email', header: 'Email', filterable: true },
    { key: 'role', header: 'Role', sortable: true },
    { key: 'salary', header: 'Salary', sortable: true, type: 'number' },
  ]}
  data={users}
  getRowKey={(r) => r.id}
  sortable
  searchable
  selectable
  pageSize={10}
/>

Features

FeaturePropDefaultDescription
SortingsortablefalseClick column headers to sort (multi-column)
Global SearchsearchablefalseFull-text search across all columns
Column FiltersfilterablefalsePer-column text filter inputs
PaginationpageSize—Set page size to enable
Row SelectionselectablefalseCheckbox selection with select-all
Inline EditingeditablefalseDouble-click cells to edit
Column ResizeresizablefalseDrag column borders to resize
Column ReorderreorderablefalseDrag-and-drop column headers
Column PinningpinnablefalsePin columns left or right
Column VisibilitycolumnTogglefalseToggle column visibility from dropdown
Row ExpansionexpandablefalseExpand rows to show detail view
CSV ExportexportablefalseOne-click export to CSV
Density ToggledensityTogglefalseSwitch compact / normal / comfortable
Striped RowsstripedfalseAlternating row background colors
Sticky HeaderstickyHeadertrueHeader stays visible on scroll
Loading StateisLoadingfalseSkeleton loading animation

Column Definition

interface DataGridColumn<T> {
  key: string;
  header: string;
  accessor: (row: T) => ReactNode;
  rawValue?: (row: T) => string | number;
  sortable?: boolean;
  filterable?: boolean;
  editable?: boolean;
  width?: number;
  minWidth?: number;
  pin?: 'left' | 'right' | null;
  cellRenderer?: (value: ReactNode, row: T) => ReactNode;
  type?: 'text' | 'number' | 'boolean' | 'select';
  options?: string[];
}

API Reference

PropTypeDefaultDescription
columnsDataGridColumn<T>[]—Column definitions
dataT[]—Data rows
getRowKey(row: T) => string—Unique key accessor
sortablebooleanfalseEnable sorting
searchablebooleanfalseEnable search
searchPlaceholderstring'Search…'Search placeholder
filterablebooleanfalseEnable column filters
selectablebooleanfalseEnable row selection
selectedKeysSet<string>new Set()Controlled selection
onSelectionChange(keys: Set<string>) => void—Selection callback
editablebooleanfalseEnable inline editing
onCellEdit(rowKey, colKey, value) => void—Edit callback
pageSizenumber—Rows per page
resizablebooleanfalseEnable column resize
reorderablebooleanfalseEnable column reorder
pinnablebooleanfalseEnable column pinning
columnTogglebooleanfalseEnable column visibility toggle
expandablebooleanfalseEnable row expansion
renderRowDetail(row: T) => ReactNode—Expanded row content
exportablebooleanfalseEnable CSV export
density'compact' | 'normal' | 'comfortable''normal'Table density
densityTogglebooleanfalseShow density picker
stripedbooleanfalseStriped rows
stickyHeaderbooleantrueSticky header
isLoadingbooleanfalseShow loading skeletons
emptyMessagestring'No results found.'Empty state text
captionstring—Accessible table caption

Keyboard Navigation

KeyAction
Arrow RightMove to next cell
Arrow LeftMove to previous cell
Arrow DownMove to cell below
Arrow UpMove to cell above
EnterConfirm cell edit
EscapeCancel cell edit

Accessibility

  • Full role="grid" ARIA pattern
  • aria-sort on sorted columns
  • aria-rowcount for total rows
  • Keyboard navigable cells
  • Checkbox aria-label on every row
  • Screen-reader-only caption support

Data Table

A full-featured data table with search, sorting, pagination, and row selection.

Chart

Zero-dependency SVG data visualization with line, bar, area, donut, scatter, and sparkline chart types — all interactive and accessible.

On this page

Interactive PlaygroundUsageFeaturesColumn DefinitionAPI ReferenceKeyboard NavigationAccessibilityRelated