From 11266dc82b3c42f1a5de6badfc4789d38b4c29a6 Mon Sep 17 00:00:00 2001 From: kodtLin <973672492@qq.com> Date: Fri, 19 Sep 2025 01:06:24 +0800 Subject: [PATCH 1/5] fix(MeasureRow): clone the column without ref so that ref can point to the real columnHeader. --- src/Body/MeasureRow.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index 3b9b864b6..e5a3d8961 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -36,12 +36,16 @@ const MeasureRow: React.FC = ({ > {columnsKey.map(columnKey => { const column = columns.find(col => col.key === columnKey); + const rawTitle = column?.title; + const titleForMeasure = React.isValidElement(rawTitle) + ? React.cloneElement(rawTitle, { ref: null }) + : rawTitle; return ( ); })} From 7c534bcc89003cade17840f0d36c6b246c6764f9 Mon Sep 17 00:00:00 2001 From: kodtLin <973672492@qq.com> Date: Sat, 20 Sep 2025 02:46:26 +0800 Subject: [PATCH 2/5] fix(Body/MeasureRow): fix the type error when clone ReactElement --- src/Body/MeasureRow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index e5a3d8961..269562226 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -38,7 +38,10 @@ const MeasureRow: React.FC = ({ const column = columns.find(col => col.key === columnKey); const rawTitle = column?.title; const titleForMeasure = React.isValidElement(rawTitle) - ? React.cloneElement(rawTitle, { ref: null }) + ? React.cloneElement( + rawTitle as React.ReactElement>, + { ref: null }, + ) : rawTitle; return ( Date: Mon, 22 Sep 2025 01:52:22 +0800 Subject: [PATCH 3/5] Refactor titleForMeasure assignment logic --- src/Body/MeasureRow.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index 269562226..1211839c6 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -37,11 +37,8 @@ const MeasureRow: React.FC = ({ {columnsKey.map(columnKey => { const column = columns.find(col => col.key === columnKey); const rawTitle = column?.title; - const titleForMeasure = React.isValidElement(rawTitle) - ? React.cloneElement( - rawTitle as React.ReactElement>, - { ref: null }, - ) + const titleForMeasure = React.isValidElement>(rawTitle) + ? React.cloneElement(rawTitle, { ref: null }) : rawTitle; return ( Date: Tue, 23 Sep 2025 22:54:53 +0800 Subject: [PATCH 4/5] refactor(MeasureRow): get columnHeader's real width. --- src/Body/MeasureCell.tsx | 19 ++++++++++++++----- src/Body/MeasureRow.tsx | 8 ++------ 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index c90ae34d4..c690fee04 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -5,19 +5,26 @@ import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; export interface MeasureCellProps { columnKey: React.Key; onColumnResize: (key: React.Key, width: number) => void; - title?: React.ReactNode; + columnIndex?: number; } const MeasureCell: React.FC = props => { - const { columnKey, onColumnResize, title } = props; - + const { columnKey, onColumnResize, columnIndex } = props; + const [width, setWidth] = React.useState(0); const cellRef = React.useRef(null); useLayoutEffect(() => { + if (columnIndex !== undefined) { + setWidth( + document + .querySelectorAll('.rc-table-thead >tr > .rc-table-cell') + [columnIndex]?.getClientRects()[0].width || 0, + ); + } if (cellRef.current) { onColumnResize(columnKey, cellRef.current.offsetWidth); } - }, []); + }, [columnIndex]); return ( @@ -25,7 +32,9 @@ const MeasureCell: React.FC = props => { ref={cellRef} style={{ paddingTop: 0, paddingBottom: 0, borderTop: 0, borderBottom: 0, height: 0 }} > -
{title || '\xa0'}
+
+ {'\xa0'} +
); diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index 1211839c6..32b7672a1 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -35,17 +35,13 @@ const MeasureRow: React.FC = ({ }} > {columnsKey.map(columnKey => { - const column = columns.find(col => col.key === columnKey); - const rawTitle = column?.title; - const titleForMeasure = React.isValidElement>(rawTitle) - ? React.cloneElement(rawTitle, { ref: null }) - : rawTitle; + const columnIndex = columns.findIndex(col => col.key === columnKey); return ( ); })} From 6434e7e8ec3c117e68041f3fb7a8fa925561781f Mon Sep 17 00:00:00 2001 From: keda <973672492@qq.com> Date: Tue, 23 Sep 2025 22:59:50 +0800 Subject: [PATCH 5/5] refactor(MeasureRow): get columnHeader's real width. --- src/Body/MeasureCell.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index c690fee04..2abaa406a 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -24,7 +24,7 @@ const MeasureCell: React.FC = props => { if (cellRef.current) { onColumnResize(columnKey, cellRef.current.offsetWidth); } - }, [columnIndex]); + }, []); return (