diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index c90ae34d4..2abaa406a 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -5,15 +5,22 @@ 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); } @@ -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 3b9b864b6..32b7672a1 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -35,13 +35,13 @@ const MeasureRow: React.FC = ({ }} > {columnsKey.map(columnKey => { - const column = columns.find(col => col.key === columnKey); + const columnIndex = columns.findIndex(col => col.key === columnKey); return ( ); })}