diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index 7b65acd11..d7c9280a8 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import classNames from 'classnames'; -import ResizeObserver from 'rc-resize-observer'; import Cell from '../Cell'; import TableContext from '../context/TableContext'; import BodyContext from '../context/BodyContext'; @@ -13,7 +12,6 @@ import { Key, GetRowKey, } from '../interface'; -import ResizeContext from '../context/ResizeContext'; import { getCellFixedInfo } from '../utils/fixUtil'; import ExpandedRow from './ExpandedRow'; @@ -22,8 +20,6 @@ export interface BodyRowProps { index: number; className?: string; style?: React.CSSProperties; - /** Set if need collect column width info */ - measureColumnWidth: boolean; stickyOffsets: StickyOffsets; recordKey: Key; expandedKeys: Set; @@ -51,7 +47,6 @@ function BodyRow(props: BodyRowP indent = 0, rowComponent: RowComponent, cellComponent, - measureColumnWidth, childrenColumnName, } = props; const { prefixCls } = React.useContext(TableContext); @@ -70,7 +65,6 @@ function BodyRow(props: BodyRowP expandedRowRender, expandIconColumnIndex, } = React.useContext(BodyContext); - const { onColumnResize } = React.useContext(ResizeContext); const [expandRended, setExpandRended] = React.useState(false); const expanded = props.expandedKeys.has(props.recordKey); @@ -165,7 +159,7 @@ function BodyRow(props: BodyRowP additionalCellProps = column.onCell(record, index); } - const cellNode = ( + return ( (props: BodyRowP additionalProps={additionalCellProps} /> ); - - if (measureColumnWidth) { - return ( - { - onColumnResize(key, width); - }} - > - {cellNode} - - ); - } - - return cellNode; })} ); @@ -243,7 +222,6 @@ function BodyRow(props: BodyRowP recordKey={subKey} index={subIndex} indent={indent + 1} - measureColumnWidth={false} /> ); }, diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 9eb9947b3..7598ecc2b 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; +import ResizeObserver from 'rc-resize-observer'; import BodyRow from './BodyRow'; import TableContext from '../context/TableContext'; import { GetRowKey, StickyOffsets, Key, GetComponentProps } from '../interface'; import ExpandedRow from './ExpandedRow'; import BodyContext from '../context/BodyContext'; +import { getColumnsKey } from '../utils/valueUtil'; +import ResizeContext from '../context/ResizeContext'; export interface BodyProps { data: RecordType[]; @@ -28,6 +31,7 @@ function Body({ emptyNode, childrenColumnName, }: BodyProps) { + const { onColumnResize } = React.useContext(ResizeContext); const { prefixCls, getComponent } = React.useContext(TableContext); const { fixHeader, fixColumn, flattenColumns, componentWidth } = React.useContext(BodyContext); @@ -48,7 +52,6 @@ function Body({ record={record} recordKey={key} index={index} - measureColumnWidth={measureColumnWidth && index === 0} rowComponent={trComponent} cellComponent={tdComponent} stickyOffsets={stickyOffsets} @@ -78,7 +81,29 @@ function Body({ ); } - return {rows}; + const columnsKey = getColumnsKey(flattenColumns); + + return ( + + {/* Measure body column width with additional hidden col */} + {measureColumnWidth && ( + + {columnsKey.map(columnKey => ( + { + onColumnResize(columnKey, width); + }} + > + + + ))} + + )} + + {rows} + + ); }, [ data, prefixCls, diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 81b308397..a3aa05bb1 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -5,13 +5,9 @@ import TableContext from '../context/TableContext'; function parseHeaderRows( rootColumns: ColumnsType, - measureColumnWidth: boolean, ): CellType[][] { const rows: CellType[][] = []; - // Record which cell should wrapped with resize observer used for fixed - const measureCells: boolean[] = []; - function fillRowCells( columns: ColumnsType, colIndex: number, @@ -54,12 +50,6 @@ function parseHeaderRows( currentColIndex += colSpan; - // Measure only happen on single node - if (measureColumnWidth && colSpan === 1 && !measureCells[cell.colStart]) { - cell.measure = true; - measureCells[cell.colStart] = true; - } - return colSpan; }); @@ -87,7 +77,6 @@ export interface HeaderProps { columns: ColumnsType; flattenColumns: ColumnType[]; stickyOffsets: StickyOffsets; - measureColumnWidth?: boolean; onHeaderRow: GetComponentProps[]>; } @@ -95,14 +84,10 @@ function Header({ stickyOffsets, columns, flattenColumns, - measureColumnWidth, onHeaderRow, }: HeaderProps): React.ReactElement { const { getComponent } = React.useContext(TableContext); - const rows: CellType[][] = React.useMemo( - () => parseHeaderRows(columns, measureColumnWidth), - [columns], - ); + const rows: CellType[][] = React.useMemo(() => parseHeaderRows(columns), [columns]); const WrapperComponent = getComponent(['header', 'wrapper'], 'thead'); const trComponent = getComponent(['header', 'row'], 'tr'); diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx index a84cb7a71..15caf9d2a 100644 --- a/src/Header/HeaderRow.tsx +++ b/src/Header/HeaderRow.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import ResizeObserver from 'rc-resize-observer'; import Cell from '../Cell'; import { CellType, @@ -10,7 +9,6 @@ import { } from '../interface'; import TableContext from '../context/TableContext'; import { getCellFixedInfo } from '../utils/fixUtil'; -import ResizeContext from '../context/ResizeContext'; import { getColumnsKey } from '../utils/valueUtil'; export interface RowProps { @@ -33,7 +31,6 @@ function HeaderRow({ index, }: RowProps) { const { prefixCls } = React.useContext(TableContext); - const { onColumnResize } = React.useContext(ResizeContext); let rowProps: React.HTMLAttributes; if (onHeaderRow) { @@ -45,7 +42,7 @@ function HeaderRow({ return ( {cells.map((cell: CellType, cellIndex) => { - const { column, measure } = cell; + const { column } = cell; const fixedInfo = getCellFixedInfo( cell.colStart, cell.colEnd, @@ -58,7 +55,7 @@ function HeaderRow({ additionalProps = cell.column.onHeaderCell(column); } - let cellNode = ( + return ( ({ additionalProps={additionalProps} /> ); - - if (measure) { - cellNode = ( - { - onColumnResize(columnsKey[cell.colStart], width); - }} - > - {cellNode} - - ); - } - - return cellNode; })} ); diff --git a/src/Table.tsx b/src/Table.tsx index 05cecaef4..b3b7b1a70 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -560,13 +560,7 @@ function Table(props: TableProps {bodyColGroup} - {showHeader !== false && ( -
- )} + {showHeader !== false &&
} {bodyTable} {footerTable} diff --git a/src/interface.ts b/src/interface.ts index 150fa8b62..1ac8aec5c 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -46,7 +46,6 @@ export interface CellType { hasSubColumns?: boolean; colStart?: number; colEnd?: number; - measure?: boolean; } export interface RenderedCell { diff --git a/tests/__snapshots__/ExpandRow.spec.js.snap b/tests/__snapshots__/ExpandRow.spec.js.snap index 72d4645fe..903f3ae4c 100644 --- a/tests/__snapshots__/ExpandRow.spec.js.snap +++ b/tests/__snapshots__/ExpandRow.spec.js.snap @@ -154,6 +154,23 @@ exports[`Table.Expand renders fixed column correctly work 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -841,6 +923,47 @@ exports[`Table.FixedColumn renders correctly scrollXY - with data 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap index dca9d8504..8b5fe93e4 100644 --- a/tests/__snapshots__/Table.spec.js.snap +++ b/tests/__snapshots__/Table.spec.js.snap @@ -140,6 +140,20 @@ exports[`Table.Basic custom components renders fixed column and header correctly class="rc-table-tbody" name="my-body-wrapper" > + + + + +