Parameters
Readonly<DataTableProps<TData>>Props for configuring the DataTable.
React.ReactNodeColumnDef<TData, any>[]TData[]numberbooleannumbernumberSortingStateColumnFiltersState(table: TableType<TData>, page: number, itemsPerPage: number) => void(table: TableType<TData>, sorting: SortingState) => void(table: TableType<TData>, columnFilters: ColumnFilter[]) => void(table: TableType<TData>, columnVisibility: VisibilityState) => void(searchTerm: string) => voidstringv3.8.0Placeholder text for the search input. Should say what the search targets, e.g. "Search products...". Defaults to a generic "Search...".
VisibilityState{ [key: string]: FacetedFilter | undefined }booleanBulkActionsInput | falseTData[](selection: TData[]) => voidboolean(table: TableOptions<TData>) => TableOptions<TData>This property allows full control over all features of TanStack Table when needed.
() => void(oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>Callback when items are reordered via drag and drop. When provided, enables drag-and-drop functionality. The fourth parameter provides all items for context-aware reordering.
booleanWhen true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set
React.ReactNodeAn optional action rendered inside the first-run empty state (no data and no active filters). Typically a "create your first X" CTA. Not shown in the "no results match your filters" empty state, which offers "Clear filters" instead.
React.ReactNodeAn optional illustration rendered in the first-run empty state (no data and no
active filters). Defaults to the generic empty-collection illustration. Pass a
scenario illustration such as NoProductsIllustration when one matches.
React.ReactNodev3.8.0An optional title rendered in the table's header band. Intended for tables embedded in detail pages (e.g. "Product variants"), where the surrounding page block no longer provides a card title of its own.
React.ReactNodev3.8.0Optional action buttons (e.g. a "Manage variants" CTA) rendered in the table's header band, next to the view-options and refresh controls.
'card' | 'plain'v3.8.0'card'The table's frame. 'card' (default) renders the table on its own card:
a header band hosting the controls, the rows flush to the card edges, and
a footer band for pagination. 'plain' renders the same band structure
without the card chrome, for a table embedded in an existing card (e.g. a
dashboard widget) — the host card must be the direct frame.
React.ReactNode | ((ctx: { columnCount: number }) => React.ReactNode)v3.8.0Extra <TableRow>s appended after the data rows — e.g. the order table's
subtotal/shipping/total rows. Use the function form to receive the current
visible columnCount for colSpans. Rendered only alongside real rows,
never with the loading or empty states. Takes precedence over children,
which remains supported for the same purpose.
Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team