fix: insert header content into body measure rows for column width calculation (#1331)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: afc163

docs/examples/stickyHeader.tsx

@@ -2,7 +2,7 @@
 import React, { useRef } from 'react';
 import Table from 'rc-table';
 import '../../assets/index.less';
-import type { ColumnType } from '@/interface';
+import type { ColumnType, ColumnsType } from '@/interface';
 
 interface RecordType {
   a?: string;
@@ -86,6 +86,34 @@ const columnsWithWidth: ColumnType<RecordType>[] = [
   { title: 'title4', dataIndex: 'd', key: 'd', width: 100 },
 ];
 
+const columnsGrouped: ColumnsType<any> = [
+  {
+    title: '',
+    dataIndex: 'productType',
+    key: 'productType',
+    rowSpan: 2,
+    rowScope: 'row',
+  },
+  {
+    title: 'Mars',
+    dataIndex: 'mars',
+    key: 'mars',
+    children: [
+      { title: 'ProducedProducedProduced', dataIndex: 'producedMars', key: 'producedMars' },
+      { title: 'Sold', dataIndex: 'soldMars', key: 'soldMars' },
+    ],
+  },
+  {
+    title: 'Venus',
+    dataIndex: 'venus',
+    key: 'venus',
+    children: [
+      { title: 'Produced Produced', dataIndex: 'producedVenus', key: 'producedVenus' },
+      { title: 'Sold Sold Sold Sold', dataIndex: 'soldVenus', key: 'soldVenus' },
+    ],
+  },
+];
+
 const data = [
   { a: '123', key: '1' },
   { a: 'cdd', b: 'edd', key: '2' },
@@ -270,6 +298,24 @@ const Demo = () => {
         }}
         sticky
       />
+      <br />
+      <Table
+        columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
+        data={[{}]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={columnsGrouped}
+        data={[{}, {}]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
     </div>
   );
 };

src/Body/MeasureCell.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import type { ColumnType } from '../interface';
 
 export interface MeasureCellProps {
   columnKey: React.Key;
   onColumnResize: (key: React.Key, width: number) => void;
+  column?: ColumnType<any>;
 }
 
-export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) {
   const cellRef = React.useRef<HTMLTableCellElement>();
 
   useLayoutEffect(() => {
@@ -18,8 +20,13 @@ export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellPr
 
   return (
     <ResizeObserver data={columnKey}>
-      <td ref={cellRef} style={{ padding: 0, border: 0, height: 0 }}>
-        <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
+      <td
+        ref={cellRef}
+        style={{ paddingTop: 0, paddingBottom: 0, borderTop: 0, borderBottom: 0, height: 0 }}
+      >
+        <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}>
+          {column?.title || '\xa0'}
+        </div>
       </td>
     </ResizeObserver>
   );

src/Body/MeasureRow.tsx

@@ -2,23 +2,25 @@ import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import MeasureCell from './MeasureCell';
 import isVisible from 'rc-util/lib/Dom/isVisible';
+import type { ColumnType } from '../interface';
 
-export interface MeasureCellProps {
+export interface MeasureRowProps {
   prefixCls: string;
   onColumnResize: (key: React.Key, width: number) => void;
   columnsKey: React.Key[];
+  columns: readonly ColumnType<any>[];
 }
 
-export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureRow({
+  prefixCls,
+  columnsKey,
+  onColumnResize,
+  columns,
+}: MeasureRowProps) {
   const ref = React.useRef<HTMLTableRowElement>(null);
 
   return (
-    <tr
-      aria-hidden="true"
-      className={`${prefixCls}-measure-row`}
-      style={{ height: 0, fontSize: 0 }}
-      ref={ref}
-    >
+    <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}>
       <ResizeObserver.Collection
         onBatchResize={infoList => {
           if (isVisible(ref.current)) {
@@ -28,9 +30,17 @@ export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: Me
           }
         }}
       >
-        {columnsKey.map(columnKey => (
-          <MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} />
-        ))}
+        {columnsKey.map(columnKey => {
+          const column = columns.find(col => col.key === columnKey);
+          return (
+            <MeasureCell
+              key={columnKey}
+              columnKey={columnKey}
+              onColumnResize={onColumnResize}
+              column={column}
+            />
+          );
+        })}
       </ResizeObserver.Collection>
     </tr>
   );

src/Body/index.tsx

@@ -133,6 +133,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
             prefixCls={prefixCls}
             columnsKey={columnsKey}
             onColumnResize={onColumnResize}
+            columns={flattenColumns}
           />
         )}
 

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 { ColumnsType, ColumnType, Direction, TableLayout } from '../interface';
 
 function useColumnWidth(colWidths: readonly number[], columCount: number) {
   return useMemo(() => {
@@ -35,6 +35,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   stickyBottomOffset?: number;
   stickyClassName?: string;
   scrollTableStyle?: React.CSSProperties;
+  tableLayout?: TableLayout;
   onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
   children: (info: HeaderProps<RecordType>) => React.ReactNode;
   colGroup?: React.ReactNode;
@@ -60,6 +61,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     stickyBottomOffset,
     stickyClassName,
     scrollTableStyle,
+    tableLayout = 'fixed',
     onScroll,
     children,
     ...restProps
@@ -148,7 +150,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     >
       <TableComponent
         style={{
-          tableLayout: 'fixed',
+          tableLayout,
           visibility: noData || mergedColumnWidth ? null : 'hidden',
           ...scrollTableStyle,
         }}

src/Table.tsx

@@ -685,6 +685,7 @@ function Table<RecordType extends DefaultRecordType>(
       direction,
       stickyClassName,
       scrollTableStyle,
+      tableLayout: mergedTableLayout,
       onScroll: onInternalScroll,
     };