refactor(console): table column type (#2772)

packages/console/src/components/Table/index.tsx

@@ -14,7 +14,7 @@ type Props<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
   rowGroups: Array<RowGroup<TFieldValues>>;
-  columns: Array<Column<TFieldValues, TName>>;
+  columns: Array<Column<TFieldValues>>;
   rowIndexKey: TName;
   onClickRow?: (row: TFieldValues) => void;
   className?: string;
@@ -90,7 +90,7 @@ const Table = <
                   >
                     {columns.map(({ dataIndex, colSpan, className, render }) => (
                       <td key={dataIndex} colSpan={colSpan} className={className}>
-                        {render(row[dataIndex], row)}
+                        {render(row)}
                       </td>
                     ))}
                   </tr>

packages/console/src/components/Table/types.ts

@@ -1,13 +1,10 @@
 import type { Key, ReactNode } from 'react';
-import type { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+import type { FieldValues } from 'react-hook-form';
 
-export type Column<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
+export type Column<TFieldValues extends FieldValues = FieldValues> = {
   title: ReactNode;
-  dataIndex: TName;
-  render: (value: FieldPathValue<TFieldValues, TName>, row: TFieldValues) => ReactNode;
+  dataIndex: string;
+  render: (row: TFieldValues) => ReactNode;
   colSpan?: number;
   className?: string;
 };

packages/console/src/pages/ApiResources/index.tsx

@@ -103,7 +103,7 @@ const ApiResources = () => {
             title: t('api_resources.api_name'),
             dataIndex: 'name',
             colSpan: 6,
-            render: (name, { id }) => (
+            render: ({ id, name }) => (
               <ItemPreview
                 title={name}
                 icon={<ResourceIcon className={styles.icon} />}
@@ -115,7 +115,7 @@ const ApiResources = () => {
             title: t('api_resources.api_identifier'),
             dataIndex: 'indicator',
             colSpan: 10,
-            render: (indicator) => <CopyToClipboard value={indicator} variant="text" />,
+            render: ({ indicator }) => <CopyToClipboard value={indicator} variant="text" />,
           },
         ]}
         placeholder={

packages/console/src/pages/Applications/index.tsx

@@ -96,7 +96,7 @@ const Applications = () => {
             title: t('applications.application_name'),
             dataIndex: 'name',
             colSpan: 6,
-            render: (name, { type, id }) => (
+            render: ({ id, name, type }) => (
               <ItemPreview
                 title={name}
                 subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
@@ -109,7 +109,7 @@ const Applications = () => {
             title: t('applications.app_id'),
             dataIndex: 'id',
             colSpan: 10,
-            render: (id) => <CopyToClipboard value={id} variant="text" />,
+            render: ({ id }) => <CopyToClipboard value={id} variant="text" />,
           },
         ]}
         placeholder={

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx

@@ -195,13 +195,13 @@ const LanguageDetails = () => {
             {
               title: t('sign_in_exp.others.manage_language.key'),
               dataIndex: 'phraseKey',
-              render: (phraseKey) => phraseKey,
+              render: ({ phraseKey }) => phraseKey,
               className: styles.sectionDataKey,
             },
             {
               title: t('sign_in_exp.others.manage_language.logto_source_values'),
               dataIndex: 'sourceValue',
-              render: (sourceValue) => (
+              render: ({ sourceValue }) => (
                 <div className={styles.sectionBuiltInText}>{sourceValue}</div>
               ),
             },
@@ -229,7 +229,7 @@ const LanguageDetails = () => {
                 </span>
               ),
               dataIndex: 'fieldKey',
-              render: (fieldKey) => (
+              render: ({ fieldKey }) => (
                 <Textarea className={styles.sectionInputArea} {...register(fieldKey)} />
               ),
               className: styles.inputCell,