***
title: "RegisterReactDataTableComponent"
generated: true
---------------
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*
```ts title="components/SlugWithLink.tsx"
import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
import React from 'react';
export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
return (
{rowItem.slug}
);
}
```
```ts title="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',
},
}),
];
```
```ts title="Signature"
function registerReactDataTableComponent(config: ReactDataTableComponentConfig): void
```
Parameters
### config
\ReactDataTableComponentConfig`} />