DataTable

A typed table with selection, sorting, filtering, grouping, and pagination.

Interactive playground

LIVE PREVIEW

Loading preview…

Props

data

Data used to render this component.

columns

columns configuration.

enableRowSelection

enable row selection configuration.

enableFiltering

enable filtering configuration.

enablePagination

enable pagination configuration.

pageSize

page size configuration.

enableColumnVisibility

enable column visibility configuration.

enableColumnReordering

enable column reordering configuration.

enableColumnPinning

enable column pinning configuration.

enableColumnResizing

enable column resizing configuration.

enableGrouping

enable grouping configuration.

showFilterRow

show filter row configuration.

density

density configuration.

variant

Visual appearance within the Vrum design system.

tableWidth

table width configuration.

loading configuration.

stickyHeader

sticky header configuration.

maxHeight

max height configuration.

Generated code

import { DataTable } from '@vrum/ui';

<DataTable
  data={[{"name":"Atlas dashboard","team":"Design","status":"In review","progress":65},{"name":"Workspace redesign","team":"Engineering","status":"In progress","progress":35},{"name":"Brand refresh","team":"Design","status":"Completed","progress":100},{"name":"Client portal","team":"Engineering","status":"In progress","progress":45},{"name":"Operations hub","team":"Operations","status":"Planned","progress":0},{"name":"Quarterly review","team":"Operations","status":"Completed","progress":100}]}
  columns={[{"accessorKey":"name","header":"Project"},{"accessorKey":"team","header":"Team"},{"accessorKey":"status","header":"Status"},{"accessorKey":"progress","header":"Progress"}]}
  enableRowSelection={true}
  enableFiltering={true}
  enablePagination={true}
  pageSize={5}
  enableColumnVisibility={true}
  enableColumnReordering={false}
  enableColumnPinning={false}
  enableColumnResizing={false}
  enableGrouping={false}
  showFilterRow={false}
  density={"normal"}
  variant={"bordered"}
  tableWidth={"fill"}
  loading={false}
  stickyHeader={false}
  maxHeight={360}
/>

DataTable props

Prop	Type	Default	Description
`columns*`	`ColumnDef<TData, unknown>[]`	none	columns configuration.
`data*`	`TData[]`	none	Data used to render this component.
`className`	`string`	none	Additional CSS classes.
`enableRowSelection`	`boolean`	`false`	enable row selection configuration.
`rowSelection`	`RowSelectionState`	none	row selection configuration.
`initialRowSelection`	`RowSelectionState`	`{}`	initial row selection configuration.
`onRowSelectionChange`	`OnChangeFn<RowSelectionState>`	none	on row selection change configuration.
`onRowsSelected`	`((rows: TData[]) => void)`	none	Called with the currently selected data records.
`getRowId`	`((row: TData, index: number) => string)`	none	get row id configuration.
`enableFiltering`	`boolean`	`true`	enable filtering configuration.
`filterColumn`	`string`	none	filter column configuration.
`filterPlaceholder`	`string`	none	filter placeholder configuration.
`globalFilter`	`string`	none	global filter configuration.
`onGlobalFilterChange`	`((value: string) => void)`	none	on global filter change configuration.
`enablePagination`	`boolean`	`true`	enable pagination configuration.
`pageSize`	`number`	`10`	page size configuration.
`pageSizeOptions`	`number[]`	`[5, 10, 20, 50]`	page size options configuration.
`manualPagination`	`boolean`	`false`	manual pagination configuration.
`pageCount`	`number`	none	page count configuration.
`rowCount`	`number`	none	row count configuration.
`pagination`	`PaginationState`	none	pagination configuration.
`onPaginationChange`	`OnChangeFn<PaginationState>`	none	on pagination change configuration.
`sorting`	`SortingState`	none	sorting configuration.
`onSortingChange`	`OnChangeFn<SortingState>`	none	on sorting change configuration.
`manualSorting`	`boolean`	`false`	manual sorting configuration.
`columnFilters`	`ColumnFiltersState`	none	column filters configuration.
`onColumnFiltersChange`	`OnChangeFn<ColumnFiltersState>`	none	on column filters change configuration.
`manualFiltering`	`boolean`	`false`	manual filtering configuration.
`enableColumnVisibility`	`boolean`	`true`	enable column visibility configuration.
`columnVisibility`	`VisibilityState`	none	column visibility configuration.
`onColumnVisibilityChange`	`OnChangeFn<VisibilityState>`	none	on column visibility change configuration.
`enableColumnReordering`	`boolean`	`false`	enable column reordering configuration.
`columnOrder`	`string[]`	none	column order configuration.
`onColumnOrderChange`	`OnChangeFn<string[]>`	none	on column order change configuration.
`enableColumnPinning`	`boolean`	`false`	enable column pinning configuration.
`columnPinning`	`ColumnPinningState`	none	column pinning configuration.
`onColumnPinningChange`	`OnChangeFn<ColumnPinningState>`	none	on column pinning change configuration.
`enableColumnResizing`	`boolean`	`false`	enable column resizing configuration.
`columnSizing`	`ColumnSizingState`	none	column sizing configuration.
`onColumnSizingChange`	`OnChangeFn<ColumnSizingState>`	none	on column sizing change configuration.
`columnResizeMode`	`"onChange" \| "onEnd"`	`"onChange"`	column resize mode configuration.
`columnResizeDirection`	`"ltr" \| "rtl"`	`"ltr"`	column resize direction configuration.
`tableWidth`	`"fill" \| "fit"`	`"fill"`	table width configuration.
`variant`	`"bordered" \| "plain"`	`"bordered"`	Visual appearance within the Vrum design system.
`density`	`"normal" \| "compact" \| "comfortable"`	`"normal"`	density configuration.
`loading`	`boolean`	`false`	loading configuration.
`onCellEdit`	`((row: TData, columnId: string, value: string) => void)`	none	Called with a data record, column id, and updated text value.
`enableGrouping`	`boolean`	`false`	enable grouping configuration.
`grouping`	`GroupingState`	none	grouping configuration.
`initialGrouping`	`GroupingState`	`[]`	initial grouping configuration.
`onGroupingChange`	`OnChangeFn<GroupingState>`	none	on grouping change configuration.
`expanded`	`ExpandedState`	none	expanded configuration.
`onExpandedChange`	`OnChangeFn<ExpandedState>`	none	on expanded change configuration.
`enableExpanding`	`boolean`	`false`	enable expanding configuration.
`renderSubComponent`	`((row: Row<TData>) => React.ReactNode)`	none	render sub component configuration.
`getSubRows`	`((row: TData) => TData[] \| undefined)`	none	get sub rows configuration.
`showToolbar`	`boolean`	`true`	show toolbar configuration.
`toolbarContent`	`React.ReactNode`	none	toolbar content configuration.
`toolbarTrailing`	`React.ReactNode`	none	toolbar trailing configuration.
`renderToolbar`	`((table: TableInstance<TData>) => React.ReactNode)`	none	render toolbar configuration.
`showFilterRow`	`boolean`	`false`	show filter row configuration.
`totalsRow`	`React.ReactNode`	none	totals row configuration.
`maxHeight`	`string \| number`	none	max height configuration.
`stickyHeader`	`boolean`	`false`	sticky header configuration.
`caption`	`string`	none	caption configuration.
`labels`	`{ empty?: string; search?: string; columns?: string; previous?: string; next?: string; selected?: string; }`	none	labels configuration.


Atlas dashboard	Design	In review	65
Workspace redesign	Engineering	In progress	35
Brand refresh	Design	Completed	100
Client portal	Engineering	In progress	45
Operations hub	Operations	Planned	0