RegisterDataTableComponent

@vendure/admin-ui Source

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

parameterDataTableComponentConfig