Table instance (table.tableInstance)
useDataTable returns the standard TanStack table instance with one addition: a tableInstance object holding the table's resolved configuration and UI state. Components read from it instead of prop drilling; you can read and call into it too.
table.tableInstance.beginCreate() // open the create-row form
table.tableInstance.setDensity("compact")
const isLoading = table.tableInstance.isLoading
| Member | Type | Description |
|---|---|---|
localization | DataTableLocalization | — |
icons | DataTableIcons | — |
density | Density | — |
setDensity | React.Dispatch<React.SetStateAction<Density>> | — |
isFullscreen | boolean | — |
setIsFullscreen | React.Dispatch<React.SetStateAction<boolean>> | — |
showColumnFilters | boolean | — |
setShowColumnFilters | React.Dispatch<React.SetStateAction<boolean>> | — |
columnFilterModes | Record<string, FilterMode> | Active filter mode per column id. |
setColumnFilterMode | (columnId: string, mode: FilterMode) => void | Switch a column's filter mode (resets the value when it becomes invalid). |
globalFilterMode | GlobalFilterMode | — |
setGlobalFilterMode | (mode: GlobalFilterMode) => void | — |
enableGlobalFilter | boolean | — |
enableGlobalFilterModes | boolean | — |
enableAdvancedFilter | boolean | Compound AND/OR filter panel (independent of, and additive to, the per-column filters and global search). |
advancedFilter | AdvancedFilterGroup | — |
setAdvancedFilter | React.Dispatch<React.SetStateAction<AdvancedFilterGroup>> | — |
showAdvancedFilterPanel | boolean | — |
setShowAdvancedFilterPanel | React.Dispatch<React.SetStateAction<boolean>> | — |
isLoading | boolean | — |
isSaving | boolean | — |
showProgressBars | boolean | — |
showSkeletons | boolean | — |
showLoadingOverlay | boolean | — |
enableFacetedValues | boolean | — |
enableColumnActions | boolean | — |
enableColumnFilters | boolean | — |
enableColumnFilterModes | boolean | — |
enableFilterMatchHighlighting | boolean | — |
columnsWithCustomCell | ReadonlySet<string> | Column ids that supply a custom cell renderer (skipped by auto-highlight). |
enableColumnOrdering | boolean | — |
enableColumnPinning | boolean | — |
enableColumnResizing | boolean | — |
enableColumnAutosize | boolean | — |
autoSizeColumn | (columnId: string) => void | Resize a single column to fit its widest visible value (header + data). |
autoSizeAllColumns | () => void | Auto-size every resizable visible column. |
enableRowOrdering | boolean | — |
enableRowPinning | boolean | — |
enableRowNumbers | boolean | — |
rowNumberMode | "static" | "original" | — |
onRowOrderChange? | (activeRowId: string, overRowId: string) => void | Called on a row drag-and-drop reorder; the consumer reorders its data. |
enableGrouping | boolean | — |
enableExpanding | boolean | — |
enableStickyFooter | boolean | — |
renderDetailPanel? | (props: { row: Row<TData> table: DataTableInstance<TData> }) => React.ReactNode | — |
enableEditing | boolean | — |
editDisplayMode | EditDisplayMode | — |
createDisplayMode | CreateDisplayMode | — |
editingCell | EditingCell | null | — |
setEditingCell | React.Dispatch<React.SetStateAction<EditingCell | null>> | — |
editingRowId | string | null | — |
isCreating | boolean | — |
rowDraft | Record<string, unknown> | Draft values for the row/modal editor + create form, keyed by column id. |
setRowDraftValue | (columnId: string, value: unknown) => void | — |
beginRowEdit | (row: Row<TData>) => void | Enter row/modal editing for a row, seeding the draft from its values. |
beginCreate | () => void | Open the create form, seeding the draft from `createRowDefaults`. |
cancelEdit | () => void | Exit any editing/creating state, discarding the draft. |
enableClickToCopy | boolean | — |
onEditCellSave? | (props: { row: Row<TData> column: Column<TData, unknown> value: unknown table: DataTableInstance<TData> }) => void | — |
onSaveRow? | (props: { row: Row<TData> values: Record<string, unknown> table: DataTableInstance<TData> exit: () => void }) => void | — |
onCreateRow? | (props: { values: Record<string, unknown> table: DataTableInstance<TData> exit: () => void }) => void | — |
renderRowActions? | (props: { row: Row<TData> table: DataTableInstance<TData> }) => React.ReactNode | — |
renderCellActionMenuItems? | (props: { cell: Cell<TData, unknown> row: Row<TData> table: DataTableInstance<TData> }) => React.ReactNode | — |
renderRowActionMenuItems? | (props: { row: Row<TData> table: DataTableInstance<TData> }) => React.ReactNode | — |
renderColumnActionsMenuItems? | (props: { column: Column<TData, unknown> table: DataTableInstance<TData> }) => React.ReactNode | — |
renderColumnFilterModeMenuItems? | (props: { column: Column<TData, unknown> modes: FilterMode[] currentMode: FilterMode onSelect: (mode: FilterMode) => void table: DataTableInstance<TData> }) => React.ReactNode | — |
renderGlobalFilterModeMenuItems? | (props: { modes: GlobalFilterMode[] currentMode: GlobalFilterMode onSelect: (mode: GlobalFilterMode) => void table: DataTableInstance<TData> }) => React.ReactNode | — |
onRowClick? | (props: RowEvent<TData>) => void | — |
onRowDoubleClick? | (props: RowEvent<TData>) => void | — |
onCellClick? | (props: CellEvent<TData>) => void | — |
onCellDoubleClick? | (props: CellEvent<TData>) => void | — |
refs | DataTableRefs | DOM refs to the table's structural elements (populated after mount). |
enableRowVirtualization | boolean | — |
enableColumnVirtualization | boolean | — |
estimateRowHeight | number | — |
virtualOverscan | number | — |
rowHeight? | number | Flat height (px) applied to every row. |
getRowHeight? | (row: Row<TData>) => number | "auto" | null | Per-row height: a px number, `"auto"` (wrap + grow), or `null` for default. |
rowVirtualizerOptions? | RowVirtualizerOptions<TData> | — |
columnVirtualizerOptions? | ColumnVirtualizerOptions<TData> | — |
rowVirtualizerInstanceRef? | React.RefObject<DataTableRowVirtualizer | null> | — |
columnVirtualizerInstanceRef? | React.RefObject<DataTableColumnVirtualizer | null> | — |
enableStickyHeader | boolean | — |
enablePagination | boolean | — |
enableInfiniteScroll | boolean | Load more rows as the user scrolls near the bottom (auto-hides the pager). |
onLoadMore? | () => void | Called when the sentinel nears the viewport and more rows can be loaded. |
hasNextPage | boolean | Consumer flag: more rows exist to load. |
isFetchingNextPage | boolean | Consumer flag: a load is currently in flight. |
infiniteScrollThreshold | number | Distance (px) from the bottom at which to prefetch. |
positionPagination | "top" | "bottom" | "both" | "none" | — |
paginationDisplayMode | PaginationDisplayMode | — |
columnFilterDisplayMode | ColumnFilterDisplayMode | — |
positionGlobalFilter | "left" | "right" | "none" | — |
positionToolbarAlertBanner | "top" | "bottom" | "none" | — |
positionToolbarDropZone | "top" | "bottom" | "both" | "none" | — |
enableRowSelection | boolean | — |
enableTopToolbar | boolean | — |
enableBottomToolbar | boolean | — |
enableDensityToggle | boolean | — |
enableFullscreenToggle | boolean | — |
enableToolbarInternalActions | boolean | — |
enableKeyboardNavigation | boolean | — |
title? | React.ReactNode | — |
renderToolbarActions? | (props: DataTableSlotProps<TData>) => React.ReactNode | — |
renderTopToolbar? | (props: DataTableSlotProps<TData>) => React.ReactNode | — |
renderBottomToolbar? | (props: DataTableSlotProps<TData>) => React.ReactNode | — |
renderToolbarInternalActions? | ( props: DataTableSlotProps<TData> ) => React.ReactNode | — |
renderBottomToolbarCustomActions? | ( props: DataTableSlotProps<TData> ) => React.ReactNode | — |
renderCaption? | (props: DataTableSlotProps<TData>) => React.ReactNode | — |
renderEmpty? | (props: DataTableSlotProps<TData>) => React.ReactNode | — |
Everything else is TanStack
All standard instance methods — getState, getRowModel, getColumn,
setPageIndex, getFilteredRowModel, resetSorting, … — are available
directly on table as usual.