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>>

@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?: BulkAction[];    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

propertyBulkAction[]

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

@vendure/dashboard Sourcev3.4.0

Allows you to define custom display components for specific columns in data tables. The pageId is already defined in the data table extension, so only the column name is needed.

Signature

interface DashboardDataTableDisplayComponent {    column: string;    component: DataTableDisplayComponent;}

column

propertystring

The name of the column where this display component should be used.

component

propertyDataTableDisplayComponent

The React component that will be rendered as the display. It should accept value and other standard display props.