Custom DataTable Components

The Admin UI list views are powered by a data table component which features sorting, advanced filtering, pagination and more. It will also give you the option of displaying any configured custom fields for the entity in question.

With Admin UI extensions, you can specify custom components to use in rendering any column of any data table - both custom fields and built-in fields, using either Angular or React components.

Let's say we want to make the product "slug" column link to the matching product detail page in our storefront.

1. Define a component

First we'll define the component we will use to render the "slug" column:

Angular components will receive the value of the current column as the rowItem input. In this case, the rowItem will be the Product entity, because we will be adding this to the product list data table.

src/plugins/slug-link/ui/components/slug-link/slug-link.component.ts

import { Component, Input } from '@angular/core';import { CustomColumnComponent } from '@vendure/admin-ui/core';@Component({    selector: 'slug-link',    template: `        <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a>    `,    standalone: true,})export class SlugLinkComponent implements CustomColumnComponent {    @Input() rowItem: { slug: string };}

2. Register the component

Next we need to register the component in out providers.ts file. We need to pass both a tableId and a columnId to identify the table and column to which the component should be added. The values for these IDs can be found by pressing the shortcut when the Admin UI is in dev mode, and then clicking the extension point icon at the top of the column in question: