API Reference

DataTable

The main table component that wraps Tanstack Table.

Prop	Type	Default	Description
`columns`	`ColumnDef<TData>[]`	-	Column definitions (required)
`data`	`TData[]`	-	Data array (required)
`getRowId`	`(row: TData) => string`	-	Custom row ID accessor
`enableRowSelection`	`boolean \| ((row) => boolean)`	`false`	Enable checkbox selection
`enableSorting`	`boolean`	`false`	Enable column sorting
`manualSorting`	`boolean`	`false`	Skip client-side sorting (for server-side sorting)
`enableFiltering`	`boolean`	`false`	Enable column filtering
`manualFiltering`	`boolean`	`false`	Skip client-side filtering (for server-side filtering)
`enableGlobalFilter`	`boolean`	`false`	Enable global search
`pagination`	`PaginationConfig`	-	Pagination configuration
`virtualization`	`VirtualizationConfig`	-	Virtualization configuration
`sorting`	`SortingState`	-	Controlled sorting state
`onSortingChange`	`(state) => void`	-	Sorting change callback
`defaultSorting`	`SortingState`	`[]`	Default sorting for uncontrolled mode
`rowSelection`	`RowSelectionState`	-	Controlled selection state
`onRowSelectionChange`	`(state) => void`	-	Selection change callback
`defaultRowSelection`	`RowSelectionState`	`{}`	Default selection for uncontrolled mode
`columnFilters`	`ColumnFiltersState`	-	Controlled column filters state
`onColumnFiltersChange`	`(filters) => void`	-	Column filters change callback
`globalFilter`	`string`	-	Controlled global filter
`onGlobalFilterChange`	`(value) => void`	-	Global filter change callback
`onRowClick`	`(row, event) => void`	-	Handler for row clicks (enables clickable mode)
`clickableRowClassName`	`string`	`hover:bg-accent-a3`	Custom hover class for clickable rows
`selectedRowClassName`	`string`	-	Custom class for selected rows (overrides default `bg-accent-a3`)
`cellOverflow`	`"grow" \| "wrap" \| "truncate"`	`"grow"`	How cells handle overflow. Can be overridden per-column via `meta.cellOverflow`
`disableColumnResizing`	`boolean`	`false`	Disable column width resizing (enabled by default)
`resizeHandleVisibility`	`"always" \| "onHeaderHover"`	`"onHeaderHover"`	When resize handles are visible: always or only on header hover
`columnResizeMode`	`"onChange" \| "onEnd"`	`"onChange"`	When to update sizes: during drag or after
`columnSizing`	`ColumnSizingState`	-	Controlled column sizing state
`onColumnSizingChange`	`(sizing) => void`	-	Callback when column sizes change
`defaultColumnSizing`	`ColumnSizingState`	`{}`	Initial sizing for uncontrolled mode
`columnPinning`	`ColumnPinningState`	-	Controlled column pinning state `{ left?: string[], right?: string[] }`
`onColumnPinningChange`	`(pinning) => void`	-	Callback when column pinning changes
`defaultColumnPinning`	`ColumnPinningState`	`{ left: [], right: [] }`	Initial pinning for uncontrolled mode
`autoPinSelection`	`boolean`	`false`	Auto-pin selection column when rows are selected
`density`	`"compact" \| "normal" \| "comfortable"`	`"normal"`	Row height density for headers and cells
`className`	`string`	-	Additional CSS classes

DataTablePagination

Pagination controls that integrate with the DataTable context.

Prop	Type	Default	Description
`pageSizeOptions`	`number[]`	`[10, 25, 50, 100]`	Page size options
`siblingCount`	`number`	`2`	Number of sibling pages to show on each side
`className`	`string`	-	Additional CSS classes

DataTableColumnHeader

Sortable column header button with sort indicators.

Prop	Type	Default	Description
`column`	`Column<TData>`	-	Tanstack column instance (required)
`title`	`string`	-	Header title (required)
`className`	`string`	-	Additional CSS classes

DataTableColumnVisibility

Dropdown menu for toggling column visibility.

Prop	Type	Default	Description
`label`	`string`	-	Label shown at top of dropdown and as screen reader text (required)
`icon`	`ReactNode`	Settings gear	Custom icon for the default trigger button
`trigger`	`ReactNode`	-	Custom trigger element (overrides default icon button)
`align`	`"start" \| "center" \| "end"`	`"end"`	Dropdown alignment relative to trigger
`contentClassName`	`string`	-	Additional CSS classes for dropdown content

DataTableToolbar

Container for filters and actions above the table.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Toolbar content
`className`	`string`	-	Additional CSS classes

DataTableFooter

Container for custom content between the table and pagination.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Footer content
`className`	`string`	-	Additional CSS classes

DataTableHeader

Table header component with support for sticky positioning and custom background.

Prop	Type	Default	Description
`sticky`	`boolean`	`false`	Makes header sticky during scroll (auto-enabled with virtualization)
`stickyBackground`	`string`	`"var(--volt-gray-2)"`	Background color for sticky header and pinned header cells
`className`	`string`	-	Additional CSS classes

DataTableBody

Table body component with support for loading, error, and empty states.

Prop	Type	Default	Description
`isLoading`	`boolean`	`false`	Whether to show loading state
`loadingState`	`ReactNode`	-	Content to show when loading (typically `<DataTableLoading />`)
`isError`	`boolean`	`false`	Whether to show error state
`errorState`	`ReactNode`	-	Content to show on error (typically `<DataTableError />`)
`emptyState`	`ReactNode`	`"No results."`	Content to show when data is empty
`className`	`string`	-	Additional CSS classes

DataTableLoading

Loading state display component for use with DataTableBody.

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom loading content (overrides default spinner)
`className`	`string`	-	Additional CSS classes

// Default loading with spinner
<DataTableLoading />

// Custom loading content (i18n)
<DataTableLoading>
  <Spinner size="lg" />
  <p>{t('loading')}</p>
</DataTableLoading>

DataTableError

Error state display component with optional retry button.

Prop	Type	Default	Description
`title`	`string`	`"Error loading data"`	Error title text
`description`	`ReactNode`	-	Error description or message
`retryLabel`	`string`	`"Retry"`	Retry button text
`onRetry`	`() => void`	-	Retry callback (shows button when provided)
`children`	`ReactNode`	-	Custom error content (overrides default)
`className`	`string`	-	Additional CSS classes

// Default error with retry
<DataTableError
  title="Failed to load data"
  description="Please try again."
  onRetry={() => refetch()}
/>

// Custom error content (i18n)
<DataTableError>
  <AlertIcon />
  <p>{t('error.title')}</p>
  <Button onClick={refetch}>{t('retry')}</Button>
</DataTableError>

useDataTable

Hook to access the Tanstack Table instance from child components.

function TableInfo() {
  const { table } = useDataTable()

  return (
    <span>
      {table.getFilteredRowModel().rows.length} rows
    </span>
  )
}

getSelectedRowData

Utility function to extract selected row data from selection state.

import { getSelectedRowData } from "@epilot/volt-ui"

const selectedData = useMemo(
  () => getSelectedRowData(rowSelection, data),
  [rowSelection, data]
)

Parameter	Type	Default	Description
`rowSelection`	`RowSelectionState`	-	The selection state from DataTable
`data`	`TData[]`	-	Your data array
`getRowId`	`(row: TData) => string`	`row.id`	Optional ID accessor

Returns: TData[] - Array of selected data items

Pagination Configuration

type PaginationConfig = {
  pageIndex?: number         // Controlled page index (0-indexed)
  pageSize?: number          // Default: 10
  pageSizeOptions?: number[] // Default: [10, 25, 50, 100]
  totalItems?: number        // Server-side pagination total
  pageCount?: number         // Server-side pagination page count
  onPaginationChange?: (state: PaginationState) => void
}

Virtualization Configuration

type VirtualizationConfig = {
  enabled: boolean
  estimateRowHeight?: number // Default: 48
  overscan?: number          // Default: 10
  containerHeight?: number   // Default: 600
}

API Reference

On this page