style: model list buttons

src/components/simple-table/header.tsx

@@ -14,7 +14,7 @@ const TableHeader = ({ columns }: TableHeaderProps) => {
       {columns.map((column: any, index: number) => {
         return (
           <th key={index}>
-            <span className="cell-span">
+            <span className="cell-span cell-header">
               {column.locale
                 ? intl.formatMessage({ id: column.title })
                 : column.title}

src/components/simple-table/index.less

@@ -16,7 +16,7 @@
     }
 
     tr:last-child td {
-      border-bottom: none;
+      // border-bottom: none;
     }
   }
 
@@ -25,9 +25,17 @@
     font-weight: 600;
   }
 
+  td {
+    color: var(--color-white-quaternary);
+  }
+
   .cell-span {
     display: flex;
     padding: 4px 6px;
     min-height: 32px;
   }
+
+  .cell-header {
+    font-weight: var(--font-weight-bold);
+  }
 }

src/components/simple-table/index.tsx

@@ -6,11 +6,31 @@ import TableHeader from './header';
 import './index.less';
 import TableRow from './row';
 
-interface ColumnProps {
+export interface ColumnProps {
   title: string;
   key: string;
-  render?: (data: { dataIndex: string; row: any }) => any;
+  render?: (data: {
+    dataIndex: string;
+    dataList?: any[];
+    row: any;
+    rowIndex?: number;
+    colIndex?: number;
+  }) => any;
   locale?: boolean;
+  colSpan?: (params: {
+    row: any;
+    rowIndex: number;
+    colIndex: number;
+    dataIndex: string;
+    dataList: any[];
+  }) => number;
+  rowSpan?: (params: {
+    row: any;
+    rowIndex: number;
+    colIndex: number;
+    dataIndex: string;
+    dataList: any[];
+  }) => number;
 }
 
 interface SimpleTableProps {
@@ -42,7 +62,9 @@ const SimpleTabel: React.FC<SimpleTableProps> = (props) => {
             return (
               <TableRow
                 row={item}
+                rowIndex={index}
                 columns={columns}
+                dataList={dataSource}
                 key={rowKey ? item[rowKey] : index}
               ></TableRow>
             );

src/components/simple-table/row.tsx

@@ -1,25 +1,88 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 interface TableRowProps {
   row: any;
   columns: any;
+  rowIndex: number;
+  dataList: any[];
 }
-const TableRow = ({ row, columns }: TableRowProps) => {
+
+interface TableCellProps {
+  row: any;
+  column: any;
+  rowIndex: number;
+  colIndex: number;
+  dataList: any[];
+}
+const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
+  const { row, column, rowIndex, colIndex, dataList } = props;
+
+  const renderContent = useMemo(() => {
+    return column.render
+      ? column.render({
+          dataIndex: column.key,
+          dataList: dataList,
+          row: row,
+          rowIndex,
+          colIndex: colIndex
+        })
+      : row[column.key];
+  }, [column, row, rowIndex, colIndex, dataList]);
+
+  if (renderContent === null && (column.colSpan || column.rowSpan)) {
+    return null;
+  }
+
+  return (
+    <td
+      key={colIndex}
+      rowSpan={column.rowSpan?.({
+        row,
+        rowIndex,
+        colIndex: colIndex,
+        dataIndex: column.key,
+        dataList: dataList
+      })}
+      colSpan={column.colSpan?.({
+        row,
+        rowIndex,
+        colIndex: colIndex,
+        dataIndex: column.key,
+        dataList: dataList
+      })}
+    >
+      <span className="cell-span">
+        {column.render
+          ? column.render({
+              dataIndex: column.key,
+              dataList: dataList,
+              row: row,
+              rowIndex,
+              colIndex: colIndex
+            })
+          : row[column.key]}
+      </span>
+    </td>
+  );
+};
+
+const TableRow = ({ row, columns, rowIndex, dataList }: TableRowProps) => {
   return (
     <tr>
       {columns.map((column: any, index: number) => {
         return (
-          <td key={index}>
-            <span className="cell-span">
-              {column.render
-                ? column.render({ dataIndex: column.key, row: row })
-                : row[column.key]}
-            </span>
-          </td>
+          <TableCell
+            key={index}
+            rowIndex={rowIndex}
+            colIndex={index}
+            dataList={dataList}
+            row={row}
+            column={column}
+          ></TableCell>
         );
       })}
     </tr>
   );
 };
 
-export default React.memo(TableRow);
+export default TableRow;