DataTables

DashboardDataTableDisplayComponent

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 receives the TanStack Table CellContext, including value, cell, row, and table.

DashboardDataTableExtensionDefinition

@vendure/dashboard Sourcev3.4.0

This allows you to customize aspects of existing data tables in the dashboard.

Signature

interface DashboardDataTableExtensionDefinition {    pageId: string;    blockId?: string;    bulkActions?: BulkAction[];    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);    displayComponents?: DashboardDataTableDisplayComponent[];}

pageId

propertystring

The ID of the page where the data table is located, e.g. 'product-list', 'order-list'.

blockId

propertystring

The ID of the data table block. Defaults to 'list-table', which is the default blockId for the standard list pages. However, some other pages may use a different blockId, such as 'product-variants-table' on the 'product-detail' page.

bulkActions

propertyBulkAction[]

An array of additional bulk actions that will be available on the data table.

extendListDocument

propertystring | DocumentNode | (() => DocumentNode | string)

Allows you to extend the list document for the data table.

displayComponents

propertyDashboardDataTableDisplayComponent[]

Custom display components for specific columns in the data table.