Skip to main content

DataTable

DataTable​

@vendure/dashboarddata-table.tsx
v3.4.0

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​

parameter
Readonly<DataTableProps<TData>>

DataTableProps​

@vendure/dashboarddata-table.tsx
v3.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;
}

children​

property
React.ReactNode

columns​

property
ColumnDef<TData, any>[]

data​

property
TData[]

totalItems​

property
number

isLoading​

property
boolean

page​

property
number

itemsPerPage​

property
number

sorting​

property
SortingState

columnFilters​

property
ColumnFiltersState

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​

property
VisibilityState

facetedFilters​

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

disableViewOptions​

property
boolean

bulkActions​

property
BulkAction[]

setTableOptions​

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

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

onRefresh​

property
() => void

DashboardDataTableDisplayComponent​

@vendure/dashboarddata-table.ts
v3.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: React.ComponentType<DataDisplayComponentProps<CellContext<any, any>>>;
}

column​

property
string

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

component​

property
React.ComponentType<DataDisplayComponentProps<CellContext<any, any>>>

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