Data Table

A data table component with sorting, filtering, and selection.

vu-data-table · @velkin/react-pro/data-table

Copy page

Import

React

npm i @velkin/react-pro

import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");

// @velkin-pro
import { VuDataTable } from "@velkin/react-pro/data-table";

Examples

API

Props

Prop	Type	Default	Description
columns	TableColumnDef[]	[]	Column tree with optional nested headers. Default: `[]`.
defaultColumnDef	TableDefaultColumnDef	{}	Defaults merged into every column. Default: `{}`.
rowData	TableRow[]	[]	Row records; each row requires a string id. Default: `[]`.
dataProvider	`null \| TableDataProvider`	null	Alternate row source via `fetch`. Client ops by default; `serverSideOperations: true` for SSRM. Default: `null`.
lazyColumns	`boolean`	false	With `dataProvider`, request in-view (+ pinned/sort/filter/group) column keys. Default: `false`.
rowKey	`string`	"id"	Field used as the stable row id. Default: `"id"`.
showIndexColumn	`boolean`	false	Synthetic 1-based row-index column pinned left. Default: `false`.
defaultExpandedGroupLevels	`null \| number`	null	Auto-collapse groups deeper than this; `null` keeps all expanded. Default: `null`.
singleExpandedRow	`boolean`	false	Accordion expand — only one data row open. Default: `false`.
cellSelection	`boolean`	false	Click/drag cell range selection and copy. Default: `false`.
keyboardNavigation	`boolean`	false	Arrow/Tab/Home-style active cell; typeahead jump when `cellEditing` is off. Default: `false`.
cellEditing	`boolean`	false	In-cell edit (F2, Enter, type-to-replace). Printable keys typeahead-jump when this is off. Default: `false`.
searching	`boolean`	false	Quick-filter search bar. Default: `false`.
sorting	`boolean`	false	Column header sort controls. Default: `false`.
pagination	`boolean`	false	Footer pagination controls. Default: `false`.
filtering	`boolean`	false	Per-column floating filter row. Default: `false`.
advancedFiltering	`boolean`	false	Expression filter bar in the header chrome. Default: `false`.
grouping	`boolean`	false	Row grouping with group-by chip row. Default: `false`.
columnVisibility	`boolean`	false	Columns sidebar pane and header hide action. Default: `false`.
columnReorder	`boolean`	false	Drag-reorder leaf column headers. Default: `false`.
rowDrag	`boolean`	false	Drag-reorder data rows. Default: `false`.
totalBar	`boolean`	false	Footer aggregate total bar. Default: `false`.
columnMenu	`boolean`	false	Per-column header overflow menu. Default: `false`.
pivot	`boolean`	false	Pivot builder in the columns sidebar. Default: `false`.
expandedRows	`boolean`	false	Expandable row detail panels. Default: `false`.
gridlines	`boolean`	false	Show vertical column separator lines. Default: `false`.
rowSelection	`null \| { mode: TableSelectionMode; selectAll?: boolean; selectedIds?: string[]; excludedIds?: string[]; }`	null	Selection state; omit to disable selection UI. Default: `null`.
tone	VuDataTableTone	"normal"	Neutral surface weight for row and header chrome. Default: `"normal"`.
sort	TableSortRule[]	[]	Controlled multi-column sort rules. Default: `[]`.
columnFilters	Record	{}	Active per-column filters keyed by field. Default: `{}`.
quickFilterText	`string`	""	Controlled quick-filter text. Default: `""`.
advancedFilterQuery	`string`	""	Controlled advanced filter expression. Default: `""`.
page	`number`	1	Current page index (1-based). Default: `1`.
pageSize	`number`	25	Rows per page. Default: `25`.
pageSizeOptions	DataTablePageSizeOption[]	[10, 25, 50, 100, "all"]	Page-size choices for the footer menu. Default: `[10, 25, 50, 100, "all"]`.
groupBy	`string[]`	[]	Column fields for multi-level row grouping. Default: `[]`.
collapsedGroupKeys	`string[]`	[]	Collapsed group row keys. Default: `[]`.
groupColumnLabel	`string`	"Group"	Header for the auto-group column. Default: `"Group"`.
height	`string`	"360px"	Viewport block size for the virtualized body. Default: `"360px"`.
loading	`boolean`	false	Shows a loading overlay over the grid viewport. Default: `false`.
rowModel	TableRowModel	—	Row store; overrides rowData when set. `lazyRowModel()` auto-attaches `createRowIndexProvider`.
columnModel	TableColumnModel	—	Column store; overrides columns when set.
columnWidths	Record	{}	Per-column width overrides keyed by field. Default: `{}`.
columnResize	`boolean`	false	Drag resize handles on leaf headers. Default: `false`.
expandedRowIds	`string[]`	[]	Expanded data-row ids. Default: `[]`.
expandedRowRenderer	`null \| (row: TableRow, context: VuDataTableExpandedRowRendererContext) => unknown`	null	Detail panel renderer for expanded rows. Default: `null`.
expandedRowHeight	`number`	120	Estimated detail row block size before measurement. Default: `120`.
pivotConfig	`null \| { rowDimensions: readonly string[]; columnDimensions: readonly string[]; values: readonly TablePivotValueField[]; }`	null	Pivot field assignment. Default: `null`.
pivotEnabled	`boolean`	true	Renders the pivot layout instead of the flat grid. Default: `true`.
collapsedPivotKeys	`string[]`	[]	Collapsed pivot group row keys. Default: `[]`.
pivotRowSort	TablePivotRowSort	{}	Per row-dimension pivot sort state. Default: `{}`.
pivotColumnSortDirection	TablePivotColumnSortDirection	"asc"	Hierarchical sort for pivot column keys. Default: `"asc"`.
aggregation	`string`	"sum"	Default numeric aggregation for group subtotals. Default: `"sum"`.
aggregators	TableAggregatorRegistry	{}	Custom reducers referenced from column aggregation. Default: `{}`.
extraSidebarPanes	DataTableSidebarPaneDefinition[]	[]	Custom sidebar panes after built-in columns and filters. Default: `[]`.

Events

Event	Detail	Description
vu-quick-filter	VuDataTableQuickFilterDetail	Quick-filter text changes.
vu-advanced-filter	VuDataTableAdvancedFilterDetail	Advanced filter expression changes.
vu-sort	VuDataTableSortDetail	Sort rule changes.
vu-page	VuDataTablePageChangeDetail	Pagination changes.
vu-filter	VuDataTableFilterDetail	Column filter changes.
vu-selection	VuDataTableSelectionChangeDetail	Row selection changes.
vu-column-width	VuDataTableColumnWidthDetail	Column width overrides.
vu-group	VuDataTableGroupDetail	Group-by or collapse changes.
vu-pivot	VuDataTablePivotDetail	Pivot config changes.
vu-expanded-row	VuDataTableExpandedRowDetail	Expanded row id changes.
vu-column-visibility	VuDataTableColumnVisibilityDetail	Column visibility changes.
vu-column-reorder	VuDataTableColumnReorderDetail	Column tree reorder.
vu-row-reorder	VuDataTableRowReorderDetail	Row data reorder.
vu-data-provider-error	VuDataTableDataProviderErrorDetail	Fired when `dataProvider.fetch` (or a secondary hook) rejects.
vu-cell-selection	VuDataTableCellSelectionDetail	Active cell / range selection changed.
vu-cell-change	VuDataTableCellChangeDetail	A cell value was committed.

Slots

Slot	Description
header-actions	Extra controls inline at the end of the native header toolbar row.
footer-actions	Extra controls inline in the native pagination footer bar.
header	Extra banner above the grid chrome.
footer	Extra banner below the pagination bar.
empty	Empty-state content when the current view has no rows.
loading	Loading overlay content; replaces the default message.

CSS parts

Part	Description
header-chrome	Search and group-by controls above column headers.
header	Column header scroll region.
header-cell	One header cell.
search	Search field wrapper in the header chrome.
search-input	Native search text input.
search-clear	Clear-search button shown when a query is present.
advanced-filter	Advanced filter bar (`vu-advanced-filter`) in the header chrome.
advanced-filter-field	Advanced filter input field wrapper.
advanced-filter-input	Advanced filter expression input.
advanced-filter-clear	Clear advanced filter button.
advanced-filter-builder	Visual builder toggle button.
advanced-filter-suggestions	Type-ahead suggestions list.
advanced-filter-popover	Visual builder popover surface.
group-by	Group-by chip row in the header chrome.
group-by-chips	Active group-by chips container; drop header columns here.
group-by-chip	One grouped column chip; drag to reorder.
group-by-chip-remove	Remove button on a group-by chip.
header-actions	Inline action controls in the header toolbar row.
header-menu-trigger	Three-dot column menu button on leaf headers.
header-column-menu	Popover panel for column menu actions.
filter-row	Per-column floating filter row below headers.
filter-cell	One floating filter cell (input + advanced filter menu).
filter-button	Advanced filter icon button in a filter cell.
filter-panel	Advanced filter dropdown panel for one column.
footer	Pagination footer below the grid.
footer-info	Row range summary in the footer.
footer-pagination	Centered pagination bar region.
footer-controls	Page size menu and footer action controls (end-aligned).
footer-actions	Inline action controls in the pagination footer bar.
page-size	Rows-per-page dropdown.
sidebar	Right-edge sidebar shell (tab rail + panes).
sidebar-tabs	Vertical tab rail for sidebar panes.
sidebar-tab	One sidebar tab button.
sidebar-pane-columns	Columns pane (visibility checklist and pivot controls).
sidebar-pane-filters	Filters pane.
pivot-zone-available	Field palette in the columns pane pivot builder.
pivot-zone-row	Row dimension drop zone.
pivot-zone-column	Column dimension drop zone.
pivot-zone-value	Value dimension drop zone.
pivot-field	One draggable field in the palette.
pivot-chip	Assigned field chip in a drop zone.
pivot-mode-switch	Pivot on/off switch in the columns pane.
body	Virtualized body scrollport.
cell	One body cell.
header-banner	Extra `header` slot region above the grid chrome.
footer-banner	Extra `footer` slot region below pagination.
empty	Empty-state overlay when the view has no rows.
cell-editor	Native input shown while a cell is being edited.
filter-chips	Active column-filter chips in the header chrome.
filter-chip	One active filter chip.
filter-chip-remove	Clear button on an active filter chip.
bulk-bar	Selection summary bar.
bulk-bar-count	Selected row count label.
bulk-bar-clear	Clear-selection control.

Methods

Method	Description
getSnapshot	- Returns the current read-only view snapshot from the table engine.
applyState	- Applies a partial host + engine state patch.
exportCsv	- Serializes the current view to CSV.
copySelection	- Copies the selected cells (or current view) as TSV. Pass `{ nested: true }` for stacked headers.
commitCellValue	- Writes one cell and emits `vu-cell-change`.

Types

Name	Definition
number \| null	`null \| number`
TableAggregatorRegistry	`{ [x: string]: TableAggregatorFn; }`
TableColumnModel	`{ mode: "tree"; columns: TableColumnDef[]; } \| { mode: "range"; count: number; width: number; headerName?: string \| ((index: number) => string); type?: TableColumnType; sortable?: boolean; searchable?: boolean; pinnedLeft?: number; pinnedRight?: number; totalBarColumnKeys?: string[]; }`
TableDataProvider \| null	`null \| TableDataProvider`
TableDefaultColumnDef	{ type?: TableColumnType; visible?: boolean; searchable?: boolean; sortable?: boolean; width?: number; flex?: number; minWidth?: number; maxWidth?: number; pinned?: TablePin; dataAlign?: TableAlign; headerAlign?: TableAlign; aggregation?: TableAggregationKind; headerAggregation?: TableHeaderAggregationSpec; headerAggregationByLevel?: TableHeaderAggregationByLevel; cellRenderer?: TableColumnCellRenderer; editable?: boolean; valueGetter?: TableColumnValueGetter; valueFormatter?: TableColumnValueFormatter; }
TableEngineState["aggregation"]	`string`
TablePivotColumnSortDirection	`"asc" \| "desc"`
TablePivotConfig \| null	`null \| { rowDimensions: readonly string[]; columnDimensions: readonly string[]; values: readonly TablePivotValueField[]; }`
TablePivotRowSort	`{ [x: string]: TablePivotRowSortEntry; }`
TableRowModel	`{ mode: "client"; rows: TableRow[]; index?: TableRowIndexProvider; } \| { mode: "lazy"; rowCount: number; getRowId: (sourceRowIndex: number) => string; getValue: (sourceRowIndex: number, field: string) => unknown; index?: TableRowIndexProvider; }`
VuDataTableAdvancedFilterDetail	`{ query: string; snapshot: TableViewSnapshot; }`
VuDataTableCellChangeDetail	`{ rowId: string; field: string; value: unknown; row: TableRow \| null; snapshot: TableViewSnapshot; }`
VuDataTableCellSelectionDetail	`{ activeCell: VuDataTableCellCoord \| null; selectedCells: string[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnReorderDetail	`{ columns: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnVisibilityDetail	`{ columns: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnWidthDetail	`{ columnWidths: Record<string, number>; snapshot: TableViewSnapshot; }`
VuDataTableExpandedRowDetail	`{ expandedRowIds: string[]; snapshot: TableViewSnapshot; }`
VuDataTableExpandedRowRenderer \| null	`null \| (row: TableRow, context: VuDataTableExpandedRowRendererContext) => unknown`
VuDataTableFilterDetail	`{ columnFilters: Record<string, TableColumnFilter>; snapshot: TableViewSnapshot; }`
VuDataTableGroupDetail	`{ groupBy: string[]; collapsedGroupKeys: string[]; columns?: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTablePageChangeDetail	`VuDataTablePageDetail & { snapshot: TableViewSnapshot; }`
VuDataTablePivotDetail	`{ pivotEnabled?: boolean; pivotConfig?: TablePivotConfig; collapsedPivotKeys?: string[]; pivotRowSort?: TablePivotRowSort; pivotColumnSortDirection?: TablePivotColumnSortDirection; snapshot: TableViewSnapshot; }`
VuDataTableQuickFilterDetail	`{ query: string; snapshot: TableViewSnapshot; }`
VuDataTableRowReorderDetail	`{ rowData: TableRow[]; snapshot: TableViewSnapshot; }`
VuDataTableRowSelection \| null	`null \| { mode: TableSelectionMode; selectAll?: boolean; selectedIds?: string[]; excludedIds?: string[]; }`
VuDataTableSelectionChangeDetail	`VuDataTableSelectionDetail & { snapshot: TableViewSnapshot; }`
VuDataTableSortDetail	`{ sort: TableSortRule[]; snapshot: TableViewSnapshot; }`
VuDataTableTone	`"subtle" \| "normal" \| "strong"`

Import

React

npm i @velkin/react-pro import { LicenseInfo } from "@velkin/license"; // Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY // Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? ""); // @velkin-pro import { VuDataTable } from "@velkin/react-pro/data-table";

API

Props

Prop	Type	Default	Description
columns	TableColumnDef[]	[]	Column tree with optional nested headers. Default: `[]`.
defaultColumnDef	TableDefaultColumnDef	{}	Defaults merged into every column. Default: `{}`.
rowData	TableRow[]	[]	Row records; each row requires a string id. Default: `[]`.
dataProvider	`null \| TableDataProvider`	null	Alternate row source via `fetch`. Client ops by default; `serverSideOperations: true` for SSRM. Default: `null`.
lazyColumns	`boolean`	false	With `dataProvider`, request in-view (+ pinned/sort/filter/group) column keys. Default: `false`.
rowKey	`string`	"id"	Field used as the stable row id. Default: `"id"`.
showIndexColumn	`boolean`	false	Synthetic 1-based row-index column pinned left. Default: `false`.
defaultExpandedGroupLevels	`null \| number`	null	Auto-collapse groups deeper than this; `null` keeps all expanded. Default: `null`.
singleExpandedRow	`boolean`	false	Accordion expand — only one data row open. Default: `false`.
cellSelection	`boolean`	false	Click/drag cell range selection and copy. Default: `false`.
keyboardNavigation	`boolean`	false	Arrow/Tab/Home-style active cell; typeahead jump when `cellEditing` is off. Default: `false`.
cellEditing	`boolean`	false	In-cell edit (F2, Enter, type-to-replace). Printable keys typeahead-jump when this is off. Default: `false`.
searching	`boolean`	false	Quick-filter search bar. Default: `false`.
sorting	`boolean`	false	Column header sort controls. Default: `false`.
pagination	`boolean`	false	Footer pagination controls. Default: `false`.
filtering	`boolean`	false	Per-column floating filter row. Default: `false`.
advancedFiltering	`boolean`	false	Expression filter bar in the header chrome. Default: `false`.
grouping	`boolean`	false	Row grouping with group-by chip row. Default: `false`.
columnVisibility	`boolean`	false	Columns sidebar pane and header hide action. Default: `false`.
columnReorder	`boolean`	false	Drag-reorder leaf column headers. Default: `false`.
rowDrag	`boolean`	false	Drag-reorder data rows. Default: `false`.
totalBar	`boolean`	false	Footer aggregate total bar. Default: `false`.
columnMenu	`boolean`	false	Per-column header overflow menu. Default: `false`.
pivot	`boolean`	false	Pivot builder in the columns sidebar. Default: `false`.
expandedRows	`boolean`	false	Expandable row detail panels. Default: `false`.
gridlines	`boolean`	false	Show vertical column separator lines. Default: `false`.
rowSelection	`null \| { mode: TableSelectionMode; selectAll?: boolean; selectedIds?: string[]; excludedIds?: string[]; }`	null	Selection state; omit to disable selection UI. Default: `null`.
tone	VuDataTableTone	"normal"	Neutral surface weight for row and header chrome. Default: `"normal"`.
sort	TableSortRule[]	[]	Controlled multi-column sort rules. Default: `[]`.
columnFilters	Record	{}	Active per-column filters keyed by field. Default: `{}`.
quickFilterText	`string`	""	Controlled quick-filter text. Default: `""`.
advancedFilterQuery	`string`	""	Controlled advanced filter expression. Default: `""`.
page	`number`	1	Current page index (1-based). Default: `1`.
pageSize	`number`	25	Rows per page. Default: `25`.
pageSizeOptions	DataTablePageSizeOption[]	[10, 25, 50, 100, "all"]	Page-size choices for the footer menu. Default: `[10, 25, 50, 100, "all"]`.
groupBy	`string[]`	[]	Column fields for multi-level row grouping. Default: `[]`.
collapsedGroupKeys	`string[]`	[]	Collapsed group row keys. Default: `[]`.
groupColumnLabel	`string`	"Group"	Header for the auto-group column. Default: `"Group"`.
height	`string`	"360px"	Viewport block size for the virtualized body. Default: `"360px"`.
loading	`boolean`	false	Shows a loading overlay over the grid viewport. Default: `false`.
rowModel	TableRowModel	—	Row store; overrides rowData when set. `lazyRowModel()` auto-attaches `createRowIndexProvider`.
columnModel	TableColumnModel	—	Column store; overrides columns when set.
columnWidths	Record	{}	Per-column width overrides keyed by field. Default: `{}`.
columnResize	`boolean`	false	Drag resize handles on leaf headers. Default: `false`.
expandedRowIds	`string[]`	[]	Expanded data-row ids. Default: `[]`.
expandedRowRenderer	`null \| (row: TableRow, context: VuDataTableExpandedRowRendererContext) => unknown`	null	Detail panel renderer for expanded rows. Default: `null`.
expandedRowHeight	`number`	120	Estimated detail row block size before measurement. Default: `120`.
pivotConfig	`null \| { rowDimensions: readonly string[]; columnDimensions: readonly string[]; values: readonly TablePivotValueField[]; }`	null	Pivot field assignment. Default: `null`.
pivotEnabled	`boolean`	true	Renders the pivot layout instead of the flat grid. Default: `true`.
collapsedPivotKeys	`string[]`	[]	Collapsed pivot group row keys. Default: `[]`.
pivotRowSort	TablePivotRowSort	{}	Per row-dimension pivot sort state. Default: `{}`.
pivotColumnSortDirection	TablePivotColumnSortDirection	"asc"	Hierarchical sort for pivot column keys. Default: `"asc"`.
aggregation	`string`	"sum"	Default numeric aggregation for group subtotals. Default: `"sum"`.
aggregators	TableAggregatorRegistry	{}	Custom reducers referenced from column aggregation. Default: `{}`.
extraSidebarPanes	DataTableSidebarPaneDefinition[]	[]	Custom sidebar panes after built-in columns and filters. Default: `[]`.

Events

Event	Detail	Description
vu-quick-filter	VuDataTableQuickFilterDetail	Quick-filter text changes.
vu-advanced-filter	VuDataTableAdvancedFilterDetail	Advanced filter expression changes.
vu-sort	VuDataTableSortDetail	Sort rule changes.
vu-page	VuDataTablePageChangeDetail	Pagination changes.
vu-filter	VuDataTableFilterDetail	Column filter changes.
vu-selection	VuDataTableSelectionChangeDetail	Row selection changes.
vu-column-width	VuDataTableColumnWidthDetail	Column width overrides.
vu-group	VuDataTableGroupDetail	Group-by or collapse changes.
vu-pivot	VuDataTablePivotDetail	Pivot config changes.
vu-expanded-row	VuDataTableExpandedRowDetail	Expanded row id changes.
vu-column-visibility	VuDataTableColumnVisibilityDetail	Column visibility changes.
vu-column-reorder	VuDataTableColumnReorderDetail	Column tree reorder.
vu-row-reorder	VuDataTableRowReorderDetail	Row data reorder.
vu-data-provider-error	VuDataTableDataProviderErrorDetail	Fired when `dataProvider.fetch` (or a secondary hook) rejects.
vu-cell-selection	VuDataTableCellSelectionDetail	Active cell / range selection changed.
vu-cell-change	VuDataTableCellChangeDetail	A cell value was committed.

Slots

Slot	Description
header-actions	Extra controls inline at the end of the native header toolbar row.
footer-actions	Extra controls inline in the native pagination footer bar.
header	Extra banner above the grid chrome.
footer	Extra banner below the pagination bar.
empty	Empty-state content when the current view has no rows.
loading	Loading overlay content; replaces the default message.

CSS parts

Part	Description
header-chrome	Search and group-by controls above column headers.
header	Column header scroll region.
header-cell	One header cell.
search	Search field wrapper in the header chrome.
search-input	Native search text input.
search-clear	Clear-search button shown when a query is present.
advanced-filter	Advanced filter bar (`vu-advanced-filter`) in the header chrome.
advanced-filter-field	Advanced filter input field wrapper.
advanced-filter-input	Advanced filter expression input.
advanced-filter-clear	Clear advanced filter button.
advanced-filter-builder	Visual builder toggle button.
advanced-filter-suggestions	Type-ahead suggestions list.
advanced-filter-popover	Visual builder popover surface.
group-by	Group-by chip row in the header chrome.
group-by-chips	Active group-by chips container; drop header columns here.
group-by-chip	One grouped column chip; drag to reorder.
group-by-chip-remove	Remove button on a group-by chip.
header-actions	Inline action controls in the header toolbar row.
header-menu-trigger	Three-dot column menu button on leaf headers.
header-column-menu	Popover panel for column menu actions.
filter-row	Per-column floating filter row below headers.
filter-cell	One floating filter cell (input + advanced filter menu).
filter-button	Advanced filter icon button in a filter cell.
filter-panel	Advanced filter dropdown panel for one column.
footer	Pagination footer below the grid.
footer-info	Row range summary in the footer.
footer-pagination	Centered pagination bar region.
footer-controls	Page size menu and footer action controls (end-aligned).
footer-actions	Inline action controls in the pagination footer bar.
page-size	Rows-per-page dropdown.
sidebar	Right-edge sidebar shell (tab rail + panes).
sidebar-tabs	Vertical tab rail for sidebar panes.
sidebar-tab	One sidebar tab button.
sidebar-pane-columns	Columns pane (visibility checklist and pivot controls).
sidebar-pane-filters	Filters pane.
pivot-zone-available	Field palette in the columns pane pivot builder.
pivot-zone-row	Row dimension drop zone.
pivot-zone-column	Column dimension drop zone.
pivot-zone-value	Value dimension drop zone.
pivot-field	One draggable field in the palette.
pivot-chip	Assigned field chip in a drop zone.
pivot-mode-switch	Pivot on/off switch in the columns pane.
body	Virtualized body scrollport.
cell	One body cell.
header-banner	Extra `header` slot region above the grid chrome.
footer-banner	Extra `footer` slot region below pagination.
empty	Empty-state overlay when the view has no rows.
cell-editor	Native input shown while a cell is being edited.
filter-chips	Active column-filter chips in the header chrome.
filter-chip	One active filter chip.
filter-chip-remove	Clear button on an active filter chip.
bulk-bar	Selection summary bar.
bulk-bar-count	Selected row count label.
bulk-bar-clear	Clear-selection control.

Methods

Method	Description
getSnapshot	- Returns the current read-only view snapshot from the table engine.
applyState	- Applies a partial host + engine state patch.
exportCsv	- Serializes the current view to CSV.
copySelection	- Copies the selected cells (or current view) as TSV. Pass `{ nested: true }` for stacked headers.
commitCellValue	- Writes one cell and emits `vu-cell-change`.

Types

Name	Definition
number \| null	`null \| number`
TableAggregatorRegistry	`{ [x: string]: TableAggregatorFn; }`
TableColumnModel	`{ mode: "tree"; columns: TableColumnDef[]; } \| { mode: "range"; count: number; width: number; headerName?: string \| ((index: number) => string); type?: TableColumnType; sortable?: boolean; searchable?: boolean; pinnedLeft?: number; pinnedRight?: number; totalBarColumnKeys?: string[]; }`
TableDataProvider \| null	`null \| TableDataProvider`
TableDefaultColumnDef	{ type?: TableColumnType; visible?: boolean; searchable?: boolean; sortable?: boolean; width?: number; flex?: number; minWidth?: number; maxWidth?: number; pinned?: TablePin; dataAlign?: TableAlign; headerAlign?: TableAlign; aggregation?: TableAggregationKind; headerAggregation?: TableHeaderAggregationSpec; headerAggregationByLevel?: TableHeaderAggregationByLevel; cellRenderer?: TableColumnCellRenderer; editable?: boolean; valueGetter?: TableColumnValueGetter; valueFormatter?: TableColumnValueFormatter; }
TableEngineState["aggregation"]	`string`
TablePivotColumnSortDirection	`"asc" \| "desc"`
TablePivotConfig \| null	`null \| { rowDimensions: readonly string[]; columnDimensions: readonly string[]; values: readonly TablePivotValueField[]; }`
TablePivotRowSort	`{ [x: string]: TablePivotRowSortEntry; }`
TableRowModel	`{ mode: "client"; rows: TableRow[]; index?: TableRowIndexProvider; } \| { mode: "lazy"; rowCount: number; getRowId: (sourceRowIndex: number) => string; getValue: (sourceRowIndex: number, field: string) => unknown; index?: TableRowIndexProvider; }`
VuDataTableAdvancedFilterDetail	`{ query: string; snapshot: TableViewSnapshot; }`
VuDataTableCellChangeDetail	`{ rowId: string; field: string; value: unknown; row: TableRow \| null; snapshot: TableViewSnapshot; }`
VuDataTableCellSelectionDetail	`{ activeCell: VuDataTableCellCoord \| null; selectedCells: string[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnReorderDetail	`{ columns: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnVisibilityDetail	`{ columns: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTableColumnWidthDetail	`{ columnWidths: Record<string, number>; snapshot: TableViewSnapshot; }`
VuDataTableExpandedRowDetail	`{ expandedRowIds: string[]; snapshot: TableViewSnapshot; }`
VuDataTableExpandedRowRenderer \| null	`null \| (row: TableRow, context: VuDataTableExpandedRowRendererContext) => unknown`
VuDataTableFilterDetail	`{ columnFilters: Record<string, TableColumnFilter>; snapshot: TableViewSnapshot; }`
VuDataTableGroupDetail	`{ groupBy: string[]; collapsedGroupKeys: string[]; columns?: TableColumnDef[]; snapshot: TableViewSnapshot; }`
VuDataTablePageChangeDetail	`VuDataTablePageDetail & { snapshot: TableViewSnapshot; }`
VuDataTablePivotDetail	`{ pivotEnabled?: boolean; pivotConfig?: TablePivotConfig; collapsedPivotKeys?: string[]; pivotRowSort?: TablePivotRowSort; pivotColumnSortDirection?: TablePivotColumnSortDirection; snapshot: TableViewSnapshot; }`
VuDataTableQuickFilterDetail	`{ query: string; snapshot: TableViewSnapshot; }`
VuDataTableRowReorderDetail	`{ rowData: TableRow[]; snapshot: TableViewSnapshot; }`
VuDataTableRowSelection \| null	`null \| { mode: TableSelectionMode; selectAll?: boolean; selectedIds?: string[]; excludedIds?: string[]; }`
VuDataTableSelectionChangeDetail	`VuDataTableSelectionDetail & { snapshot: TableViewSnapshot; }`
VuDataTableSortDetail	`{ sort: TableSortRule[]; snapshot: TableViewSnapshot; }`
VuDataTableTone	`"subtle" \| "normal" \| "strong"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Data display

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Data display

Guides

Browse