structyl

DataTable API

View component

The full prop reference for the DataTable component. A full-featured data grid with a rich column definition API, tree data, copy/paste, density, bulk actions, row action menus, custom slots, search, nested filters, virtualization, pinning, grouping, aggregation and more.

Import

tsx
import { DataTable } from '@structyl/styled';

Props

DataTable

Full-featured data grid component with sorting, filtering, pagination, virtualization, row/column selection, inline editing, export, and more

PropTypeDefault
columns#DataTableColumnDef<TData, TValue>[]

Column definitions array

data#TData[]

Array of row data

virtual#boolean | { estimatedRowHeight?: number; overscan?: number }

Enable row virtualization with optional height and overscan config

virtualColumns#boolean | { estimatedColumnWidth?: number; overscan?: number }

Enable column virtualization for wide grids

enableSorting#boolean

Enable column sorting

true
enableFiltering#boolean

Enable column filtering

false
enableAdvancedFiltering#boolean

Enable advanced filter groups with AND/OR logic

false
enableGlobalSearch#boolean

Enable global search across all columns

false
enableRowSelection#boolean | 'single'

Enable row selection (multi-select or single)

false
enableColumnSelection#boolean

Enable column selection

false
enablePagination#boolean

Enable pagination

false
enableExpanding#boolean

Enable row expanding/detail panels

false
enableGrouping#boolean

Enable row grouping

false
enableColumnResizing#boolean

Enable column width resizing

false
enableColumnReordering#boolean

Enable drag-to-reorder columns

false
enableRowReordering#boolean

Enable drag-to-reorder rows

false
enableColumnPinning#boolean

Enable pinning columns left/right

false
enableRowPinning#boolean

Enable pinning rows top/bottom

false
enableColumnConfiguration#boolean

Enable column visibility/order configuration UI

false
pageSize#number

Initial page size for pagination

10
loading#boolean

Show loading state covering the entire table

loadingMore#boolean

Show loading indicator at bottom for infinite scroll

loadingVariant#'text' | 'skeleton' | 'spinner'

Loading overlay variant

'text'
skeletonRows#number

Number of skeleton rows to show

5
error#React.ReactNode

Error message overlay content

emptyState#React.ReactNode

Custom empty state when data is empty

className#string

Root wrapper CSS class

tableClassName#string

Table element CSS class

toolbar#React.ReactNode | ((table: Table<TData>) => React.ReactNode)

Custom toolbar content or render function

toolbarStart#React.ReactNode

Content for left side of toolbar

toolbarEnd#React.ReactNode

Content for right side of toolbar

globalFilter#string

Controlled global search value

defaultGlobalFilter#string

Initial global filter value

onGlobalFilterChange#(value: string) => void

Callback when global search value changes

globalFilterPlaceholder#string

Placeholder text for global search input

advancedFilter#DataTableFilterGroup

Controlled advanced filter configuration

defaultAdvancedFilter#DataTableFilterGroup

Initial advanced filter configuration

onAdvancedFilterChange#(filter: DataTableFilterGroup | undefined) => void

Callback when advanced filter changes

getAdvancedFilterValue#(row: TData, columnId: string) => unknown

Function to extract filter-able value from row

rowActions#(row: Row<TData>) => React.ReactNode

Render custom actions for each row

inlineCreateRow#DataTableInlineCreate

Configuration for inline row creation

aggregations#Record<string, DataTableAggregation>

Column aggregation functions (sum, avg, min, max, count, or custom)

showColumnTotals#boolean

Show totals row for aggregated columns

rowTotals#boolean | DataTableRowTotals<TData>

Configuration for row-level totals

rowPinning#DataTableRowPinningState

Controlled row pinning state

defaultRowPinning#DataTableRowPinningState

Initial row pinning state

onRowPinningChange#(state: DataTableRowPinningState) => void

Callback when row pinning changes

columnSelection#string[]

Controlled selected column IDs

defaultColumnSelection#string[]

Initial selected column IDs

onColumnSelectionChange#(columnIds: string[]) => void

Callback when column selection changes

renderDetailPanel#(row: Row<TData>) => React.ReactNode

Render detail/expansion panel for a row

getCellColSpan#(cell: Cell<TData, unknown>, row: Row<TData>) => number | undefined

Get column span for a cell

getCellRowSpan#(cell: Cell<TData, unknown>, row: Row<TData>) => number | undefined

Get row span for a cell

getRowClassName#(row: Row<TData>) => string | undefined

Get CSS class for a row

getRowStyle#(row: Row<TData>) => React.CSSProperties | undefined

Get inline styles for a row

getRowHeight#(row: Row<TData>) => number | undefined

Get height of a row for virtualization

height#number | string

Fixed height of table container

maxHeight#number | string

Maximum height of table container

fullHeight#boolean

Fill all available height

autoHeight#boolean

Auto-size height to content

onLoadMore#() => void

Callback for infinite scroll load more

hasMore#boolean

Whether more data is available to load

loadMoreThreshold#number

Pixels from bottom to trigger loadMore

96
onRowOrderChange#(rows: TData[], rowIds: string[]) => void

Callback when row order changes via drag

onColumnOrderChange#(columnIds: string[]) => void

Callback when column order changes

localeText#Partial<DataTableLocaleText>

Override default locale strings

serverSide#{ state: ServerDataState; onStateChange: (state: ServerDataState) => void; rowCount: number }

Server-side data adapter config (disables internal sort/filter/pagination)

getRowId#(row: TData, index: number) => string

Get unique ID for a row

getSubRows#(row: TData) => TData[] | undefined

Get sub-rows for tree/expandable data

onRowSelectionChange#(state: RowSelectionState) => void

Callback when row selection changes

onSortingChange#(state: SortingState) => void

Callback when sorting changes

tableRef#React.MutableRefObject<Table<TData> | null>

Ref to underlying TanStack Table instance

slots#DataTableSlots<TData>

Replace built-in sub-components (Toolbar, Pagination, ColumnMenu, Filter, Search, etc)

pageSizeOptions#number[]

Options for rows-per-page selector

[10, 25, 50, 100]
showTotalRows#boolean

Show total row count in pagination

true
noRowsOverlay#React.ReactNode

Custom overlay when dataset is empty

noResultsOverlay#React.ReactNode

Custom overlay when filters produce no results

bulkActions#DataTableBulkAction<TData>[]

Actions shown in bulk-action bar for selected rows

rowActionMenu#DataTableRowActionItem<TData>[]

Row action items in 3-dot dropdown menu

rowActionButtons#DataTableRowActionItem<TData>[]

Row action items as inline buttons

enableRowCopy#boolean

Ctrl+C copies single row (in addition to multi-row)

false
enableColumnCopy#boolean

Add 'Copy column' to column context menu

false
density#'compact' | 'standard' | 'comfortable'

Controlled row/cell density

defaultDensity#'compact' | 'standard' | 'comfortable'

Initial density setting

'standard'
enableDensityToggle#boolean

Show density toggle in toolbar

false
onDensityChange#(density: DataTableDensity) => void

Callback when density changes

treeData#boolean

Enable tree data view (use with getSubRows)

false
enableCopyPaste#boolean

Enable Ctrl+C to copy selected rows as TSV

false
onCopy#(rows: Row<TData>[], text: string) => void

Callback when rows are copied

toolbarActions#DataTableToolbarAction<TData>[]

Custom toolbar action buttons

onRefresh#() => void

Callback for Refresh toolbar action

getCellClassName#(cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined

Get CSS class for a cell

enableRowNumbers#boolean

Show fixed row-number column (1, 2, 3…)

false
striped#boolean

Alternate row background color

false
enableCellTooltip#boolean

Show truncated cell content as tooltip

false
stateKey#string

localStorage key for persisting state (column order/visibility/sizing, sort, filters, pagination)

enableStatusBar#boolean

Show status bar with row and selection counts

false
fullscreen#boolean

Controlled fullscreen state

onFullscreenChange#(fullscreen: boolean) => void

Callback when fullscreen is toggled

enableFullscreen#boolean

Show fullscreen toggle button in toolbar

false
loadingRowIds#string[]

Row IDs showing loading spinner (async row action)

onPrint#() => void

Callback before window.print()

quickFilterColumns#string[]

Column IDs showing quick-filter input below header

onCellContextMenu#(cell: Cell<TData, unknown>, row: Row<TData>, event: React.MouseEvent) => void

Callback on right-click context menu on cell

onRowContextMenu#(row: Row<TData>, event: React.MouseEvent) => void

Callback on right-click context menu on row

enableColumnAutoSize#boolean

Auto-size column to content on double-click resize handle

false
lockedColumns#string[]

Column IDs that cannot be hidden, reordered, or resized

onLockedColumnsChange#(columnIds: string[]) => void

Callback when column lock state changes

mobileBreakpoint#'sm' | 'md' | 'lg'

Tailwind breakpoint below which rows render as cards

enableExport#boolean | { csv?: boolean; json?: boolean; selectedCsv?: boolean; xlsx?: boolean }

Enable export dropdown (CSV, JSON, XLSX)

false
enableConditionalFormatting#boolean

Enable conditional formatting drawer in toolbar

false
conditionalFormattingRules#DataTableConditionalRule[]

Controlled conditional formatting rules

onConditionalFormattingRulesChange#(rules: DataTableConditionalRule[]) => void

Callback when conditional formatting rules change

getRowStatus#(row: Row<TData>) => 'success' | 'warning' | 'error' | 'info' | undefined

Return status for colored left border indicator

rowHeight#number | ((row: Row<TData>, index: number) => number)

Fixed or computed row height

enableFilterChips#boolean

Show active column-filter chips above table

false
enablePaste#boolean

Enable Ctrl+V paste of TSV data into editable cells

false
dir#'ltr' | 'rtl'

Text direction for RTL support

enableKeyboardShortcuts#boolean

Show keyboard shortcuts modal when ? is pressed

false
editMode#'click' | 'dblclick'

Interaction mode to start inline cell editing

onCellEditCommit#(params: { field: string; row: TData; oldValue: unknown; newValue: unknown }) => void

Callback after cell edit is committed via valueSetter

enableUndoRedo#boolean

Enable Ctrl+Z / Ctrl+Y undo-redo for inline edits

false
dirtyRows#Set<string>

Controlled set of row IDs with unsaved changes

onDirtyRowsChange#(dirtyRows: Set<string>) => void

Callback when dirty row set changes

enableCellSelection#boolean

Enable cell-range selection (disables row-selection click)

false
onCellSelectionChange#(selection: DataTableCellSelection | null) => void

Callback when cell selection changes

enableToolPanel#boolean

Show collapsible right-side tool panel

false
defaultToolPanelTab#'columns' | 'filters' | 'stats'

Default tab in tool panel

'columns'
enableLiveData#boolean

Enable real-time cell flash animation on data changes

false
liveDataKey#keyof TData

Field used as row identity for live-data diffing (default: 'id')

onLiveDataUpdate#(updatedRows: TData[]) => void

Callback when live-data diff detects updated rows

loadDetailPanel#(row: Row<TData>) => Promise<React.ReactNode>

Async loader for detail panel content (cached after first load)

detailPanelCacheSize#number

Maximum cached detail panels (LRU)

20
enablePrintStyles#boolean

Inject @media print styles that hide toolbar/pagination

false
enablePivot#boolean

Enable pivot mode with toolbar button

false
pivotConfig#DataTablePivotConfig

Controlled pivot configuration

onPivotConfigChange#(config: DataTablePivotConfig) => void

Callback when pivot config changes

enableSavedViews#boolean

Enable saved views toolbar button

false
savedViews#DataTableSavedView[]

Controlled saved views list

onSavedViewsChange#(views: DataTableSavedView[]) => void

Callback when saved views list changes

ariaLabel#string

Accessible label for grid root element

ariaLabelledBy#string

ID of element that labels the grid

enableHeaderStats#boolean

Show aggregated stats row pinned below column headers

false
headerStatsConfig#Partial<Record<string, 'count' | 'sum' | 'avg' | 'min' | 'max' | 'nullCount' | 'unique'>>

Per-column stat type override (defaults: sum for number, count for others)

enableValidation#boolean

Enable display-mode cell validation using displayValidate

false
onValidationChange#(errors: DataTableValidationError[]) => void

Callback when validation errors change

locale#string

Default locale for column formatting (e.g. 'en-US', 'de-DE')

Source code

If you didn't find what you need here, read the component implementation .

structyl — Accessible React Component Library