feat: add measureRowRender prop

Author: afc163

docs/examples/measureRowRender.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Table } from 'rc-table';
+import { ConfigProvider } from 'antd';
+
+// 示例：使用 measureRowRender 包裹 ConfigProvider 来隐藏 MeasureRow 中的弹层
+const MeasureRowRenderExample = () => {
+  const columns = [
+    {
+      title: (
+        <div>
+          Name
+          <ConfigProvider
+            getPopupContainer={node => node} // 将弹层渲染到 MeasureRow 内部
+          >
+            <div>Filter Dropdown</div>
+          </ConfigProvider>
+        </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 渲染，包裹 ConfigProvider 来隐藏弹层
+  const measureRowRender = measureRow => (
+    <ConfigProvider
+      getPopupContainer={() => {
+        // 创建一个隐藏的容器来承载弹层
+        const hiddenContainer = document.createElement('div');
+        hiddenContainer.style.display = 'none';
+        hiddenContainer.style.position = 'absolute';
+        hiddenContainer.style.left = '-9999px';
+        hiddenContainer.style.top = '-9999px';
+        document.body.appendChild(hiddenContainer);
+        return hiddenContainer;
+      }}
+    >
+      {measureRow}
+    </ConfigProvider>
+  );
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      sticky
+      scroll={{ x: true }}
+      measureRowRender={measureRowRender}
+    />
+  );
+};
+
+export default MeasureRowRenderExample;

src/Body/MeasureRow.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
 import MeasureCell from './MeasureCell';
 import isVisible from 'rc-util/lib/Dom/isVisible';
+import { useContext } from '@rc-component/context';
+import TableContext from '../context/TableContext';
 import type { ColumnType } from '../interface';
 
 export interface MeasureRowProps {
@@ -18,9 +20,10 @@ export default function MeasureRow({
   columns,
 }: MeasureRowProps) {
   const ref = React.useRef<HTMLTableRowElement>(null);
+  const { measureRowRender } = useContext(TableContext, ['measureRowRender']);
 
-  return (
-    <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}>
+  const measureRow = (
+    <tr className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref} tabIndex={-1}>
       <ResizeObserver.Collection
         onBatchResize={infoList => {
           if (isVisible(ref.current)) {
@@ -44,4 +47,6 @@ export default function MeasureRow({
       </ResizeObserver.Collection>
     </tr>
   );
+
+  return measureRowRender ? measureRowRender(measureRow) : measureRow;
 }

src/Table.tsx

@@ -168,6 +168,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() {
@@ -210,6 +216,9 @@ function Table<RecordType extends DefaultRecordType>(
     onRow,
     onHeaderRow,
 
+    // Measure Row
+    measureRowRender,
+
     // Events
     onScroll,
 
@@ -850,6 +859,9 @@ function Table<RecordType extends DefaultRecordType>(
       childrenColumnName: mergedChildrenColumnName,
 
       rowHoverable,
+
+      // Measure Row
+      measureRowRender,
     }),
     [
       // Scroll
@@ -901,6 +913,8 @@ function Table<RecordType extends DefaultRecordType>(
       mergedChildrenColumnName,
 
       rowHoverable,
+
+      measureRowRender,
     ],
   );
 

src/context/TableContext.tsx

@@ -72,6 +72,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

@@ -265,4 +265,62 @@ describe('Table.FixedHeader', () => {
       'rc-table-cell-fix-left-last',
     );
   });
+
+  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 wrapper = mount(
+      <Table
+        columns={columns}
+        data={data}
+        sticky
+        scroll={{ x: true }}
+        measureRowRender={measureRowRender}
+      />,
+    );
+
+    await safeAct(wrapper);
+
+    // Check that measureRowRender wrapper is applied
+    const measureRowWrapper = wrapper.find('[data-testid="measure-row-wrapper"]');
+    expect(measureRowWrapper).toHaveLength(1);
+    expect(measureRowWrapper.prop('style').display).toBe('none');
+
+    // Check that MeasureRow is inside the wrapper
+    const measureRowInWrapper = measureRowWrapper.find('.rc-table-measure-row');
+    expect(measureRowInWrapper).toHaveLength(1);
+  });
 });