Recipe
Data Grid
A high-performance table component for rendering large datasets with sorting, filtering, and row selection built on virtualized scrolling.
Preview
data-grid.tsx
| ID | Name | Status | Created |
|---|---|---|---|
| usr_01 | Aria Chen | Active | 2025-01-12 |
| usr_02 | Marcus Webb | Active | 2025-01-14 |
| usr_03 | Lena Park | Inactive | 2025-01-18 |
| usr_04 | Devon Miles | Active | 2025-01-22 |
Features
Virtualized rows
Only renders visible rows for 100k+ datasets.
Column sorting
Click headers to sort ascending or descending.
Row selection
Single or multi-select with keyboard support.
Sticky headers
Headers remain fixed during vertical scroll.
Usage
<DataGrid
columns={columns}
rows={data}
pageSize={50}
onSort={handleSort}
selectedRows={selected}
/>