diff --git a/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md b/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md
index d38141c1c0..7902cb3b36 100644
--- a/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md
+++ b/docs/docs/guides/extending-the-admin-ui/custom-data-table-components/index.md
@@ -46,8 +46,8 @@ React components will receive the value of the current column as the `rowItem` p
import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
import React from 'react';
-export function SlugLink({ rowItem }: ReactDataTableComponentProps) {
- const slug: string = rowItem.slug;
+export function SlugLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
+ const slug = rowItem.slug;
return (
{slug}
diff --git a/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md b/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md
index 21874fb6b8..a948d9de99 100644
--- a/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md
+++ b/docs/docs/reference/admin-ui-api/react-extensions/register-react-data-table-component.md
@@ -23,7 +23,7 @@ e.g. the `Product` object if used in the `product-list` table.
import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
import React from 'react';
-export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) {
+export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
return (
{rowItem.slug}
diff --git a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts
index 740f2bf29e..9db002a241 100644
--- a/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts
+++ b/packages/admin-ui/src/lib/react/src/register-react-data-table-component.ts
@@ -44,8 +44,8 @@ export interface ReactDataTableComponentConfig {
* @description
* The props that will be passed to the React component registered via {@link registerReactDataTableComponent}.
*/
-export interface ReactDataTableComponentProps {
- rowItem: any;
+export interface ReactDataTableComponentProps {
+ rowItem: T;
[prop: string]: any;
}
@@ -60,7 +60,7 @@ export interface ReactDataTableComponentProps {
* import { ReactDataTableComponentProps } from '\@vendure/admin-ui/react';
* import React from 'react';
*
- * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) {
+ * export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
* return (
*
* {rowItem.slug}
@@ -79,7 +79,7 @@ export interface ReactDataTableComponentProps {
* tableId: 'product-list',
* columnId: 'slug',
* props: {
- * foo: 'bar',
+ * foo: 'bar',
* },
* }),
* ];
diff --git a/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx b/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx
index 8b74afb0ef..a9192a0cac 100644
--- a/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx
+++ b/packages/dev-server/test-plugins/experimental-ui/components/SlugWithLink.tsx
@@ -1,8 +1,8 @@
import { ReactDataTableComponentProps } from '@vendure/admin-ui/react';
import React from 'react';
-export function SlugWithLink({ rowItem }: ReactDataTableComponentProps) {
- const slug: string = rowItem.slug;
+export function SlugWithLink({ rowItem }: ReactDataTableComponentProps<{ slug: string }>) {
+ const slug = rowItem.slug;
return (
{slug}