RegisterReactDataTableComponent

registerReactDataTableComponent

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

Registers a React component to be rendered in a data table in the given location. The component will receive the rowItem prop which is the data object for the row, e.g. the Product object if used in the product-list table.

Example

components/SlugWithLink.tsx

import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
import React from 'react';

export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
    return (
        <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
            {rowItem.slug}
        </a>
    );
}

providers.ts

import { registerReactDataTableComponent } from '@vendure/admin-ui/react';
import { SlugWithLink } from './components/SlugWithLink';

export default [
    registerReactDataTableComponent({
        component: SlugWithLink,
        tableId: 'product-list',
        columnId: 'slug',
        props: {
          foo: 'bar',
        },
    }),
];

Signature

function registerReactDataTableComponent(config: ReactDataTableComponentConfig): void

Parameters

config

parameter

ReactDataTableComponentConfig