fix(admin-ui): Use generics in ReactDataTableComponentProps (#2500)

vendure-ecommerce · Nov 3, 2023 · 730a103 · 730a103
1 parent ec4f68d
commit 730a103
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
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
@@ -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 (
         <a href={`https://example.com/category/${slug}`} target="_blank">
             {slug}

diff --git a/.../reference/admin-ui-api/react-extensions/register-react-data-table-component.md b/.../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 (
         <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
             {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
@@ -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<T = any> {
+    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 (
  *         <a href={`https://example.com/products/${rowItem.slug}`} target="_blank">
  *             {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
@@ -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 (
         <a href={`https://example.com/category/${slug}`} target="_blank">
             {slug}