<Table /> refactor

packages/core/src/table/table.ts

@@ -51,10 +51,12 @@ export interface TableDataSourceWithID extends TableRecord<unknown> {
 
 export type TableDataSource = TableDataSourceWithKey | TableDataSourceWithID;
 
-export type TableColumn<SourceType> = {
-  dataIndex: string;
+export interface TableColumnBase<SourceType> {
+  /** Column's primary key */
+  key?: string;
+  dataIndex?: string;
+  render?(source: SourceType, index: number, column: ExpandedTableColumn): any;
   title?: string;
-  render?(source: SourceType, index: number, column: TableColumn<SourceType>): any;
   renderTitle?(classes: typeof tableClasses): any;
   renderTooltipTitle?(source: SourceType): string;
   // == Custom column style ==
@@ -64,7 +66,11 @@ export type TableColumn<SourceType> = {
   width?: number;
   // == Feature sorting ==
   sorter?(a: any, b: any): number;
-  onSorted?(dataIndex: string, sortedType: string): void;
+  /**
+   * The `key` is automatically generated by mzn. If you need a more specific key,
+   * please provide `key` within the column.
+   */
+  onSorted?(key: string, sortedType: string): void;
   // == Feature editing ==
   editable?: boolean;
   setCellProps?(record: SourceType): TableRecord<unknown>;
@@ -73,7 +79,40 @@ export type TableColumn<SourceType> = {
   ellipsis?: boolean;
   /** force display tooltip whenever content is hovered */
   forceShownTooltipWhenHovered?: boolean;
-};
+}
+
+export interface TableColumnDataIndexAndTitle<SourceType> extends TableColumnBase<SourceType> {
+  dataIndex: string;
+  render?: never;
+  title: string;
+  renderTitle?: never;
+}
+
+export interface TableColumnDataIndexAndRenderTitle<SourceType> extends TableColumnBase<SourceType> {
+  dataIndex: string;
+  render?: never;
+  title?: never;
+  renderTitle(classes: typeof tableClasses): any;
+}
+
+export interface TableColumnRenderAndTitle<SourceType> extends TableColumnBase<SourceType> {
+  dataIndex?: never;
+  render(source: SourceType, index: number, column: ExpandedTableColumn): any;
+  title: string;
+  renderTitle?: never;
+}
+
+export interface TableColumnRenderAndRenderTitle<SourceType> extends TableColumnBase<SourceType> {
+  dataIndex?: never;
+  render(source: SourceType, index: number, column: ExpandedTableColumn): any;
+  title?: never;
+  renderTitle(classes: typeof tableClasses): any;
+}
+
+export type TableColumn<SourceType> = TableColumnDataIndexAndTitle<SourceType>
+| TableColumnDataIndexAndRenderTitle<SourceType>
+| TableColumnRenderAndTitle<SourceType>
+| TableColumnRenderAndRenderTitle<SourceType>;
 
 export type ExpandedTableColumn = Omit<TableColumn<TableRecord<unknown>>,
 'title' |

packages/react/src/Table/Table.spec.tsx

@@ -33,6 +33,7 @@ const defaultSources: DataType[] = [{
 }];
 
 const defaultColumns: TableColumn<DataType>[] = [{
+  key: 'foo',
   dataIndex: 'foo',
   title: 'foo',
 }];

packages/react/src/Table/Table.stories.tsx

@@ -52,18 +52,19 @@ const columns: TableColumn<DataType>[] = [{
     return -1;
   },
   // eslint-disable-next-line no-console
-  onSorted: (dataIndex, sortedType) => { console.log(dataIndex, sortedType); },
+  onSorted: (key, sortedType) => { console.log(key, sortedType); },
 }, {
   title: 'Address',
   dataIndex: 'address',
 }, {
+  key: 'age-column',
   title: 'Age',
   dataIndex: 'age',
   renderTooltipTitle: (source) => `${source.name} is age ${source.age}.`,
   forceShownTooltipWhenHovered: true,
   sorter: (a: number, b: number) => b - a,
   // eslint-disable-next-line no-console
-  onSorted: (dataIndex, sortedType) => { console.log(dataIndex, sortedType); },
+  onSorted: (key, sortedType) => { console.log(key, sortedType); },
   width: 80,
 }, {
   title: 'Tel',
@@ -474,7 +475,6 @@ export const WithActions = () => {
     title: 'Age',
     dataIndex: 'age',
   }, {
-    dataIndex: '',
     renderTitle: renderHeaderActions,
     render: renderRowActions,
     // styling
@@ -616,7 +616,7 @@ export const WithRefresh = () => {
 export const ExpandedWithString = () => {
   const customizedColumns: TableColumn<DataType>[] = [{
     title: 'Name',
-    dataIndex: 'name',
+    render: (source) => source.key,
   }, {
     title: 'Address',
     dataIndex: 'address',
@@ -790,7 +790,7 @@ export const Editable = () => {
           </Select>
         ) : (
           <Input
-            defaultValue={get(rowData, dataIndex) as string}
+            defaultValue={dataIndex ? get(rowData, dataIndex) as string : ''}
             fullWidth
             inputProps={{
               type: inputType,
@@ -845,6 +845,7 @@ export const Editable = () => {
       /**  actions column */
       return {
         ...column,
+        dataIndex: undefined,
         render: renderRowActions,
       };
     }

packages/react/src/Table/TableBody.spec.tsx

@@ -23,6 +23,7 @@ const defaultSources: DataType[] = [{
 }];
 
 const defaultColumns: TableColumn<DataType>[] = [{
+  key: 'foo',
   dataIndex: 'foo',
   title: 'foo',
 }];

packages/react/src/Table/TableBodyRow.spec.tsx

@@ -81,13 +81,16 @@ describe('<TableBodyRow />', () => {
 
   it('ellipsis control should set to true by default, and false when no data/disabled', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'name',
       dataIndex: 'name',
       title: 'name',
     }, {
+      key: 'not-existed',
       dataIndex: 'not-existed',
       title: 'bar',
       ellipsis: true,
     }, {
+      key: 'name',
       dataIndex: 'name',
       title: 'foo',
       ellipsis: false,
@@ -118,6 +121,7 @@ describe('<TableBodyRow />', () => {
 
   describe('columns are given', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'name',
       dataIndex: 'name',
       title: 'foo',
       headerClassName: undefined,
@@ -127,11 +131,12 @@ describe('<TableBodyRow />', () => {
       width: 80,
       align: 'center',
     }, {
-      dataIndex: 'bar',
+      key: 'bar',
       title: 'bar',
       align: 'start',
       render: () => 'bar-render',
     }, {
+      key: 'foo.bar',
       dataIndex: 'foo.bar',
       title: 'foo',
     }];
@@ -301,8 +306,10 @@ describe('<TableBodyRow />', () => {
                         name: 'bar',
                       }],
                       columns: [{
+                        key: 'name',
                         dataIndex: 'name',
                       }, {
+                        key: 'name2',
                         dataIndex: 'name',
                       }],
                     }),
@@ -351,8 +358,10 @@ describe('<TableBodyRow />', () => {
                     expandedRowRender: () => ({
                       dataSource: [],
                       columns: [{
+                        key: 'name',
                         dataIndex: 'name',
                       }, {
+                        key: 'name2',
                         dataIndex: 'name',
                       }],
                     }),
@@ -391,6 +400,7 @@ describe('<TableBodyRow />', () => {
   describe('exceptions handle', () => {
     it('column.width/column.align not given', () => {
       const columns: TableColumn<DataType>[] = [{
+        key: 'name',
         dataIndex: 'name',
         title: 'name',
       }];

packages/react/src/Table/TableBodyRow.tsx

@@ -143,14 +143,15 @@ const TableBodyRow = forwardRef<HTMLTableRowElement, TableBodyRowProps>(
                 </td>
               ) : null}
               {(columns ?? []).map((column: TableColumn<TableRecord<unknown>>, idx) => {
-                const ellipsis = !!(get(rowData, column.dataIndex)) && (column.ellipsis ?? true);
+                const autoGrabData = column.dataIndex ? get(rowData, column.dataIndex) : '';
+                const ellipsis = !!(autoGrabData) && (column.ellipsis ?? true);
                 const tooltipTitle = (
-                  column.renderTooltipTitle?.(rowData) ?? get(rowData, column.dataIndex)
+                  column.renderTooltipTitle?.(rowData) ?? autoGrabData
                 ) as (string | number);
 
                 return (
                   <td
-                    key={`${column.dataIndex}-${column.title}-${(rowData.key || rowData.id)}`}
+                    key={`${idx + 1}-${(rowData.key || rowData.id)}`}
                     className={cx(
                       classes.bodyRowCellWrapper,
                       isFirstColumnShouldSticky && idx === 0 && classes.bodyRowCellWrapperFixed,
@@ -173,7 +174,7 @@ const TableBodyRow = forwardRef<HTMLTableRowElement, TableBodyRowProps>(
                           rowData,
                           rowIndex,
                           column,
-                        ) || get(rowData, column.dataIndex)}
+                        ) || autoGrabData}
                       </TableCell>
                     </TableEditRenderWrapper>
                   </td>

packages/react/src/Table/TableContext.ts

@@ -20,7 +20,7 @@ export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'>
 
 /** typeof sorting */
 export interface SortingContext {
-  onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'dataIndex' | 'sorter' | 'onSorted'>): void;
+  onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'key' | 'dataIndex' | 'sorter' | 'onSorted'>): void;
   onResetAll(): void;
   sortedOn: string;
   sortedType: string;

packages/react/src/Table/TableExpandedTable.spec.tsx

@@ -28,11 +28,13 @@ const dataSource: DataType[] = [{
 }];
 
 const columns: TableColumn<DataType>[] = [{
+  key: 'name',
   dataIndex: 'name',
   title: 'name',
   width: 80,
   align: 'center',
 }, {
+  key: 'age',
   dataIndex: 'age',
   title: 'foo',
   ellipsis: false,
@@ -49,9 +51,12 @@ const expandedSources: DataType[] = [{
 }];
 
 const expandedColumns: TableColumn<DataType>[] = [{
+  key: 'name',
   dataIndex: 'name',
+  title: '',
 }, {
-  dataIndex: 'name',
+  key: 'name',
+  title: '',
   render: () => 'render name',
 }];
 

packages/react/src/Table/TableExpandedTable.tsx

@@ -5,9 +5,7 @@ import {
 import {
   tableClasses as classes,
   TableDataSource,
-  TableColumn,
   ExpandedTableColumn,
-  TableRecord,
   getColumnStyle,
   getCellStyle,
 } from '@mezzanine-ui/core/table';
@@ -50,16 +48,16 @@ const TableExpandedTable = forwardRef<HTMLDivElement, TableExpandedTableProps>(f
         >
           <TableExpandable showIcon={false} />
           {((renderedExpandedContent.columns || columns) ?? [])
-            .map((column: TableColumn<TableRecord<unknown>>, index: number) => {
-              const ellipsis = !!(get(source, column.dataIndex)) && (column.ellipsis ?? true);
+            .map((column: ExpandedTableColumn, index: number) => {
+              const autoGrabData = column.dataIndex ? get(source, column.dataIndex) : '';
+              const ellipsis = !!(autoGrabData) && (column.ellipsis ?? true);
               const tooltipTitle = (
-                column.renderTooltipTitle?.(source) ?? get(source, column.dataIndex)
+                column.renderTooltipTitle?.(source) ?? autoGrabData
               ) as (string | number);
 
               return (
                 <div
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={`${column.dataIndex}-${index}`}
+                  key={`${index + 1}`}
                   className={cx(
                     classes.bodyRowCellWrapper,
                     column.bodyClassName,
@@ -76,7 +74,7 @@ const TableExpandedTable = forwardRef<HTMLDivElement, TableExpandedTableProps>(f
                       source,
                       sourceIndex,
                       column,
-                    ) || get(source, column.dataIndex)}
+                    ) || autoGrabData}
                   </TableCell>
                 </div>
               );

packages/react/src/Table/TableHeader.spec.tsx

@@ -36,6 +36,7 @@ describe('<TableHeader />', () => {
 
   describe('columns are given', () => {
     const columns: TableColumn<DataType>[] = [{
+      key: 'foo',
       dataIndex: 'foo',
       title: 'foo',
       headerClassName: undefined,
@@ -44,8 +45,8 @@ describe('<TableHeader />', () => {
       width: 80,
       align: 'center',
     }, {
+      key: 'bar',
       dataIndex: 'bar',
-      title: 'bar',
       align: 'start',
       renderTitle: () => 'bar',
       sorter: () => 1,
@@ -158,6 +159,7 @@ describe('<TableHeader />', () => {
   describe('exceptions handle', () => {
     it('column.width/column.align not given', () => {
       const columns: TableColumn<DataType>[] = [{
+        key: 'foo',
         dataIndex: 'foo',
         title: 'foo',
       }];

packages/react/src/Table/TableHeader.tsx

@@ -71,7 +71,7 @@ const TableHeader = forwardRef<HTMLTableRowElement, NativeElementPropsWithoutKey
           ) : null}
           {(columns ?? []).map((column: TableColumn<TableRecord<unknown>>, idx) => (
             <th
-              key={`${column.dataIndex}-${column.title}`}
+              key={`${idx + 1}`}
               className={cx(
                 classes.headerCellWrapper,
                 isFirstColumnShouldSticky && idx === 0 && classes.headerCellWrapperFixed,

packages/react/src/Table/editable/TableEditRenderWrapper.spec.tsx

@@ -42,6 +42,7 @@ describe('<TableEditRenderWrapper />', () => {
         }}
       >
         <TableEditRenderWrapper
+          key="edit"
           dataIndex={defaultDataIndex}
           rowData={defaultRowData}
           setCellProps={setCellProps}

packages/react/src/Table/editable/TableEditRenderWrapper.tsx

@@ -1,15 +1,15 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import {
   useContext,
-  Fragment,
 } from 'react';
-import { TableColumn, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { TableColumnBase, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
 import { TableComponentContext } from '../TableContext';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
 
 export interface EditableBodyCellProps
   extends
   NativeElementPropsWithoutKeyAndRef<'div'>,
-  TableColumn<TableRecord<unknown>> {
+  TableColumnBase<TableRecord<unknown>> {
   rowData: TableDataSource;
 }
 
@@ -42,9 +42,9 @@ function TableEditRenderWrapper({
   }
 
   return (
-    <Fragment>
+    <>
       {children}
-    </Fragment>
+    </>
   );
 }