Skip to main content

RegisterDataTableComponent

registerDataTableComponent

Allows you to override the default component used to render the data of a particular column in a DataTable. The component should implement the CustomColumnComponent interface. The tableId and columnId can be determined by pressing ctrl + u when running the Admin UI in dev mode.

Example

components/custom-table.component.ts
import { Component, Input } from '@angular/core';
import { CustomColumnComponent } from '@vendure/admin-ui/core';

@Component({
selector: 'custom-slug-component',
template: `
<a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a>
`,
standalone: true,
})
export class CustomTableComponent implements CustomColumnComponent {
@Input() rowItem: any;
}
providers.ts
import { registerDataTableComponent } from '@vendure/admin-ui/core';
import { CustomTableComponent } from './components/custom-table.component';

export default [
registerDataTableComponent({
component: CustomTableComponent,
tableId: 'product-list',
columnId: 'slug',
}),
];
Signature
function registerDataTableComponent(config: DataTableComponentConfig): void

Parameters

config