feat: grouping columns specified colSpan & rowSpan

docs/demo/grouping-columns-specified-colSpan-rowSpan.md

@@ -0,0 +1,8 @@
+---
+title: grouping-columns-specified-colSpan-rowSpan.tsx
+nav:
+ title: Demo
+ path: /demo
+---
+
+<code src="../examples/grouping-columns-specified-colSpan-rowSpan.tsx"></code>

docs/examples/grouping-columns-specified-colSpan-rowSpan.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import type { TableProps } from 'rc-table';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+const columns: TableProps['columns'] = [
+ {
+ title: '姓名',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: '出勤',
+ rowSpan: 3,
+ children: [
+ {
+ title: '出勤',
+ dataIndex: 'attendance',
+ key: 'attendance',
+ },
+ {
+ title: '迟到',
+ dataIndex: 'late',
+ key: 'late',
+ },
+ {
+ title: '请假',
+ dataIndex: 'leave',
+ key: 'leave',
+ },
+ ],
+ },
+ {
+ title: '其它',
+ children: [
+ {
+ title: '年龄',
+ dataIndex: 'age',
+ key: 'age',
+ },
+ {
+ title: '住址',
+ children: [
+ {
+ title: '街道',
+ dataIndex: 'street',
+ key: 'street',
+ },
+ {
+ title: '小区',
+ children: [
+ {
+ title: '单元',
+ dataIndex: 'building',
+ key: 'building',
+ },
+ {
+ title: '门牌',
+ dataIndex: 'number',
+ key: 'number',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: '技能',
+ rowSpan: 2,
+ children: [
+ {
+ title: '前端',
+ dataIndex: 'frontend',
+ key: 'frontend',
+ },
+ {
+ title: '后端',
+ dataIndex: 'backend',
+ key: 'backend',
+ },
+ ],
+ },
+ {
+ title: '公司',
+ children: [
+ {
+ title: '地址',
+ dataIndex: 'companyAddress',
+ key: 'companyAddress',
+ },
+ {
+ title: '名称',
+ dataIndex: 'companyName',
+ key: 'companyName',
+ },
+ ],
+ },
+ {
+ title: '性别',
+ dataIndex: 'gender',
+ key: 'gender',
+ },
+];
+
+const data = [
+ {
+ key: '1',
+ name: '胡彦斌',
+ attendance: 20,
+ late: 0,
+ leave: 1,
+ age: 32,
+ street: '拱墅区和睦街道',
+ building: 1,
+ number: 2033,
+ frontend: 'S',
+ backend: 'S',
+ companyAddress: '西湖区湖底公园',
+ companyName: '湖底有限公司',
+ gender: '男',
+ },
+ {
+ key: '2',
+ name: '胡彦祖',
+ attendance: 20,
+ late: 0,
+ leave: 1,
+ age: 42,
+ street: '拱墅区和睦街道',
+ building: 3,
+ number: 2035,
+ frontend: 'S',
+ backend: 'S',
+ companyAddress: '西湖区湖底公园',
+ companyName: '湖底有限公司',
+ gender: '男',
+ },
+];
+
+const Demo = () => (
+ <div>
+ <h2>grouping columns specified colSpan & rowSpan</h2>
+ <Table columns={columns} data={data} className="bordered" />
+ </div>
+);
+
+export default Demo;

src/Body/BodyRow.tsx

@@ -106,6 +106,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
  const rowInfo = useRowInfo(record, rowKey, index, indent);
  const {
  prefixCls,
+ headMatrix,
  flattenColumns,
  expandedRowClassName,
  expandedRowRender,
@@ -197,7 +198,7 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>(
  prefixCls={prefixCls}
  component={RowComponent}
  cellComponent={cellComponent}
- colSpan={flattenColumns.length}
+ colSpan={headMatrix[0]}
  isEmpty={false}
  >
  {expandContent}

src/Body/index.tsx

@@ -26,6 +26,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  prefixCls,
  getComponent,
  onColumnResize,
+ headMatrix,
  flattenColumns,
  getRowKey,
  expandedKeys,
@@ -35,6 +36,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  'prefixCls',
  'getComponent',
  'onColumnResize',
+ 'headMatrix',
  'flattenColumns',
  'getRowKey',
  'expandedKeys',
@@ -86,7 +88,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  prefixCls={prefixCls}
  component={trComponent}
  cellComponent={tdComponent}
- colSpan={flattenColumns.length}
+ colSpan={headMatrix[0]}
  isEmpty
  >
  {emptyNode}

src/FixedHolder/index.tsx

@@ -7,7 +7,7 @@ import ColGroup from '../ColGroup';
 import TableContext from '../context/TableContext';
 import type { HeaderProps } from '../Header/Header';
 import devRenderTimes from '../hooks/useRenderTimes';
-import type { ColumnsType, ColumnType, Direction } from '../interface';
+import type { CellType, ColumnsType, ColumnType, Direction } from '../interface';
 
 function useColumnWidth(colWidths: readonly number[], columCount: number) {
  return useMemo(() => {
@@ -48,6 +48,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  className,
  noData,
  columns,
+ headCells,
  flattenColumns,
  colWidths,
  columCount,
@@ -63,12 +64,10 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  ...restProps
  } = props;
 
- const { prefixCls, scrollbarSize, isSticky, getComponent } = useContext(TableContext, [
- 'prefixCls',
- 'scrollbarSize',
- 'isSticky',
- 'getComponent',
- ]);
+ const { prefixCls, headMatrix, scrollbarSize, isSticky, getComponent } = useContext(
+ TableContext,
+ ['prefixCls', 'headMatrix', 'scrollbarSize', 'isSticky', 'getComponent'],
+ );
  const TableComponent = getComponent(['header', 'table'], 'table');
 
  const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
@@ -111,12 +110,27 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  className: `${prefixCls}-cell-scrollbar`,
  }),
  };
+ const ScrollBarColumnCell: CellType<unknown> = {
+ column: ScrollBarColumn,
+ colSpan: 1,
+ colStart: headMatrix[0],
+ colEnd: headMatrix[0],
+ rowSpan: headMatrix[1],
+ };
 
  const columnsWithScrollbar = useMemo<ColumnsType<unknown>>(
  () => (combinationScrollBarSize ? [...columns, ScrollBarColumn] : columns),
  [combinationScrollBarSize, columns],
  );
 
+ const headCellsWithScrollbar = useMemo<CellType<unknown>[][]>(() => {
+ if (combinationScrollBarSize) {
+ const [cell, ...cells] = headCells;
+ return [[...cell, ScrollBarColumnCell], ...cells];
+ }
+ return headCells;
+ }, [combinationScrollBarSize, headCells]);
+
  const flattenColumnsWithScrollbar = useMemo(
  () => (combinationScrollBarSize ? [...flattenColumns, ScrollBarColumn] : flattenColumns),
  [combinationScrollBarSize, flattenColumns],
@@ -165,6 +179,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  ...restProps,
  stickyOffsets: headerStickyOffsets,
  columns: columnsWithScrollbar,
+ headCells: headCellsWithScrollbar,
  flattenColumns: flattenColumnsWithScrollbar,
  })}
  </TableComponent>

src/Header/Header.tsx

@@ -4,87 +4,16 @@ import TableContext, { responseImmutable } from '../context/TableContext';
 import devRenderTimes from '../hooks/useRenderTimes';
 import type {
  CellType,
- ColumnGroupType,
  ColumnsType,
  ColumnType,
  GetComponentProps,
  StickyOffsets,
 } from '../interface';
 import HeaderRow from './HeaderRow';
 
-function parseHeaderRows<RecordType>(
- rootColumns: ColumnsType<RecordType>,
-): CellType<RecordType>[][] {
- const rows: CellType<RecordType>[][] = [];
-
- function fillRowCells(
- columns: ColumnsType<RecordType>,
- colIndex: number,
- rowIndex: number = 0,
- ): number[] {
- // Init rows
- rows[rowIndex] = rows[rowIndex] || [];
-
- let currentColIndex = colIndex;
- const colSpans: number[] = columns.filter(Boolean).map(column => {
- const cell: CellType<RecordType> = {
- key: column.key,
- className: column.className || '',
- children: column.title,
- column,
- colStart: currentColIndex,
- };
-
- let colSpan: number = 1;
-
- const subColumns = (column as ColumnGroupType<RecordType>).children;
- if (subColumns && subColumns.length > 0) {
- colSpan = fillRowCells(subColumns, currentColIndex, rowIndex + 1).reduce(
- (total, count) => total + count,
- 0,
- );
- cell.hasSubColumns = true;
- }
-
- if ('colSpan' in column) {
- ({ colSpan } = column);
- }
-
- if ('rowSpan' in column) {
- cell.rowSpan = column.rowSpan;
- }
-
- cell.colSpan = colSpan;
- cell.colEnd = cell.colStart + colSpan - 1;
- rows[rowIndex].push(cell);
-
- currentColIndex += colSpan;
-
- return colSpan;
- });
-
- return colSpans;
- }
-
- // Generate `rows` cell data
- fillRowCells(rootColumns, 0);
-
- // Handle `rowSpan`
- const rowCount = rows.length;
- for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
- rows[rowIndex].forEach(cell => {
- if (!('rowSpan' in cell) && !cell.hasSubColumns) {
- // eslint-disable-next-line no-param-reassign
- cell.rowSpan = rowCount - rowIndex;
- }
- });
- }
-
- return rows;
-}
-
 export interface HeaderProps<RecordType> {
  columns: ColumnsType<RecordType>;
+ headCells: CellType<RecordType>[][];
  flattenColumns: readonly ColumnType<RecordType>[];
  stickyOffsets: StickyOffsets;
  onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>;
@@ -95,18 +24,16 @@ const Header = <RecordType extends any>(props: HeaderProps<RecordType>) => {
  devRenderTimes(props);
  }
 
- const { stickyOffsets, columns, flattenColumns, onHeaderRow } = props;
+ const { stickyOffsets, headCells, flattenColumns, onHeaderRow } = props;
 
  const { prefixCls, getComponent } = useContext(TableContext, ['prefixCls', 'getComponent']);
- const rows = React.useMemo<CellType<RecordType>[][]>(() => parseHeaderRows(columns), [columns]);
-
  const WrapperComponent = getComponent(['header', 'wrapper'], 'thead');
  const trComponent = getComponent(['header', 'row'], 'tr');
  const thComponent = getComponent(['header', 'cell'], 'th');
 
  return (
  <WrapperComponent className={`${prefixCls}-thead`}>
- {rows.map((row, rowIndex) => {
+ {headCells.map((row, rowIndex) => {
  const rowNode = (
  <HeaderRow
  key={rowIndex}