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.

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

Parameters

props

<MemberInfo kind="parameter" type={Readonly<<a href='/reference/dashboard/list-views/data-table#datatableprops'>DataTableProps</a><TData>>} />

DataTableProps

Props for configuring the DataTable.

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

columns

data

totalItems

isLoading

page

itemsPerPage

sorting

columnFilters

onPageChange

<MemberInfo kind="property" type={(table: TableType<TData>, page: number, itemsPerPage: number) => void} />

onSortChange

<MemberInfo kind="property" type={(table: TableType<TData>, sorting: SortingState) => void} />

onFilterChange

<MemberInfo kind="property" type={(table: TableType<TData>, columnFilters: ColumnFilter[]) => void} />

onColumnVisibilityChange

<MemberInfo kind="property" type={(table: TableType<TData>, columnVisibility: VisibilityState) => void} />

onSearchTermChange

defaultColumnVisibility

facetedFilters

disableViewOptions

bulkActions

<MemberInfo kind="property" type={<a href='/reference/dashboard/list-views/bulk-actions#bulkactionsinput'>BulkActionsInput</a>} />

setTableOptions

<MemberInfo kind="property" type={(table: TableOptions<TData>) => TableOptions<TData>} />

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

onRefresh

onReorder

<MemberInfo kind="property" type={(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

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

</div> ## DashboardDataTableDisplayComponent <GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/data-table.ts" sourceLine="18" packageName="@vendure/dashboard" since="3.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.

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

column

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

component

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

</div>