DataTable

A data table which includes sorting, filtering, pagination, bulk actions, column controls etc.

This is the building block of all data tables in the Dashboard.

Signature

function DataTable<TData>(props: Readonly<DataTableProps<TData>>): void

Parameters

props

parameterReadonly<DataTableProps<TData>>

DataTableProps

@vendure/dashboard Sourcev3.4.0

Props for configuring the DataTable.

Signature

interface DataTableProps<TData> {    children?: React.ReactNode;    columns: ColumnDef<TData, any>[];    data: TData[];    totalItems: number;    isLoading?: boolean;    page?: number;    itemsPerPage?: number;    sorting?: SortingState;    columnFilters?: ColumnFiltersState;    onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;    onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;    onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;    onColumnVisibilityChange?: (table: TableType<TData>, columnVisibility: VisibilityState) => void;    onSearchTermChange?: (searchTerm: string) => void;    defaultColumnVisibility?: VisibilityState;    facetedFilters?: { [key: string]: FacetedFilter | undefined };    disableViewOptions?: boolean;    bulkActions?: BulkActionsInput;    setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;    onRefresh?: () => void;    onReorder?: (oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>;    disableDragAndDrop?: boolean;}

children

propertyReact.ReactNode

columns

propertyColumnDef<TData, any>[]

data

propertyTData[]

totalItems

propertynumber

isLoading

propertyboolean

page

propertynumber

itemsPerPage

propertynumber

sorting

propertySortingState

columnFilters

propertyColumnFiltersState

onPageChange

property(table: TableType<TData>, page: number, itemsPerPage: number) => void

onSortChange

property(table: TableType<TData>, sorting: SortingState) => void

onFilterChange

property(table: TableType<TData>, columnFilters: ColumnFilter[]) => void

onColumnVisibilityChange

property(table: TableType<TData>, columnVisibility: VisibilityState) => void

onSearchTermChange

property(searchTerm: string) => void

defaultColumnVisibility

propertyVisibilityState

facetedFilters

property{ [key: string]: FacetedFilter | undefined }

disableViewOptions

propertyboolean

bulkActions

propertyBulkActionsInput

setTableOptions

property(table: TableOptions<TData>) => TableOptions<TData>

This property allows full control over all features of TanStack Table when needed.

onRefresh

property() => void

onReorder

property(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.

disableDragAndDrop

propertyboolean

When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set

Was this chapter helpful?

Report Issue

Edited Jun 24, 2026·Edit this page