DataTable API
View componentThe 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
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
| Prop | Type | Default |
|---|---|---|
| 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# | booleanEnable column sorting | true |
| enableFiltering# | booleanEnable column filtering | false |
| enableAdvancedFiltering# | booleanEnable advanced filter groups with AND/OR logic | false |
| enableGlobalSearch# | booleanEnable global search across all columns | false |
| enableRowSelection# | boolean | 'single'Enable row selection (multi-select or single) | false |
| enableColumnSelection# | booleanEnable column selection | false |
| enablePagination# | booleanEnable pagination | false |
| enableExpanding# | booleanEnable row expanding/detail panels | false |
| enableGrouping# | booleanEnable row grouping | false |
| enableColumnResizing# | booleanEnable column width resizing | false |
| enableColumnReordering# | booleanEnable drag-to-reorder columns | false |
| enableRowReordering# | booleanEnable drag-to-reorder rows | false |
| enableColumnPinning# | booleanEnable pinning columns left/right | false |
| enableRowPinning# | booleanEnable pinning rows top/bottom | false |
| enableColumnConfiguration# | booleanEnable column visibility/order configuration UI | false |
| pageSize# | numberInitial page size for pagination | 10 |
| loading# | booleanShow loading state covering the entire table | — |
| loadingMore# | booleanShow loading indicator at bottom for infinite scroll | — |
| loadingVariant# | 'text' | 'skeleton' | 'spinner'Loading overlay variant | 'text' |
| skeletonRows# | numberNumber of skeleton rows to show | 5 |
| error# | React.ReactNodeError message overlay content | — |
| emptyState# | React.ReactNodeCustom empty state when data is empty | — |
| className# | stringRoot wrapper CSS class | — |
| tableClassName# | stringTable element CSS class | — |
| toolbar# | React.ReactNode | ((table: Table<TData>) => React.ReactNode)Custom toolbar content or render function | — |
| toolbarStart# | React.ReactNodeContent for left side of toolbar | — |
| toolbarEnd# | React.ReactNodeContent for right side of toolbar | — |
| globalFilter# | stringControlled global search value | — |
| defaultGlobalFilter# | stringInitial global filter value | — |
| onGlobalFilterChange# | (value: string) => voidCallback when global search value changes | — |
| globalFilterPlaceholder# | stringPlaceholder text for global search input | — |
| advancedFilter# | DataTableFilterGroupControlled advanced filter configuration | — |
| defaultAdvancedFilter# | DataTableFilterGroupInitial advanced filter configuration | — |
| onAdvancedFilterChange# | (filter: DataTableFilterGroup | undefined) => voidCallback when advanced filter changes | — |
| getAdvancedFilterValue# | (row: TData, columnId: string) => unknownFunction to extract filter-able value from row | — |
| rowActions# | (row: Row<TData>) => React.ReactNodeRender custom actions for each row | — |
| inlineCreateRow# | DataTableInlineCreateConfiguration for inline row creation | — |
| aggregations# | Record<string, DataTableAggregation>Column aggregation functions (sum, avg, min, max, count, or custom) | — |
| showColumnTotals# | booleanShow totals row for aggregated columns | — |
| rowTotals# | boolean | DataTableRowTotals<TData>Configuration for row-level totals | — |
| rowPinning# | DataTableRowPinningStateControlled row pinning state | — |
| defaultRowPinning# | DataTableRowPinningStateInitial row pinning state | — |
| onRowPinningChange# | (state: DataTableRowPinningState) => voidCallback when row pinning changes | — |
| columnSelection# | string[]Controlled selected column IDs | — |
| defaultColumnSelection# | string[]Initial selected column IDs | — |
| onColumnSelectionChange# | (columnIds: string[]) => voidCallback when column selection changes | — |
| renderDetailPanel# | (row: Row<TData>) => React.ReactNodeRender detail/expansion panel for a row | — |
| getCellColSpan# | (cell: Cell<TData, unknown>, row: Row<TData>) => number | undefinedGet column span for a cell | — |
| getCellRowSpan# | (cell: Cell<TData, unknown>, row: Row<TData>) => number | undefinedGet row span for a cell | — |
| getRowClassName# | (row: Row<TData>) => string | undefinedGet CSS class for a row | — |
| getRowStyle# | (row: Row<TData>) => React.CSSProperties | undefinedGet inline styles for a row | — |
| getRowHeight# | (row: Row<TData>) => number | undefinedGet height of a row for virtualization | — |
| height# | number | stringFixed height of table container | — |
| maxHeight# | number | stringMaximum height of table container | — |
| fullHeight# | booleanFill all available height | — |
| autoHeight# | booleanAuto-size height to content | — |
| onLoadMore# | () => voidCallback for infinite scroll load more | — |
| hasMore# | booleanWhether more data is available to load | — |
| loadMoreThreshold# | numberPixels from bottom to trigger loadMore | 96 |
| onRowOrderChange# | (rows: TData[], rowIds: string[]) => voidCallback when row order changes via drag | — |
| onColumnOrderChange# | (columnIds: string[]) => voidCallback 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) => stringGet unique ID for a row | — |
| getSubRows# | (row: TData) => TData[] | undefinedGet sub-rows for tree/expandable data | — |
| onRowSelectionChange# | (state: RowSelectionState) => voidCallback when row selection changes | — |
| onSortingChange# | (state: SortingState) => voidCallback 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# | booleanShow total row count in pagination | true |
| noRowsOverlay# | React.ReactNodeCustom overlay when dataset is empty | — |
| noResultsOverlay# | React.ReactNodeCustom 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# | booleanCtrl+C copies single row (in addition to multi-row) | false |
| enableColumnCopy# | booleanAdd 'Copy column' to column context menu | false |
| density# | 'compact' | 'standard' | 'comfortable'Controlled row/cell density | — |
| defaultDensity# | 'compact' | 'standard' | 'comfortable'Initial density setting | 'standard' |
| enableDensityToggle# | booleanShow density toggle in toolbar | false |
| onDensityChange# | (density: DataTableDensity) => voidCallback when density changes | — |
| treeData# | booleanEnable tree data view (use with getSubRows) | false |
| enableCopyPaste# | booleanEnable Ctrl+C to copy selected rows as TSV | false |
| onCopy# | (rows: Row<TData>[], text: string) => voidCallback when rows are copied | — |
| toolbarActions# | DataTableToolbarAction<TData>[]Custom toolbar action buttons | — |
| onRefresh# | () => voidCallback for Refresh toolbar action | — |
| getCellClassName# | (cell: Cell<TData, unknown>, row: Row<TData>) => string | undefinedGet CSS class for a cell | — |
| enableRowNumbers# | booleanShow fixed row-number column (1, 2, 3…) | false |
| striped# | booleanAlternate row background color | false |
| enableCellTooltip# | booleanShow truncated cell content as tooltip | false |
| stateKey# | stringlocalStorage key for persisting state (column order/visibility/sizing, sort, filters, pagination) | — |
| enableStatusBar# | booleanShow status bar with row and selection counts | false |
| fullscreen# | booleanControlled fullscreen state | — |
| onFullscreenChange# | (fullscreen: boolean) => voidCallback when fullscreen is toggled | — |
| enableFullscreen# | booleanShow fullscreen toggle button in toolbar | false |
| loadingRowIds# | string[]Row IDs showing loading spinner (async row action) | — |
| onPrint# | () => voidCallback before window.print() | — |
| quickFilterColumns# | string[]Column IDs showing quick-filter input below header | — |
| onCellContextMenu# | (cell: Cell<TData, unknown>, row: Row<TData>, event: React.MouseEvent) => voidCallback on right-click context menu on cell | — |
| onRowContextMenu# | (row: Row<TData>, event: React.MouseEvent) => voidCallback on right-click context menu on row | — |
| enableColumnAutoSize# | booleanAuto-size column to content on double-click resize handle | false |
| lockedColumns# | string[]Column IDs that cannot be hidden, reordered, or resized | — |
| onLockedColumnsChange# | (columnIds: string[]) => voidCallback 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# | booleanEnable conditional formatting drawer in toolbar | false |
| conditionalFormattingRules# | DataTableConditionalRule[]Controlled conditional formatting rules | — |
| onConditionalFormattingRulesChange# | (rules: DataTableConditionalRule[]) => voidCallback when conditional formatting rules change | — |
| getRowStatus# | (row: Row<TData>) => 'success' | 'warning' | 'error' | 'info' | undefinedReturn status for colored left border indicator | — |
| rowHeight# | number | ((row: Row<TData>, index: number) => number)Fixed or computed row height | — |
| enableFilterChips# | booleanShow active column-filter chips above table | false |
| enablePaste# | booleanEnable Ctrl+V paste of TSV data into editable cells | false |
| dir# | 'ltr' | 'rtl'Text direction for RTL support | — |
| enableKeyboardShortcuts# | booleanShow 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 }) => voidCallback after cell edit is committed via valueSetter | — |
| enableUndoRedo# | booleanEnable 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>) => voidCallback when dirty row set changes | — |
| enableCellSelection# | booleanEnable cell-range selection (disables row-selection click) | false |
| onCellSelectionChange# | (selection: DataTableCellSelection | null) => voidCallback when cell selection changes | — |
| enableToolPanel# | booleanShow collapsible right-side tool panel | false |
| defaultToolPanelTab# | 'columns' | 'filters' | 'stats'Default tab in tool panel | 'columns' |
| enableLiveData# | booleanEnable real-time cell flash animation on data changes | false |
| liveDataKey# | keyof TDataField used as row identity for live-data diffing (default: 'id') | — |
| onLiveDataUpdate# | (updatedRows: TData[]) => voidCallback 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# | numberMaximum cached detail panels (LRU) | 20 |
| enablePrintStyles# | booleanInject @media print styles that hide toolbar/pagination | false |
| enablePivot# | booleanEnable pivot mode with toolbar button | false |
| pivotConfig# | DataTablePivotConfigControlled pivot configuration | — |
| onPivotConfigChange# | (config: DataTablePivotConfig) => voidCallback when pivot config changes | — |
| enableSavedViews# | booleanEnable saved views toolbar button | false |
| savedViews# | DataTableSavedView[]Controlled saved views list | — |
| onSavedViewsChange# | (views: DataTableSavedView[]) => voidCallback when saved views list changes | — |
| ariaLabel# | stringAccessible label for grid root element | — |
| ariaLabelledBy# | stringID of element that labels the grid | — |
| enableHeaderStats# | booleanShow 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# | booleanEnable display-mode cell validation using displayValidate | false |
| onValidationChange# | (errors: DataTableValidationError[]) => voidCallback when validation errors change | — |
| locale# | stringDefault 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 .