Skip to main content

RegisterDataTableComponent

registerDataTableComponent​

@vendure/admin-uiregister-data-table-component.ts

Allows you to override the default component used to render the data of a particular column in a DataTable. The component should implement the {@link CustomDataTableColumnComponent} 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​

parameter
DataTableComponentConfig