RegisterDataTableComponent - Vendure

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

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;
}

import { registerDataTableComponent } from '@vendure/admin-ui/core';
import { CustomTableComponent } from './components/custom-table.component';

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

function registerDataTableComponent(config: DataTableComponentConfig): void

Parameters

config

<MemberInfo kind="parameter" type={<a href='/reference/admin-ui-api/custom-table-components/data-table-component-config#datatablecomponentconfig'>DataTableComponentConfig</a>} />