Skip to main content

DataTable

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: React.ComponentType<{ value: any; [key: string]: any }>;
}

column

property
string

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

component

property
React.ComponentType<{ value: any; [key: string]: any }>

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

BulkAction

Status: Developer Preview

A bulk action is a component that will be rendered in the bulk actions dropdown.

Signature
type BulkAction = {
order?: number;
component: BulkActionComponent<any>;
}

order

property
number

Optional order number to control the position of this bulk action in the dropdown. A larger number will appear lower in the list.

component

property
BulkActionComponent<any>

The React component that will be rendered as the bulk action item.

DashboardDataTableExtensionDefinition

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

property
string

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

blockId

property
string

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

property

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

extendListDocument

property
string | DocumentNode | (() => DocumentNode | string)

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

displayComponents

Custom display components for specific columns in the data table.