Skip to main content

DataTable

Storybook​

Go to Story

DataTableProps​

Defined in: src/components/DataTable/DataTable.tsx:34

Make some fields in the object partial.

Example​

PartialSome<{ a: string, b: string, c: string }, 'a'> => { a?: string, b: string, c: string }

Extends​

Type Parameters​

Type Parameter
Data

Properties​

PropertyTypeDescriptionInherited fromDefined in
error?boolean | FullErrorPropsControls the display of the error state. Can be a boolean to simply show/hide the error state or an object with additional error state configuration. When true or an object with show: true, the error state will be displayed. Examples // Simple boolean usage <Async error={true} > // Object with additional configuration <Async error={{ show: true, children: "Custom error message ", }} /> />Pick.errorsrc/components/Async/Async.tsx:83
loading?booleanControls the display of the loading state. When true, a loading spinner will be displayed. Useful for indicating data fetching or processing states.AsyncProps.loadingsrc/components/Async/Async.tsx:113
className?stringAdditional CSS classes to apply to the DataTable container.-src/components/DataTable/DataTable.tsx:40
entityName?stringName of the presented data entity. Used inside empty states, placeholders. Provide pluralized and lowercased. Example "users"-src/components/DataTable/DataTable.tsx:47
header?ReactNode | ViewRenderProp<Data>Slot or render function to add new elements to the DataTable's header. Useful for creating custom filter or action buttons. Examples // Using ReactNode <DataTable header={<Button>Add User</Button>} /> // Using render function <DataTable header={({ table }) => ( <Button onClick={() => table.resetGlobalFilter()}>Clear Filters</Button> )} />-src/components/DataTable/DataTable.tsx:68
children?ViewRenderProp<Data>Render props pattern to define a different type of views than standard TableView. Useful when creating list-like or grid-like views that still need to support pagination, filtering, and sorting features of DataTable. Example <DataTable> {({ rows }) => ( <div> {rows.map((row) => { const person = row.original; return <div key={row.id}>{person.name}</div>; })} </div> )} </DataTable>-src/components/DataTable/DataTable.tsx:88
bordered?booleanRenders a border around container. Default true-src/components/DataTable/DataTable.tsx:93
minimal?booleanHides DataTable features, like header or pagination if not required. Useful for simpler views where advanced features are not needed. Default false-src/components/DataTable/DataTable.tsx:99
tableView?DataTableTableViewSpecificProps<Data>Properties that are specific to the Table view of DataTable. These properties are only used when the default table view is rendered.-src/components/DataTable/DataTable.tsx:104
empty?boolean | Partial<FullEmptyProps>Custom empty state handler. It's an optional property unless custom behavior is needed. Can be a boolean to show/hide the default empty state, or an object to customize it. Examples // customized error message <DataTable empty={{ children: "Sorry, no users found" }} /> // disable empty state <DataTable empty={false} />-src/components/DataTable/DataTable.tsx:121
pageSize?numberDefines how many items are displayed per one page. Default 50UseDataTableProps.pageSizesrc/components/DataTable/DataTable.utils.ts:60
_features?TableFeature<any>[]An array of extra features that you can add to the table instance. Link API Docs Link GuideUseDataTableProps._featuresnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:11
autoResetAll?booleanSet this option to override any of the autoReset... feature options. Link API Docs Link GuideUseDataTableProps.autoResetAllnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:17
columnsColumnDef<Data, any>[]The array of column defs to use for the table. Link API Docs Link GuideUseDataTableProps.columnsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:23
dataData[]The data for the table to display. This array should match the type you provided to table.setRowType<...>. Columns can access this data via string/index or a functional accessor. When the data option changes reference, the table will reprocess the data. Link API Docs Link GuideUseDataTableProps.datanode_modules/@tanstack/table-core/build/lib/core/table.d.ts:29
debugAll?booleanSet this option to true to output all debugging information to the console. Link API Docs Link GuideUseDataTableProps.debugAllnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:35
debugCells?booleanSet this option to true to output cell debugging information to the console. Link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcells] Link GuideUseDataTableProps.debugCellsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:41
debugColumns?booleanSet this option to true to output column debugging information to the console. Link API Docs Link GuideUseDataTableProps.debugColumnsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:47
debugHeaders?booleanSet this option to true to output header debugging information to the console. Link API Docs Link GuideUseDataTableProps.debugHeadersnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:53
debugRows?booleanSet this option to true to output row debugging information to the console. Link API Docs Link GuideUseDataTableProps.debugRowsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:59
debugTable?booleanSet this option to true to output table debugging information to the console. Link API Docs Link GuideUseDataTableProps.debugTablenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:65
defaultColumn?Partial<ColumnDef<Data, unknown>>Default column options to use for all column defs supplied to the table. Link API Docs Link GuideUseDataTableProps.defaultColumnnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:71
getCoreRowModel?(table) => () => RowModel<any>This required option is a factory for a function that computes and returns the core row model for the table. Link API Docs Link GuideUseDataTableProps.getCoreRowModelnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:77
getRowId?(originalRow, index, parent?) => stringThis optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. Example getRowId: row => row.userId Link API Docs Link GuideUseDataTableProps.getRowIdnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:84
getSubRows?(originalRow, index) => Data[] | undefinedThis optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row. Example getSubRows: row => row.subRows Link API Docs Link GuideUseDataTableProps.getSubRowsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:91
initialState?InitialTableStateUse this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. options.autoResetPageIndex) or via functions like table.resetRowSelection(). Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable. Link API Docs Link GuideUseDataTableProps.initialStatenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:100
mergeOptions?(defaultOptions, options) => TableOptions<Data>This option is used to optionally implement the merging of table options. Link API Docs Link GuideUseDataTableProps.mergeOptionsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:106
meta?TableMeta<Data>You can pass any object to options.meta and access it anywhere the table is available via table.options.meta. Link API Docs Link GuideUseDataTableProps.metanode_modules/@tanstack/table-core/build/lib/core/table.d.ts:112
onStateChange?(updater) => voidThe onStateChange option can be used to optionally listen to state changes within the table. Link API Docs Link GuideUseDataTableProps.onStateChangenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:118
renderFallbackValue?anyValue used when the desired value is not found in the data. Link API Docs Link GuideUseDataTableProps.renderFallbackValuenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:124
state?Partial<TableState>The state option can be used to optionally control part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the onStateChange option. > Note: Any state passed in here will override both the internal state and any other initialState you provide. Link API Docs Link GuideUseDataTableProps.statenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:131
getFacetedMinMaxValues?(table, columnId) => () => [number, number] | undefined-UseDataTableProps.getFacetedMinMaxValuesnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:30
getFacetedRowModel?(table, columnId) => () => RowModel<Data>-UseDataTableProps.getFacetedRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:31
getFacetedUniqueValues?(table, columnId) => () => Map<any, number>-UseDataTableProps.getFacetedUniqueValuesnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:32
enableColumnFilters?booleanEnables/disables column filtering for all columns. Link API Docs Link GuideUseDataTableProps.enableColumnFiltersnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:104
enableFilters?booleanEnables/disables all filtering for the table. Link API Docs Link GuideUseDataTableProps.enableFiltersnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:110
filterFromLeafRows?booleanBy default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to true will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included). Link API Docs Link GuideUseDataTableProps.filterFromLeafRowsnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:116
getFilteredRowModel?(table) => () => RowModel<any>If provided, this function is called once per table and should return a new function which will calculate and return the row model for the table when it's filtered. - For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model. - For client-side filtering, this function is required. A default implementation is provided via any table adapter's { getFilteredRowModel } export. Link API Docs Link GuideUseDataTableProps.getFilteredRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:124
manualFiltering?booleanDisables the getFilteredRowModel from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering. Link API Docs Link GuideUseDataTableProps.manualFilteringnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:130
maxLeafRowFilterDepth?numberBy default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to 0 will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on. This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter. * Link API Docs * Link GuideUseDataTableProps.maxLeafRowFilterDepthnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:138
onColumnFiltersChange?OnChangeFn<ColumnFiltersState>If provided, this function will be called with an updaterFn when state.columnFilters changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onColumnFiltersChangenode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:144
filterFns?Record<"fuzzy", FilterFn<any>>-UseDataTableProps.filterFnsnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:149
enableGrouping?booleanEnables/disables grouping for the table. Link API Docs Link GuideUseDataTableProps.enableGroupingnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:138
getGroupedRowModel?(table) => () => RowModel<any>Returns the row model after grouping has taken place, but no further. Link API Docs Link GuideUseDataTableProps.getGroupedRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:144
groupedColumnMode?false | "reorder" | "remove"Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here. Link API Docs Link GuideUseDataTableProps.groupedColumnModenode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:150
manualGrouping?booleanEnables manual grouping. If this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation. Link API Docs Link GuideUseDataTableProps.manualGroupingnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:156
onGroupingChange?OnChangeFn<GroupingState>If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.grouping option. Link API Docs Link GuideUseDataTableProps.onGroupingChangenode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:162
aggregationFns?Record<string, AggregationFn<any>>-UseDataTableProps.aggregationFnsnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:165
onColumnOrderChange?OnChangeFn<ColumnOrderState>If provided, this function will be called with an updaterFn when state.columnOrder changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onColumnOrderChangenode_modules/@tanstack/table-core/build/lib/features/ColumnOrdering.d.ts:13
enableColumnPinning?booleanEnables/disables column pinning for the table. Defaults to true. Link API Docs Link GuideUseDataTableProps.enableColumnPinningnode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:16
enablePinning?booleanDeprecated Use enableColumnPinning or enableRowPinning instead. Enables/disables all pinning for the table. Defaults to true. Link API Docs Link GuideUseDataTableProps.enablePinningnode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:23
onColumnPinningChange?OnChangeFn<ColumnPinningState>If provided, this function will be called with an updaterFn when state.columnPinning changes. This overrides the default internal state management, so you will also need to supply state.columnPinning from your own managed state. Link API Docs Link GuideUseDataTableProps.onColumnPinningChangenode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:29
columnResizeMode?ColumnResizeModeDetermines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle. Link API Docs Link GuideUseDataTableProps.columnResizeModenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:24
enableColumnResizing?booleanEnables or disables column resizing for the column. Link API Docs Link GuideUseDataTableProps.enableColumnResizingnode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:30
columnResizeDirection?ColumnResizeDirectionEnables or disables right-to-left support for resizing the column. defaults to 'ltr'. Link API Docs Link GuideUseDataTableProps.columnResizeDirectionnode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:36
onColumnSizingChange?OnChangeFn<ColumnSizingState>If provided, this function will be called with an updaterFn when state.columnSizing changes. This overrides the default internal state management, so you will also need to supply state.columnSizing from your own managed state. Link API Docs Link GuideUseDataTableProps.onColumnSizingChangenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:42
onColumnSizingInfoChange?OnChangeFn<ColumnSizingInfoState>If provided, this function will be called with an updaterFn when state.columnSizingInfo changes. This overrides the default internal state management, so you will also need to supply state.columnSizingInfo from your own managed state. Link API Docs Link GuideUseDataTableProps.onColumnSizingInfoChangenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:48
enableHiding?booleanWhether to enable column hiding. Defaults to true. Link API Docs Link GuideUseDataTableProps.enableHidingnode_modules/@tanstack/table-core/build/lib/features/ColumnVisibility.d.ts:13
onColumnVisibilityChange?OnChangeFn<VisibilityState>If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onColumnVisibilityChangenode_modules/@tanstack/table-core/build/lib/features/ColumnVisibility.d.ts:19
enableGlobalFilter?booleanEnables/disables global filtering for all columns. Link API Docs Link GuideUseDataTableProps.enableGlobalFilternode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:28
getColumnCanGlobalFilter?(column) => booleanIf provided, this function will be called with the column and should return true or false to indicate whether this column should be used for global filtering. This is useful if the column can contain data that is not string or number (i.e. undefined). Link API Docs Link GuideUseDataTableProps.getColumnCanGlobalFilternode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:36
globalFilterFn?FilterFnOption<Data>The filter function to use for global filtering. - A string referencing a built-in filter function - A string that references a custom filter functions provided via the tableOptions.filterFns option - A custom filter function Link API Docs Link GuideUseDataTableProps.globalFilterFnnode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:45
onGlobalFilterChange?OnChangeFn<any>If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onGlobalFilterChangenode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:51
autoResetExpanded?booleanEnable this setting to automatically reset the expanded state of the table when expanding state changes. Link API Docs Link GuideUseDataTableProps.autoResetExpandednode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:46
enableExpanding?booleanEnable/disable expanding for all rows. Link API Docs Link GuideUseDataTableProps.enableExpandingnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:52
getExpandedRowModel?(table) => () => RowModel<any>This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported getExpandedRowModel function to get the expanded row model or implement your own. Link API Docs Link GuideUseDataTableProps.getExpandedRowModelnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:58
getIsRowExpanded?(row) => booleanIf provided, allows you to override the default behavior of determining whether a row is currently expanded. Link API Docs Link GuideUseDataTableProps.getIsRowExpandednode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:64
getRowCanExpand?(row) => booleanIf provided, allows you to override the default behavior of determining whether a row can be expanded. Link API Docs Link GuideUseDataTableProps.getRowCanExpandnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:70
manualExpanding?booleanEnables manual row expansion. If this is set to true, getExpandedRowModel will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion. Link API Docs Link GuideUseDataTableProps.manualExpandingnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:76
onExpandedChange?OnChangeFn<ExpandedState>This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the tableOptions.state.expanded option. Link API Docs Link GuideUseDataTableProps.onExpandedChangenode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:82
paginateExpandedRows?booleanIf true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size) Link API Docs Link GuideUseDataTableProps.paginateExpandedRowsnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:88
autoResetPageIndex?booleanIf set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. Link API Docs Link GuideUseDataTableProps.autoResetPageIndexnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:18
getPaginationRowModel?(table) => () => RowModel<any>Returns the row model after pagination has taken place, but no further. Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here. Link API Docs Link GuideUseDataTableProps.getPaginationRowModelnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:26
manualPagination?booleanEnables manual pagination. If this option is set to true, the table will not automatically paginate rows using getPaginationRowModel() and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. Link API Docs Link GuideUseDataTableProps.manualPaginationnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:32
onPaginationChange?OnChangeFn<PaginationState>If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.pagination option. Link API Docs Link GuideUseDataTableProps.onPaginationChangenode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:38
pageCount?numberWhen manually controlling pagination, you can supply a total pageCount value to the table if you know it (Or supply a rowCount and pageCount will be calculated). If you do not know how many pages there are, you can set this to -1. Link API Docs Link GuideUseDataTableProps.pageCountnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:44
rowCount?numberWhen manually controlling pagination, you can supply a total rowCount value to the table if you know it. The pageCount can be calculated from this value and the pageSize. Link API Docs Link GuideUseDataTableProps.rowCountnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:50
enableRowPinning?boolean | (row) => booleanEnables/disables row pinning for the table. Defaults to true. Link API Docs Link GuideUseDataTableProps.enableRowPinningnode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:16
keepPinnedRows?booleanWhen false, pinned rows will not be visible if they are filtered or paginated out of the table. When true, pinned rows will always be visible regardless of filtering or pagination. Defaults to true. Link API Docs Link GuideUseDataTableProps.keepPinnedRowsnode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:22
onRowPinningChange?OnChangeFn<RowPinningState>If provided, this function will be called with an updaterFn when state.rowPinning changes. This overrides the default internal state management, so you will also need to supply state.rowPinning from your own managed state. Link API Docs Link GuideUseDataTableProps.onRowPinningChangenode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:28
enableMultiRowSelection?boolean | (row) => boolean- Enables/disables multiple row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren Link API Docs Link GuideUseDataTableProps.enableMultiRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:13
enableRowSelection?boolean | (row) => boolean- Enables/disables row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable row selection for that row Link API Docs Link GuideUseDataTableProps.enableRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:20
enableSubRowSelection?boolean | (row) => booleanEnables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row. (Use in combination with expanding or grouping features) Link API Docs Link GuideUseDataTableProps.enableSubRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:27
onRowSelectionChange?OnChangeFn<RowSelectionState>If provided, this function will be called with an updaterFn when state.rowSelection changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onRowSelectionChangenode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:33
enableMultiRemove?booleanEnables/disables the ability to remove multi-sorts Link API Docs Link GuideUseDataTableProps.enableMultiRemovenode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:144
enableMultiSort?booleanEnables/Disables multi-sorting for the table. Link API Docs Link GuideUseDataTableProps.enableMultiSortnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:150
enableSorting?booleanEnables/Disables sorting for the table. Link API Docs Link GuideUseDataTableProps.enableSortingnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:156
enableSortingRemoval?booleanEnables/Disables the ability to remove sorting for the table. - If true then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ... - If false then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ... Link API Docs Link GuideUseDataTableProps.enableSortingRemovalnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:164
getSortedRowModel?(table) => () => RowModel<any>This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported getSortedRowModel() from your adapter to your table or implement your own. Link API Docs Link GuideUseDataTableProps.getSortedRowModelnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:170
isMultiSortEvent?(e) => booleanPass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return true if the event should trigger a multi-sort. Link API Docs Link GuideUseDataTableProps.isMultiSortEventnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:176
manualSorting?booleanEnables manual sorting for the table. If this is true, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting. Link API Docs Link GuideUseDataTableProps.manualSortingnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:182
maxMultiSortColCount?numberSet a maximum number of columns that can be multi-sorted. Link API Docs Link GuideUseDataTableProps.maxMultiSortColCountnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:188
onSortingChange?OnChangeFn<SortingState>If provided, this function will be called with an updaterFn when state.sorting changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuideUseDataTableProps.onSortingChangenode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:194
sortDescFirst?booleanIf true, all sorts will default to descending as their first toggle state. Link API Docs Link GuideUseDataTableProps.sortDescFirstnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:200
sortingFns?Record<string, SortingFn<any>>-UseDataTableProps.sortingFnsnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:203

UseDataTableProps​

Defined in: src/components/DataTable/DataTable.utils.ts:53

Make some fields in the object partial.

Example​

PartialSome<{ a: string, b: string, c: string }, 'a'> => { a?: string, b: string, c: string }

Extends​

  • PartialSome<TableOptions<Data>, "getCoreRowModel" | "filterFns">

Extended by​

Type Parameters​

Type Parameter
Data

Properties​

PropertyTypeDescriptionInherited fromDefined in
pageSize?numberDefines how many items are displayed per one page. Default 50-src/components/DataTable/DataTable.utils.ts:60
_features?TableFeature<any>[]An array of extra features that you can add to the table instance. Link API Docs Link GuidePartialSome._featuresnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:11
autoResetAll?booleanSet this option to override any of the autoReset... feature options. Link API Docs Link GuidePartialSome.autoResetAllnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:17
columnsColumnDef<Data, any>[]The array of column defs to use for the table. Link API Docs Link GuidePartialSome.columnsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:23
dataData[]The data for the table to display. This array should match the type you provided to table.setRowType<...>. Columns can access this data via string/index or a functional accessor. When the data option changes reference, the table will reprocess the data. Link API Docs Link GuidePartialSome.datanode_modules/@tanstack/table-core/build/lib/core/table.d.ts:29
debugAll?booleanSet this option to true to output all debugging information to the console. Link API Docs Link GuidePartialSome.debugAllnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:35
debugCells?booleanSet this option to true to output cell debugging information to the console. Link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcells] Link GuidePartialSome.debugCellsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:41
debugColumns?booleanSet this option to true to output column debugging information to the console. Link API Docs Link GuidePartialSome.debugColumnsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:47
debugHeaders?booleanSet this option to true to output header debugging information to the console. Link API Docs Link GuidePartialSome.debugHeadersnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:53
debugRows?booleanSet this option to true to output row debugging information to the console. Link API Docs Link GuidePartialSome.debugRowsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:59
debugTable?booleanSet this option to true to output table debugging information to the console. Link API Docs Link GuidePartialSome.debugTablenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:65
defaultColumn?Partial<ColumnDef<Data, unknown>>Default column options to use for all column defs supplied to the table. Link API Docs Link GuidePartialSome.defaultColumnnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:71
getCoreRowModel?(table) => () => RowModel<any>This required option is a factory for a function that computes and returns the core row model for the table. Link API Docs Link GuidePartialSome.getCoreRowModelnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:77
getRowId?(originalRow, index, parent?) => stringThis optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. Example getRowId: row => row.userId Link API Docs Link GuidePartialSome.getRowIdnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:84
getSubRows?(originalRow, index) => Data[] | undefinedThis optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row. Example getSubRows: row => row.subRows Link API Docs Link GuidePartialSome.getSubRowsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:91
initialState?InitialTableStateUse this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. options.autoResetPageIndex) or via functions like table.resetRowSelection(). Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable. Link API Docs Link GuidePartialSome.initialStatenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:100
mergeOptions?(defaultOptions, options) => TableOptions<Data>This option is used to optionally implement the merging of table options. Link API Docs Link GuidePartialSome.mergeOptionsnode_modules/@tanstack/table-core/build/lib/core/table.d.ts:106
meta?TableMeta<Data>You can pass any object to options.meta and access it anywhere the table is available via table.options.meta. Link API Docs Link GuidePartialSome.metanode_modules/@tanstack/table-core/build/lib/core/table.d.ts:112
onStateChange?(updater) => voidThe onStateChange option can be used to optionally listen to state changes within the table. Link API Docs Link GuidePartialSome.onStateChangenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:118
renderFallbackValue?anyValue used when the desired value is not found in the data. Link API Docs Link GuidePartialSome.renderFallbackValuenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:124
state?Partial<TableState>The state option can be used to optionally control part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the onStateChange option. > Note: Any state passed in here will override both the internal state and any other initialState you provide. Link API Docs Link GuidePartialSome.statenode_modules/@tanstack/table-core/build/lib/core/table.d.ts:131
getFacetedMinMaxValues?(table, columnId) => () => [number, number] | undefined-PartialSome.getFacetedMinMaxValuesnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:30
getFacetedRowModel?(table, columnId) => () => RowModel<Data>-PartialSome.getFacetedRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:31
getFacetedUniqueValues?(table, columnId) => () => Map<any, number>-PartialSome.getFacetedUniqueValuesnode_modules/@tanstack/table-core/build/lib/features/ColumnFaceting.d.ts:32
enableColumnFilters?booleanEnables/disables column filtering for all columns. Link API Docs Link GuidePartialSome.enableColumnFiltersnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:104
enableFilters?booleanEnables/disables all filtering for the table. Link API Docs Link GuidePartialSome.enableFiltersnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:110
filterFromLeafRows?booleanBy default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to true will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included). Link API Docs Link GuidePartialSome.filterFromLeafRowsnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:116
getFilteredRowModel?(table) => () => RowModel<any>If provided, this function is called once per table and should return a new function which will calculate and return the row model for the table when it's filtered. - For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model. - For client-side filtering, this function is required. A default implementation is provided via any table adapter's { getFilteredRowModel } export. Link API Docs Link GuidePartialSome.getFilteredRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:124
manualFiltering?booleanDisables the getFilteredRowModel from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering. Link API Docs Link GuidePartialSome.manualFilteringnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:130
maxLeafRowFilterDepth?numberBy default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to 0 will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to 1 will cause filtering to only be applied to child leaf rows 1 level deep, and so on. This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter. * Link API Docs * Link GuidePartialSome.maxLeafRowFilterDepthnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:138
onColumnFiltersChange?OnChangeFn<ColumnFiltersState>If provided, this function will be called with an updaterFn when state.columnFilters changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onColumnFiltersChangenode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:144
filterFns?Record<"fuzzy", FilterFn<any>>-PartialSome.filterFnsnode_modules/@tanstack/table-core/build/lib/features/ColumnFiltering.d.ts:149
enableGrouping?booleanEnables/disables grouping for the table. Link API Docs Link GuidePartialSome.enableGroupingnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:138
getGroupedRowModel?(table) => () => RowModel<any>Returns the row model after grouping has taken place, but no further. Link API Docs Link GuidePartialSome.getGroupedRowModelnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:144
groupedColumnMode?false | "reorder" | "remove"Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here. Link API Docs Link GuidePartialSome.groupedColumnModenode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:150
manualGrouping?booleanEnables manual grouping. If this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation. Link API Docs Link GuidePartialSome.manualGroupingnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:156
onGroupingChange?OnChangeFn<GroupingState>If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.grouping option. Link API Docs Link GuidePartialSome.onGroupingChangenode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:162
aggregationFns?Record<string, AggregationFn<any>>-PartialSome.aggregationFnsnode_modules/@tanstack/table-core/build/lib/features/ColumnGrouping.d.ts:165
onColumnOrderChange?OnChangeFn<ColumnOrderState>If provided, this function will be called with an updaterFn when state.columnOrder changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onColumnOrderChangenode_modules/@tanstack/table-core/build/lib/features/ColumnOrdering.d.ts:13
enableColumnPinning?booleanEnables/disables column pinning for the table. Defaults to true. Link API Docs Link GuidePartialSome.enableColumnPinningnode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:16
enablePinning?booleanDeprecated Use enableColumnPinning or enableRowPinning instead. Enables/disables all pinning for the table. Defaults to true. Link API Docs Link GuidePartialSome.enablePinningnode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:23
onColumnPinningChange?OnChangeFn<ColumnPinningState>If provided, this function will be called with an updaterFn when state.columnPinning changes. This overrides the default internal state management, so you will also need to supply state.columnPinning from your own managed state. Link API Docs Link GuidePartialSome.onColumnPinningChangenode_modules/@tanstack/table-core/build/lib/features/ColumnPinning.d.ts:29
columnResizeMode?ColumnResizeModeDetermines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle. Link API Docs Link GuidePartialSome.columnResizeModenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:24
enableColumnResizing?booleanEnables or disables column resizing for the column. Link API Docs Link GuidePartialSome.enableColumnResizingnode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:30
columnResizeDirection?ColumnResizeDirectionEnables or disables right-to-left support for resizing the column. defaults to 'ltr'. Link API Docs Link GuidePartialSome.columnResizeDirectionnode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:36
onColumnSizingChange?OnChangeFn<ColumnSizingState>If provided, this function will be called with an updaterFn when state.columnSizing changes. This overrides the default internal state management, so you will also need to supply state.columnSizing from your own managed state. Link API Docs Link GuidePartialSome.onColumnSizingChangenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:42
onColumnSizingInfoChange?OnChangeFn<ColumnSizingInfoState>If provided, this function will be called with an updaterFn when state.columnSizingInfo changes. This overrides the default internal state management, so you will also need to supply state.columnSizingInfo from your own managed state. Link API Docs Link GuidePartialSome.onColumnSizingInfoChangenode_modules/@tanstack/table-core/build/lib/features/ColumnSizing.d.ts:48
enableHiding?booleanWhether to enable column hiding. Defaults to true. Link API Docs Link GuidePartialSome.enableHidingnode_modules/@tanstack/table-core/build/lib/features/ColumnVisibility.d.ts:13
onColumnVisibilityChange?OnChangeFn<VisibilityState>If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onColumnVisibilityChangenode_modules/@tanstack/table-core/build/lib/features/ColumnVisibility.d.ts:19
enableGlobalFilter?booleanEnables/disables global filtering for all columns. Link API Docs Link GuidePartialSome.enableGlobalFilternode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:28
getColumnCanGlobalFilter?(column) => booleanIf provided, this function will be called with the column and should return true or false to indicate whether this column should be used for global filtering. This is useful if the column can contain data that is not string or number (i.e. undefined). Link API Docs Link GuidePartialSome.getColumnCanGlobalFilternode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:36
globalFilterFn?FilterFnOption<Data>The filter function to use for global filtering. - A string referencing a built-in filter function - A string that references a custom filter functions provided via the tableOptions.filterFns option - A custom filter function Link API Docs Link GuidePartialSome.globalFilterFnnode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:45
onGlobalFilterChange?OnChangeFn<any>If provided, this function will be called with an updaterFn when state.globalFilter changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onGlobalFilterChangenode_modules/@tanstack/table-core/build/lib/features/GlobalFiltering.d.ts:51
autoResetExpanded?booleanEnable this setting to automatically reset the expanded state of the table when expanding state changes. Link API Docs Link GuidePartialSome.autoResetExpandednode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:46
enableExpanding?booleanEnable/disable expanding for all rows. Link API Docs Link GuidePartialSome.enableExpandingnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:52
getExpandedRowModel?(table) => () => RowModel<any>This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported getExpandedRowModel function to get the expanded row model or implement your own. Link API Docs Link GuidePartialSome.getExpandedRowModelnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:58
getIsRowExpanded?(row) => booleanIf provided, allows you to override the default behavior of determining whether a row is currently expanded. Link API Docs Link GuidePartialSome.getIsRowExpandednode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:64
getRowCanExpand?(row) => booleanIf provided, allows you to override the default behavior of determining whether a row can be expanded. Link API Docs Link GuidePartialSome.getRowCanExpandnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:70
manualExpanding?booleanEnables manual row expansion. If this is set to true, getExpandedRowModel will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion. Link API Docs Link GuidePartialSome.manualExpandingnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:76
onExpandedChange?OnChangeFn<ExpandedState>This function is called when the expanded table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the tableOptions.state.expanded option. Link API Docs Link GuidePartialSome.onExpandedChangenode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:82
paginateExpandedRows?booleanIf true expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If false expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size) Link API Docs Link GuidePartialSome.paginateExpandedRowsnode_modules/@tanstack/table-core/build/lib/features/RowExpanding.d.ts:88
autoResetPageIndex?booleanIf set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc. Link API Docs Link GuidePartialSome.autoResetPageIndexnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:18
getPaginationRowModel?(table) => () => RowModel<any>Returns the row model after pagination has taken place, but no further. Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here. Link API Docs Link GuidePartialSome.getPaginationRowModelnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:26
manualPagination?booleanEnables manual pagination. If this option is set to true, the table will not automatically paginate rows using getPaginationRowModel() and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. Link API Docs Link GuidePartialSome.manualPaginationnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:32
onPaginationChange?OnChangeFn<PaginationState>If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the tableOptions.state.pagination option. Link API Docs Link GuidePartialSome.onPaginationChangenode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:38
pageCount?numberWhen manually controlling pagination, you can supply a total pageCount value to the table if you know it (Or supply a rowCount and pageCount will be calculated). If you do not know how many pages there are, you can set this to -1. Link API Docs Link GuidePartialSome.pageCountnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:44
rowCount?numberWhen manually controlling pagination, you can supply a total rowCount value to the table if you know it. The pageCount can be calculated from this value and the pageSize. Link API Docs Link GuidePartialSome.rowCountnode_modules/@tanstack/table-core/build/lib/features/RowPagination.d.ts:50
enableRowPinning?boolean | (row) => booleanEnables/disables row pinning for the table. Defaults to true. Link API Docs Link GuidePartialSome.enableRowPinningnode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:16
keepPinnedRows?booleanWhen false, pinned rows will not be visible if they are filtered or paginated out of the table. When true, pinned rows will always be visible regardless of filtering or pagination. Defaults to true. Link API Docs Link GuidePartialSome.keepPinnedRowsnode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:22
onRowPinningChange?OnChangeFn<RowPinningState>If provided, this function will be called with an updaterFn when state.rowPinning changes. This overrides the default internal state management, so you will also need to supply state.rowPinning from your own managed state. Link API Docs Link GuidePartialSome.onRowPinningChangenode_modules/@tanstack/table-core/build/lib/features/RowPinning.d.ts:28
enableMultiRowSelection?boolean | (row) => boolean- Enables/disables multiple row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren Link API Docs Link GuidePartialSome.enableMultiRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:13
enableRowSelection?boolean | (row) => boolean- Enables/disables row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable row selection for that row Link API Docs Link GuidePartialSome.enableRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:20
enableSubRowSelection?boolean | (row) => booleanEnables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row. (Use in combination with expanding or grouping features) Link API Docs Link GuidePartialSome.enableSubRowSelectionnode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:27
onRowSelectionChange?OnChangeFn<RowSelectionState>If provided, this function will be called with an updaterFn when state.rowSelection changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onRowSelectionChangenode_modules/@tanstack/table-core/build/lib/features/RowSelection.d.ts:33
enableMultiRemove?booleanEnables/disables the ability to remove multi-sorts Link API Docs Link GuidePartialSome.enableMultiRemovenode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:144
enableMultiSort?booleanEnables/Disables multi-sorting for the table. Link API Docs Link GuidePartialSome.enableMultiSortnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:150
enableSorting?booleanEnables/Disables sorting for the table. Link API Docs Link GuidePartialSome.enableSortingnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:156
enableSortingRemoval?booleanEnables/Disables the ability to remove sorting for the table. - If true then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ... - If false then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ... Link API Docs Link GuidePartialSome.enableSortingRemovalnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:164
getSortedRowModel?(table) => () => RowModel<any>This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported getSortedRowModel() from your adapter to your table or implement your own. Link API Docs Link GuidePartialSome.getSortedRowModelnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:170
isMultiSortEvent?(e) => booleanPass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return true if the event should trigger a multi-sort. Link API Docs Link GuidePartialSome.isMultiSortEventnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:176
manualSorting?booleanEnables manual sorting for the table. If this is true, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting. Link API Docs Link GuidePartialSome.manualSortingnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:182
maxMultiSortColCount?numberSet a maximum number of columns that can be multi-sorted. Link API Docs Link GuidePartialSome.maxMultiSortColCountnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:188
onSortingChange?OnChangeFn<SortingState>If provided, this function will be called with an updaterFn when state.sorting changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. Link API Docs Link GuidePartialSome.onSortingChangenode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:194
sortDescFirst?booleanIf true, all sorts will default to descending as their first toggle state. Link API Docs Link GuidePartialSome.sortDescFirstnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:200
sortingFns?Record<string, SortingFn<any>>-PartialSome.sortingFnsnode_modules/@tanstack/table-core/build/lib/features/RowSorting.d.ts:203

DataTableTableViewSpecificProps​

Defined in: src/components/DataTable/DataTableTableView.tsx:22

Type Parameters​

Type Parameter
Data

Properties​

PropertyTypeDescriptionDefined in
onRowClick?(data, event) => voidRow event click handler. Row is clicked only if it passes isRowClicked check.src/components/DataTable/DataTableTableView.tsx:26
isRowClicked?(event) => booleanDetermines whether a mouse event represents a valid row click. This function helps filter click events when table rows contain interactive elements by allowing you to exclude clicks that have bubbled up from child elements. By default, it checks if the event's target is a "TD" HTML element.src/components/DataTable/DataTableTableView.tsx:35

DataTableViewProps​

type DataTableViewProps<Data> = object & Pick<DataTableProps<Data>, "entityName">;

Defined in: src/components/DataTable/DataTable.tsx:27

Type Declaration​

NameTypeDefined in
tableTableType<Data>src/components/DataTable/DataTable.tsx:28
rowsRow<Data>[]src/components/DataTable/DataTable.tsx:29

Type Parameters​

Type Parameter
Data

fuzzyFilter​

const fuzzyFilter: FilterFn<unknown>;

Defined in: src/components/DataTable/DataTable.utils.ts:36

Default fuzzyFilter implementation, used for global text filtering.

dateColumn()​

function dateColumn<T>(props): string;

Defined in: src/components/DataTable/DataTable.columns.ts:26

Column cell formatter that formats date to include just the day, month and year. The exact date format is based on locale.

Type Parameters​

Type Parameter
T

Parameters​

ParameterType
propsCellContext<T, Nil<string | Date>>

Returns​

string

Example​

// for US - 2/12/2019
columnHelper.accessor("updatedAt", {
  header: "Date",
  cell: dateColumn,
})

dateTimeColumn()​

function dateTimeColumn<T>(props): string;

Defined in: src/components/DataTable/DataTable.columns.ts:42

Column cell formatter that formats date to include both day, month, year and time. The exact date format is based on locale.

Type Parameters​

Type Parameter
T

Parameters​

ParameterType
propsCellContext<T, Nil<string | Date>>

Returns​

string

Example​

// for US - 2/12/2019 11:31 PM
columnHelper.accessor("updatedAt", {
  header: "Date Time",
  cell: dateTimeColumn,
})

DataTable()​

function DataTable<Data>(__namedParameters): Element;

Defined in: src/components/DataTable/DataTable.tsx:202

A flexible DataTable component that supports pagination, filtering, and sorting.

This component heavily relies most of it's properties and API on @tanstack/react-table. Please refer to the docs for more details and advanced usage.

Features:

  • Global text search filtering
  • Column-based filtering and sorting
  • Pagination with configurable page size
  • Customizable empty states and loading states
  • Multiple view modes - table by default, any other by customizing props
  • Extensible header

Type Parameters​

Type ParameterDescription
DataThe type of data items displayed in the table

Parameters​

ParameterType
__namedParametersDataTableProps<Data>

Returns​

Element

Examples​

// Basic usage with array of users
const userColumns = createColumnHelper<User>()
<DataTable
  data={users}
  columns={[
    userColumns.accessor('name', { header: 'Name' }),
    userColumns.accessor('email', { header: 'Email' }),
    userColumns.accessor('role', { header: 'Role' })
  ]}
  entityName="users"
  pageSize={10}
/>
// With custom empty state and loading
const productColumns = createColumnHelper<Product>()
<DataTable
  data={products}
  columns={[
    productColumns.accessor('name', { header: 'Product Name' }),
    productColumns.accessor('price', { header: 'Price' }),
    productColumns.accessor('category', { header: 'Category' })
  ]}
  entityName="products"
  loading={isLoading}
  error={error}
  empty={{ children: "No products found" }}
/>
// Completely custom view
<DataTable<Person>
  columns={peopleColumns}
  data={peopleData}
  entityName="users"
  className="m-5"
>
  {({ rows }) => (
    <div>
      {rows.map((row) => {
        const person = row.original;
        return (
          <div key={row.id}>
            <h4>{person.name}</h4>
            <span>
              {person.age} years old
            </span>
          </div>
        );
      })}
    </div>
  )}
</DataTable>

useDataTable()​

function useDataTable<Data>(__namedParameters): object;

Defined in: src/components/DataTable/DataTable.utils.ts:66

Composes useReactTable usage, contains core data table logic.

Type Parameters​

Type Parameter
Data

Parameters​

ParameterType
__namedParametersUseDataTableProps<Data>

Returns​

object

NameTypeDefault valueDefined in
globalFilterstring-src/components/DataTable/DataTable.utils.ts:113
setGlobalFilterDispatch<SetStateAction<string>>-src/components/DataTable/DataTable.utils.ts:114
setGlobalFilterDebouncedDebouncedState<(value) => void>-src/components/DataTable/DataTable.utils.ts:115
tableTable<Data>-src/components/DataTable/DataTable.utils.ts:116
rowsRow<Data>[]-src/components/DataTable/DataTable.utils.ts:117
emptyPropsobject-src/components/DataTable/DataTable.utils.ts:118
emptyProps.showbooleanisEmptysrc/components/DataTable/DataTable.utils.ts:107
emptyProps.textFilterstring | undefined-src/components/DataTable/DataTable.utils.ts:108
emptyProps.hasFiltersboolean-src/components/DataTable/DataTable.utils.ts:109
isEmptyboolean-src/components/DataTable/DataTable.utils.ts:119

DataTablePagination()​

function DataTablePagination<Data>(__namedParameters): Element;

Defined in: src/components/DataTable/DataTablePagination.tsx:20

Uses core DataTable hook to construct pagination

Type Parameters​

Type Parameter
Data

Parameters​

ParameterType
__namedParametersDataTablePaginationProps<Data>

Returns​

Element

DataTableTableView()​

function DataTableTableView<Data>(__namedParameters): Element;

Defined in: src/components/DataTable/DataTableTableView.tsx:59

Regular DataTable's TableView. If no custom children is provided, this component is rendered by default.

Renders a fully-featured table with headers, sortable columns, and row click handling. Automatically applies proper styling and accessibility attributes to the table elements.

Type Parameters​

Type Parameter
Data

Parameters​

ParameterType
__namedParametersDataTableTableViewProps<Data>

Returns​

Element

GlobalFilterInputContainer()​

function GlobalFilterInputContainer(__namedParameters): Element;

Defined in: src/components/DataTable/GlobalFilterInput.tsx:14

Parameters​

ParameterType
__namedParametersDetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns​

Element

GlobalFilterInputIcon()​

function GlobalFilterInputIcon(__namedParameters): Element;

Defined in: src/components/DataTable/GlobalFilterInput.tsx:21

Parameters​

ParameterType
__namedParametersOmit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>

Returns​

Element

GlobalFilterInputInput()​

function GlobalFilterInputInput(__namedParameters): Element;

Defined in: src/components/DataTable/GlobalFilterInput.tsx:39

Parameters​

ParameterType
__namedParametersGlobalFilterInputInputProps

Returns​

Element

GlobalFilterInput()​

function GlobalFilterInput(props): Element;

Defined in: src/components/DataTable/GlobalFilterInput.tsx:61

Renders input for global text search.

Parameters​

ParameterType
propsGlobalFilterInputProps

Returns​

Element

RowDropdownMenu()​

function RowDropdownMenu(__namedParameters): Element;

Defined in: src/components/DataTable/RowDropdownMenu/RowDropdownMenu.tsx:29

Standard DataTable row actions dropdown menu.

Parameters​

ParameterType
__namedParametersRowDropdownMenuProps

Returns​

Element