chore: sync antd-5.x to master

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

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;
@@ -79,6 +79,41 @@ const columns: ColumnType<RecordType>[] = [
   },
 ];
 
+const columnsWithWidth: ColumnType<RecordType>[] = [
+  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+  { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+  { 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' },
@@ -105,11 +140,7 @@ const data = [
 const Demo = () => {
   const container = useRef();
   return (
-    <div
-      style={{
-        height: 10000,
-      }}
-    >
+    <div>
       <h2>Sticky</h2>
       <Table<RecordType>
         columns={columns}
@@ -212,6 +243,79 @@ const Demo = () => {
         suscipit asperiores, id ullam in iste soluta dignissimos vero incidunt, rem ex consectetur
         beatae totam aperiam. Sunt, laudantium?
       </div>
+
+      <h2>Sticky header with empty data</h2>
+      <Table
+        columns={fixedColumns}
+        data={[]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={fixedColumns}
+        data={[]}
+        scroll={{
+          x: 1200,
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={columnsWithWidth}
+        data={[]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={fixedColumns}
+        data={[{}]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={columnsWithWidth}
+        data={[{}]}
+        scroll={{
+          x: 1200,
+        }}
+        sticky
+      />
+      <br />
+      <Table
+        columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
+        data={[]}
+        scroll={{
+          x: 'max-content',
+        }}
+        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>
   );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/table",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "table ui component for react",
   "engines": {
     "node": ">=8.x"

src/Body/MeasureCell.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import ResizeObserver from '@rc-component/resize-observer';
 import useLayoutEffect from '@rc-component/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-component/resize-observer';
 import MeasureCell from './MeasureCell';
 import isVisible from '@rc-component/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

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

src/ColGroup.tsx

@@ -22,7 +22,7 @@ function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<
   for (let i = len - 1; i >= 0; i -= 1) {
     const width = colWidths[i];
     const column = columns && columns[i];
-    let additionalProps;
+    let additionalProps: Record<string, unknown>;
     let minWidth: number;
     if (column) {
       additionalProps = column[INTERNAL_COL_DEFINE];

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(() => {
@@ -36,6 +36,8 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   stickyTopOffset?: number;
   stickyBottomOffset?: number;
   stickyClassName?: string;
+  scrollTableStyle?: React.CSSProperties;
+  tableLayout?: TableLayout;
   onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
   children: (info: HeaderProps<RecordType>) => React.ReactNode;
 }
@@ -59,6 +61,8 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     stickyTopOffset,
     stickyBottomOffset,
     stickyClassName,
+    scrollTableStyle,
+    tableLayout = 'fixed',
     onScroll,
     maxContentScroll,
     children,
@@ -115,12 +119,6 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     };
   }, []);
 
-  // Check if all flattenColumns has width
-  const allFlattenColumnsWithWidth = React.useMemo(
-    () => flattenColumns.every(column => column.width),
-    [flattenColumns],
-  );
-
   // Add scrollbar column
   const lastColumn = flattenColumns[flattenColumns.length - 1];
   const ScrollBarColumn: ColumnType<unknown> & { scrollbar: true } = {
@@ -158,6 +156,32 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
 
   const mergedColumnWidth = useColumnWidth(colWidths, columCount);
 
+  const colGroupNode = useMemo(() => {
+    // use original ColGroup if no data or no calculated column width, otherwise use calculated column width
+    // Return original colGroup if no data, or mergedColumnWidth is empty, or all widths are falsy
+    if (
+      noData ||
+      !mergedColumnWidth ||
+      mergedColumnWidth.length === 0 ||
+      mergedColumnWidth.every(width => !width)
+    ) {
+      return ColGroup;
+    }
+    return (
+      <ColGroup
+        colWidths={[...mergedColumnWidth, combinationScrollBarSize]}
+        columCount={columCount + 1}
+        columns={flattenColumnsWithScrollbar}
+      />
+    );
+  }, [
+    noData,
+    mergedColumnWidth,
+    combinationScrollBarSize,
+    columCount,
+    flattenColumnsWithScrollbar,
+  ]);
+
   return (
     <div
       style={{
@@ -172,17 +196,12 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     >
       <TableComponent
         style={{
-          tableLayout: 'fixed',
+          tableLayout,
           visibility: noData || mergedColumnWidth ? null : 'hidden',
+          ...scrollTableStyle,
         }}
       >
-        {(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (
-          <ColGroup
-            colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}
-            columCount={columCount + 1}
-            columns={flattenColumnsWithScrollbar}
-          />
-        )}
+        {colGroupNode}
         {children({
           ...restProps,
           stickyOffsets: headerStickyOffsets,

src/Table.tsx

@@ -719,6 +719,8 @@ function Table<RecordType extends DefaultRecordType>(
       ...columnContext,
       direction,
       stickyClassName,
+      scrollTableStyle,
+      tableLayout: mergedTableLayout,
       onScroll: onInternalScroll,
     };