Skip to content
OTF Kit logoOTF Kit

Advanced Data Grid

Data

Data grid with row selection, sorting, a column visibility menu, column resizing, and virtual scrolling for large datasets.

View in Storybook
Advanced Data Grid
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.

PropTypeDefaultDescription
columnsrequiredColumnDef<T, unknown>[]
datarequiredT[]
classNamestring
columnVisibilitybooleanfalseEnable column visibility toggle
emptyStateReactNodeSlot rendered when data is empty
filterablebooleanfalseEnable client-side column filtering
loadingbooleanfalseSlot rendered while loading
onRowClick(row: T) => voidCalled on row click
onSelectionChange(rows: T[]) => voidCalled when selection changes
resizablebooleantrueEnable column resize
rowHeightnumber40Row height estimate for virtualizer (default 40)
selectablebooleanfalseEnable row checkboxes + bulk selection
skeletonRowsnumber5Number of skeleton rows to show while loading (default 5)
sortablebooleantrueEnable column sorting
virtualbooleanfalseVirtualise rows for large datasets — enable when rows > ~100
virtualHeightnumber480Height of the scroll container when virtual=true (default 480)

Related