Advanced Data Grid
DataData grid with row selection, sorting, a column visibility menu, column resizing, and virtual scrolling for large datasets.
Advanced Data GridData · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Advanced Data Grid from @otfdashkit/ui.
Code
// Advanced Data Grid — Data grid with row selection, sorting, a column visibility menu, column resizing, and virtual scrolling for large datasets.
//
// Install:
// bun add @otfdashkit/ui
import { AdvancedDataGrid } from '@otfdashkit/ui'
export function Example() {
return (
<AdvancedDataGrid>
{/* your content */}
</AdvancedDataGrid>
)
}Props
Props declared in the AdvancedDataGrid source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| columnsrequired | ColumnDef<T, unknown>[] | ||
| datarequired | T[] | ||
| className | string | ||
| columnVisibility | boolean | false | Enable column visibility toggle |
| emptyState | ReactNode | Slot rendered when data is empty | |
| filterable | boolean | false | Enable client-side column filtering |
| loading | boolean | false | Slot rendered while loading |
| onRowClick | (row: T) => void | Called on row click | |
| onSelectionChange | (rows: T[]) => void | Called when selection changes | |
| resizable | boolean | true | Enable column resize |
| rowHeight | number | 40 | Row height estimate for virtualizer (default 40) |
| selectable | boolean | false | Enable row checkboxes + bulk selection |
| skeletonRows | number | 5 | Number of skeleton rows to show while loading (default 5) |
| sortable | boolean | true | Enable column sorting |
| virtual | boolean | false | Virtualise rows for large datasets — enable when rows > ~100 |
| virtualHeight | number | 480 | Height of the scroll container when virtual=true (default 480) |