diff --git a/docs/examples/measureRowRender.tsx b/docs/examples/measureRowRender.tsx new file mode 100644 index 000000000..c57557a54 --- /dev/null +++ b/docs/examples/measureRowRender.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import Table from 'rc-table'; + +// 示例:使用 measureRowRender 来隐藏 MeasureRow 中的弹层 +const MeasureRowRenderExample = () => { + const columns = [ + { + title: ( +
+ Name +
+ Filter Content +
+
+ ), + 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 =>
{measureRow}
; + + return ( + + ); +}; + +export default MeasureRowRenderExample; diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index f7be5370f..b2541dbdb 100644 --- a/src/Body/MeasureRow.tsx +++ b/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,8 +20,9 @@ export default function MeasureRow({ columns, }: MeasureRowProps) { const ref = React.useRef(null); + const { measureRowRender } = useContext(TableContext, ['measureRowRender']); - return ( + const measureRow = ( { @@ -44,4 +47,6 @@ export default function MeasureRow({ ); + + return measureRowRender ? measureRowRender(measureRow) : measureRow; } diff --git a/src/Table.tsx b/src/Table.tsx index 7a2ca550a..a1e042486 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -168,6 +168,12 @@ export interface TableProps internalRefs?: { body: React.MutableRefObject; }; + /** + * @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( onRow, onHeaderRow, + // Measure Row + measureRowRender, + // Events onScroll, @@ -850,6 +859,9 @@ function Table( childrenColumnName: mergedChildrenColumnName, rowHoverable, + + // Measure Row + measureRowRender, }), [ // Scroll @@ -901,6 +913,8 @@ function Table( mergedChildrenColumnName, rowHoverable, + + measureRowRender, ], ); diff --git a/src/context/TableContext.tsx b/src/context/TableContext.tsx index d15807dde..98114565f 100644 --- a/src/context/TableContext.tsx +++ b/src/context/TableContext.tsx @@ -72,6 +72,9 @@ export interface TableContextProps { rowHoverable?: boolean; expandedRowOffset: ExpandableConfig['expandedRowOffset']; + + // Measure Row + measureRowRender?: (measureRow: React.ReactNode) => React.ReactNode; } const TableContext = createContext(); diff --git a/tests/FixedHeader.spec.jsx b/tests/FixedHeader.spec.jsx index c3d3dd8f4..2796348ce 100644 --- a/tests/FixedHeader.spec.jsx +++ b/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 }) => ( +
+ Filter Content + +
+ ); + + const columns = [ + { + title: ( +
+ Name + {}} /> +
+ ), + dataIndex: 'name', + key: 'name', + width: 100, + }, + ]; + + const data = [ + { + key: 1, + name: 'Jack', + }, + ]; + + // Mock ConfigProvider-like wrapper + const measureRowRender = measureRow => ( +
+ {measureRow} +
+ ); + + const wrapper = mount( +
, + ); + + 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); + }); });