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}