***

title: "DataTables"
generated: true
---------------

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

```ts title="Signature"
interface DashboardDataTableDisplayComponent {
    column: string;
    component: DataTableDisplayComponent;
}
```

<div className="members-wrapper">

### column

\<MemberInfo kind="property" type={`string`}   />

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

### component

\<MemberInfo kind="property" type={`DataTableDisplayComponent`}   />

The React component that will be rendered as the display.
It receives the TanStack Table `CellContext`, including `value`, `cell`, `row`, and `table`.

</div>
## DashboardDataTableExtensionDefinition

<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/data-table.ts" sourceLine="198" packageName="@vendure/dashboard" since="3.4.0" />

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

```ts title="Signature"
interface DashboardDataTableExtensionDefinition {
    pageId: string;
    blockId?: string;
    bulkActions?: BulkAction[];
    extendListDocument?: string | DocumentNode | (() => DocumentNode | string);
    displayComponents?: DashboardDataTableDisplayComponent[];
    viewOptionDefaults?: DashboardDataTableViewOptionDefaults;
}
```

<div className="members-wrapper">

### pageId

\<MemberInfo kind="property" type={`string`}   />

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

### blockId

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

\<MemberInfo kind="property" type={`<a href='/current/core/reference/dashboard/list-views/bulk-actions#bulkaction'>BulkAction</a>[]`}   />

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

### extendListDocument

\<MemberInfo kind="property" type={`string | DocumentNode | (() => DocumentNode | string)`}   />

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

### displayComponents

\<MemberInfo kind="property" type={`<a href='/current/core/reference/dashboard/extensions-api/data-tables#dashboarddatatabledisplaycomponent'>DashboardDataTableDisplayComponent</a>[]`}   />

Custom display components for specific columns in the data table.

### viewOptionDefaults

\<MemberInfo kind="property" type={`DashboardDataTableViewOptionDefaults`}   />

Initial column visibility and order for this data table. These are
applied as defaults before the user has interacted with the column
settings — once a user customizes their view, their saved preferences
take precedence over these values.

Use this to surface a custom field as a visible column out of the box,
or to hide a column from a list view by default.

</div>