chore: sync antd 5.x branch to master

assets/index.less

@@ -44,7 +44,6 @@
 
     padding: @cell-padding;
     white-space: normal;
-    word-break: break-word;
     border: @border;
     border-top: 0;
     border-left: 0;

docs/examples/measureRowRender.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Table from 'rc-table';
+
+// 示例：使用 measureRowRender 来隐藏 MeasureRow 中的弹层
+const MeasureRowRenderExample = () => {
+  const columns = [
+    {
+      title: (
+        <div>
+          Name
+          <div className="filter-dropdown" style={{ display: 'none' }}>
+            Filter Content
+          </div>
+        </div>
+      ),
+      dataIndex: 'name',
+      key: 'name',
+      width: 100,
+    },
+    {
+      title: 'Age',
+      dataIndex: 'age',
+      key: 'age',
+      width: 80,
+    },
+  ];
+
+  const data = [
+    { key: 1, name: 'John', age: 25 },
+    { key: 2, name: 'Jane', age: 30 },
+  ];
+
+  // 自定义 MeasureRow 渲染，隐藏弹层内容
+  const measureRowRender = measureRow => <div style={{ display: 'none' }}>{measureRow}</div>;
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      sticky
+      scroll={{ x: true }}
+      measureRowRender={measureRowRender}
+    />
+  );
+};
+
+export default MeasureRowRenderExample;

docs/examples/scrollY.tsx

@@ -96,6 +96,9 @@ const Test = () => {
         rowKey={record => record.key}
         onRow={(record, index) => ({ style: { backgroundColor: 'red' } })}
       />
+      <h3>Column align issue</h3>
+      <p>https://github.com/ant-design/ant-design/issues/54889</p>
+      <Table columns={columns} data={data} sticky scroll={{ y: 300, x: 2000 }} />
     </div>
   );
 };

docs/examples/stickyHeader.tsx

@@ -137,6 +137,34 @@ const data = [
   { a: '1333', c: 'eee', d: 2, key: '20' },
 ];
 
+const columns3: ColumnType<RecordType>[] = [
+  { title: '', dataIndex: 'name', key: '0' },
+  { title: 'First column', dataIndex: 'name', key: '1' },
+  { title: 'Second column', dataIndex: 'address', key: '2' },
+  { title: 'Third column', dataIndex: 'age', key: '3' },
+  { title: 'Another column', dataIndex: 'address', key: '4' },
+  { title: 'Extra column', dataIndex: 'name', key: '5' },
+  { title: 'And yet another column', dataIndex: 'address', key: '6' },
+  {
+    title: 'Column 7 with extraaaaaaaaa long word',
+    dataIndex: 'age',
+    key: '7',
+  },
+  { title: 'Column 8', dataIndex: 'address', key: '8' },
+  { title: 'Column 9', dataIndex: 'name', key: '9' },
+  { title: 'Column 10', dataIndex: 'address', key: '10' },
+  { title: 'Column 11', dataIndex: 'address', key: '11' },
+  { title: 'Column 12', dataIndex: 'age', key: '12' },
+  { title: 'Column 13', dataIndex: 'address', key: '13' },
+  { title: 'Column 14', dataIndex: 'name', key: '14' },
+  { title: 'Column 15', dataIndex: 'address', key: '15' },
+  { title: 'Column 16', dataIndex: 'address', key: '16' },
+  { title: 'Column 17', dataIndex: 'name', key: '17' },
+  { title: 'Column 18', dataIndex: 'address', key: '18' },
+  { title: 'Column 19', dataIndex: 'address', key: '19' },
+  { title: 'Column 20', dataIndex: 'age', key: '20' },
+];
+
 const Demo = () => {
   const container = useRef();
   return (
@@ -274,7 +302,7 @@ const Demo = () => {
       <br />
       <Table
         columns={fixedColumns}
-        data={[{}]}
+        data={[{ key: '1' }]}
         scroll={{
           x: 'max-content',
         }}
@@ -283,7 +311,7 @@ const Demo = () => {
       <br />
       <Table
         columns={columnsWithWidth}
-        data={[{}]}
+        data={[{ key: '1' }]}
         scroll={{
           x: 1200,
         }}
@@ -301,7 +329,7 @@ const Demo = () => {
       <br />
       <Table
         columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
-        data={[{}]}
+        data={[{ key: '1' }]}
         scroll={{
           x: 'max-content',
         }}
@@ -310,12 +338,26 @@ const Demo = () => {
       <br />
       <Table
         columns={columnsGrouped}
-        data={[{}, {}]}
+        data={[{ key: '1' }, { key: '2' }]}
         scroll={{
           x: 'max-content',
         }}
         sticky
       />
+      <br />
+      <h3>scroll.x is true</h3>
+      <p>https://github.com/ant-design/ant-design/issues/54894</p>
+      <Table
+        columns={columns3}
+        data={
+          [
+            { key: '1', name: 'Test', age: 1, address: '2' },
+            { key: '2', name: '0', age: 1, address: '2' },
+          ] as any
+        }
+        sticky
+        scroll={{ x: true }}
+      />
     </div>
   );
 };

src/Body/MeasureRow.tsx

@@ -2,6 +2,8 @@ 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 { useContext } from '@rc-component/context';
+import TableContext from '../context/TableContext';
 import type { ColumnType } from '../interface';
 
 export interface MeasureRowProps {
@@ -18,8 +20,9 @@ export default function MeasureRow({
   columns,
 }: MeasureRowProps) {
   const ref = React.useRef<HTMLTableRowElement>(null);
+  const { measureRowRender } = useContext(TableContext, ['measureRowRender']);
 
-  return (
+  const measureRow = (
     <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}>
       <ResizeObserver.Collection
         onBatchResize={infoList => {
@@ -44,4 +47,6 @@ export default function MeasureRow({
       </ResizeObserver.Collection>
     </tr>
   );
+
+  return measureRowRender ? measureRowRender(measureRow) : measureRow;
 }

src/ColGroup.tsx

@@ -40,7 +40,7 @@ function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<
     }
   }
 
-  return <colgroup>{cols}</colgroup>;
+  return cols.length > 0 ? <colgroup>{cols}</colgroup> : null;
 }
 
 export default ColGroup;

src/FixedHolder/index.tsx

@@ -36,7 +36,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   stickyTopOffset?: number;
   stickyBottomOffset?: number;
   stickyClassName?: string;
-  scrollTableStyle?: React.CSSProperties;
+  scrollX?: number | string | true;
   tableLayout?: TableLayout;
   onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
   children: (info: HeaderProps<RecordType>) => React.ReactNode;
@@ -61,7 +61,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     stickyTopOffset,
     stickyBottomOffset,
     stickyClassName,
-    scrollTableStyle,
+    scrollX,
     tableLayout = 'fixed',
     onScroll,
     maxContentScroll,
@@ -197,8 +197,9 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
       <TableComponent
         style={{
           tableLayout,
-          visibility: noData || mergedColumnWidth ? null : 'hidden',
-          ...scrollTableStyle,
+          minWidth: '100%',
+          // https://github.com/ant-design/ant-design/issues/54894
+          width: scrollX,
         }}
       >
         {colGroupNode}

src/Table.tsx

@@ -178,6 +178,12 @@ export interface TableProps<RecordType = any>
   internalRefs?: {
     body: React.MutableRefObject<HTMLDivElement>;
   };
+  /**
+   * @private Internal usage, may remove by refactor.
+   *
+   * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
+   */
+  measureRowRender?: (measureRow: React.ReactNode) => React.ReactNode;
 }
 
 function defaultEmpty() {
@@ -222,6 +228,9 @@ function Table<RecordType extends DefaultRecordType>(
     onRow,
     onHeaderRow,
 
+    // Measure Row
+    measureRowRender,
+
     // Events
     onScroll,
 
@@ -719,7 +728,7 @@ function Table<RecordType extends DefaultRecordType>(
       ...columnContext,
       direction,
       stickyClassName,
-      scrollTableStyle,
+      scrollX: mergedScrollX,
       tableLayout: mergedTableLayout,
       onScroll: onInternalScroll,
     };
@@ -911,6 +920,9 @@ function Table<RecordType extends DefaultRecordType>(
       childrenColumnName: mergedChildrenColumnName,
 
       rowHoverable,
+
+      // Measure Row
+      measureRowRender,
     }),
     [
       // Scroll
@@ -962,6 +974,8 @@ function Table<RecordType extends DefaultRecordType>(
       mergedChildrenColumnName,
 
       rowHoverable,
+
+      measureRowRender,
     ],
   );
 

src/context/TableContext.tsx

@@ -77,6 +77,9 @@ export interface TableContextProps<RecordType = any> {
   rowHoverable?: boolean;
 
   expandedRowOffset: ExpandableConfig<RecordType>['expandedRowOffset'];
+
+  // Measure Row
+  measureRowRender?: (measureRow: React.ReactNode) => React.ReactNode;
 }
 
 const TableContext = createContext<TableContextProps>();

tests/FixedHeader.spec.jsx

@@ -1,6 +1,6 @@
-import { render, act, fireEvent } from '@testing-library/react';
-import RcResizeObserver, { _rs } from '@rc-component/resize-observer';
-import { spyElementPrototype, spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
+import { render, act } from '@testing-library/react';
+import { _rs } from '@rc-component/resize-observer';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import Table, { INTERNAL_COL_DEFINE } from '../src';
 import { safeAct } from './utils';
@@ -42,7 +42,7 @@ describe('Table.FixedHeader', () => {
     const col1 = { dataIndex: 'light', width: 100 };
     const col2 = { dataIndex: 'bamboo', width: 200 };
     const col3 = { dataIndex: 'empty', width: 0 };
-    const { container, rerender } = render(
+    const { container } = render(
       <Table
         columns={[col1, col2, col3]}
         data={[{ light: 'bamboo', bamboo: 'light', key: 1 }]}
@@ -91,26 +91,13 @@ describe('Table.FixedHeader', () => {
     expect(tables[0].querySelector('colgroup col').className).toEqual('test-internal');
   });
 
-  it('show header when data is null', async () => {
-    const columns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-      },
-    ];
-
+  it('rtl', async () => {
     const { container } = render(
       <Table
-        columns={columns}
-        data={[]}
+        columns={[{ dataIndex: 'light', width: 100 }]}
+        data={[{ key: 0, light: 'bamboo' }]}
+        direction="rtl"
         scroll={{
-          x: true,
           y: 100,
         }}
       />,
@@ -208,4 +195,62 @@ describe('Table.FixedHeader', () => {
     expect(container.querySelectorAll('th.rc-table-cell-fix-start')).toHaveLength(2);
     expect(container.querySelectorAll('th.rc-table-cell-fix-end')).toHaveLength(1);
   });
+
+  it('should support measureRowRender to wrap MeasureRow with custom provider', async () => {
+    const FilterDropdown = ({ visible, onVisibleChange }) => (
+      <div className="test-filter-dropdown" style={{ display: visible ? 'block' : 'none' }}>
+        Filter Content
+        <button onClick={() => onVisibleChange && onVisibleChange(!visible)}>Toggle</button>
+      </div>
+    );
+
+    const columns = [
+      {
+        title: (
+          <div>
+            Name
+            <FilterDropdown visible={true} onVisibleChange={() => {}} />
+          </div>
+        ),
+        dataIndex: 'name',
+        key: 'name',
+        width: 100,
+      },
+    ];
+
+    const data = [
+      {
+        key: 1,
+        name: 'Jack',
+      },
+    ];
+
+    // Mock ConfigProvider-like wrapper
+    const measureRowRender = measureRow => (
+      <div data-testid="measure-row-wrapper" style={{ display: 'none' }}>
+        {measureRow}
+      </div>
+    );
+
+    const { container } = render(
+      <Table
+        columns={columns}
+        data={data}
+        sticky
+        scroll={{ x: true }}
+        measureRowRender={measureRowRender}
+      />,
+    );
+
+    await safeAct(container);
+
+    // Check that measureRowRender wrapper is applied
+    const measureRowWrapper = container.querySelectorAll('[data-testid="measure-row-wrapper"]');
+    expect(measureRowWrapper).toHaveLength(1);
+    expect(measureRowWrapper[0].style.display).toBe('none');
+
+    // Check that MeasureRow is inside the wrapper
+    const measureRowInWrapper = measureRowWrapper[0].querySelectorAll('.rc-table-measure-row');
+    expect(measureRowInWrapper).toHaveLength(1);
+  });
 });