From ff3dedfe5c4863dac7497cc13839401a461cf9fc Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:18:51 +0800 Subject: [PATCH 1/9] fix: insert header content into body measure rows for column width calculation --- docs/examples/stickyHeader.tsx | 9 +++++++++ src/Body/MeasureCell.tsx | 10 +++++++--- src/Body/MeasureRow.tsx | 30 ++++++++++++++++++++---------- src/Body/index.tsx | 1 + src/FixedHolder/index.tsx | 6 ++++-- src/Table.tsx | 1 + 6 files changed, 42 insertions(+), 15 deletions(-) diff --git a/docs/examples/stickyHeader.tsx b/docs/examples/stickyHeader.tsx index bed178ea3..38887f212 100644 --- a/docs/examples/stickyHeader.tsx +++ b/docs/examples/stickyHeader.tsx @@ -270,6 +270,15 @@ const Demo = () => { }} sticky /> +
+ ({ ...column, width: undefined }))} + data={[{}]} + scroll={{ + x: 'max-content', + }} + sticky + /> ); }; diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index d96b3508b..2dfb738b3 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; import ResizeObserver from 'rc-resize-observer'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import type { ColumnType } from '../interface'; export interface MeasureCellProps { columnKey: React.Key; onColumnResize: (key: React.Key, width: number) => void; + column?: ColumnType; } -export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) { +export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) { const cellRef = React.useRef(); useLayoutEffect(() => { @@ -18,8 +20,10 @@ export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellPr return ( - ); diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index ba95c961d..92a07af76 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -2,23 +2,25 @@ import * as React from 'react'; import ResizeObserver from 'rc-resize-observer'; import MeasureCell from './MeasureCell'; import isVisible from 'rc-util/lib/Dom/isVisible'; +import type { ColumnType } from '../interface'; export interface MeasureCellProps { prefixCls: string; onColumnResize: (key: React.Key, width: number) => void; columnsKey: React.Key[]; + columns: readonly ColumnType[]; } -export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) { +export default function MeasureRow({ + prefixCls, + columnsKey, + onColumnResize, + columns, +}: MeasureCellProps) { const ref = React.useRef(null); return ( - + { if (isVisible(ref.current)) { @@ -28,9 +30,17 @@ export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: Me } }} > - {columnsKey.map(columnKey => ( - - ))} + {columnsKey.map(columnKey => { + const column = columns.find(col => col.key === columnKey); + return ( + + ); + })} ); diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 0a08edbeb..75991350c 100644 --- a/src/Body/index.tsx +++ b/src/Body/index.tsx @@ -133,6 +133,7 @@ function Body(props: BodyProps) { prefixCls={prefixCls} columnsKey={columnsKey} onColumnResize={onColumnResize} + columns={flattenColumns} /> )} diff --git a/src/FixedHolder/index.tsx b/src/FixedHolder/index.tsx index f98cc3686..48f66b4ae 100644 --- a/src/FixedHolder/index.tsx +++ b/src/FixedHolder/index.tsx @@ -7,7 +7,7 @@ import ColGroup from '../ColGroup'; import TableContext from '../context/TableContext'; import type { HeaderProps } from '../Header/Header'; import devRenderTimes from '../hooks/useRenderTimes'; -import type { ColumnsType, ColumnType, Direction } from '../interface'; +import type { ColumnsType, ColumnType, Direction, TableLayout } from '../interface'; function useColumnWidth(colWidths: readonly number[], columCount: number) { return useMemo(() => { @@ -35,6 +35,7 @@ export interface FixedHeaderProps extends HeaderProps { stickyBottomOffset?: number; stickyClassName?: string; scrollTableStyle?: React.CSSProperties; + tableLayout?: TableLayout; onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void; children: (info: HeaderProps) => React.ReactNode; colGroup?: React.ReactNode; @@ -60,6 +61,7 @@ const FixedHolder = React.forwardRef>((pro stickyBottomOffset, stickyClassName, scrollTableStyle, + tableLayout = 'fixed', onScroll, children, ...restProps @@ -148,7 +150,7 @@ const FixedHolder = React.forwardRef>((pro > ( direction, stickyClassName, scrollTableStyle, + tableLayout: mergedTableLayout, onScroll: onInternalScroll, }; From 89114f55387347214b95a216725731d42de445a3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:19:21 +0800 Subject: [PATCH 2/9] test: update snapshot --- tests/__snapshots__/ExpandRow.spec.jsx.snap | 130 ++--- tests/__snapshots__/FixedColumn.spec.tsx.snap | 472 +++++++++--------- tests/__snapshots__/Table.spec.jsx.snap | 20 +- 3 files changed, 311 insertions(+), 311 deletions(-) diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index 9ee888bc2..0208c61fa 100644 --- a/tests/__snapshots__/ExpandRow.spec.jsx.snap +++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap @@ -189,42 +189,42 @@ LoadedCheerio { @@ -374,42 +374,42 @@ LoadedCheerio { @@ -678,42 +678,42 @@ LoadedCheerio { @@ -1234,42 +1234,42 @@ LoadedCheerio { @@ -1422,42 +1422,42 @@ LoadedCheerio { diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap index f2c5abeca..1d6113373 100644 --- a/tests/__snapshots__/FixedColumn.spec.tsx.snap +++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap @@ -123,114 +123,114 @@ LoadedCheerio { @@ -947,114 +947,114 @@ LoadedCheerio { @@ -1766,114 +1766,114 @@ LoadedCheerio { @@ -2109,114 +2109,114 @@ LoadedCheerio { @@ -2961,114 +2961,114 @@ LoadedCheerio { @@ -3207,42 +3207,42 @@ exports[`Table.FixedColumn > shadow should be shown when there are columns where @@ -5757,78 +5757,78 @@ exports[`Table.FixedColumn > shadow should display correctly 1`] = ` @@ -11749,42 +11749,42 @@ exports[`Table.FixedColumn > shadow should display correctly 2`] = ` diff --git a/tests/__snapshots__/Table.spec.jsx.snap b/tests/__snapshots__/Table.spec.jsx.snap index f1c2c3bfc..ada2595b4 100644 --- a/tests/__snapshots__/Table.spec.jsx.snap +++ b/tests/__snapshots__/Table.spec.jsx.snap @@ -285,33 +285,33 @@ LoadedCheerio { From 50b0b5b3d5bc48c6143c5fa5780cec6c671afb00 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:33:57 +0800 Subject: [PATCH 3/9] test: update snapshot --- src/Body/MeasureCell.tsx | 2 +- tests/__snapshots__/ExpandRow.spec.jsx.snap | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index 2dfb738b3..010459f5a 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -22,7 +22,7 @@ export default function MeasureCell({ columnKey, onColumnResize, column }: Measu diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index 0208c61fa..f588cfa78 100644 --- a/tests/__snapshots__/ExpandRow.spec.jsx.snap +++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap @@ -197,7 +197,7 @@ LoadedCheerio {
-   +  
From 8ec72dba0f0fc320d66c3cec8a4e121236572903 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:37:39 +0800 Subject: [PATCH 4/9] Update src/Body/MeasureRow.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- src/Body/MeasureRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index 92a07af76..559139c96 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -4,7 +4,7 @@ import MeasureCell from './MeasureCell'; import isVisible from 'rc-util/lib/Dom/isVisible'; import type { ColumnType } from '../interface'; -export interface MeasureCellProps { +export interface MeasureRowProps { prefixCls: string; onColumnResize: (key: React.Key, width: number) => void; columnsKey: React.Key[]; From 4768d398110859c0e4500e6262473be2c3e09743 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:38:00 +0800 Subject: [PATCH 5/9] Update src/Body/MeasureRow.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> --- src/Body/MeasureRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index 559139c96..f7be5370f 100644 --- a/src/Body/MeasureRow.tsx +++ b/src/Body/MeasureRow.tsx @@ -16,7 +16,7 @@ export default function MeasureRow({ columnsKey, onColumnResize, columns, -}: MeasureCellProps) { +}: MeasureRowProps) { const ref = React.useRef(null); return ( From 9fe13b6ec84f4388f033500f44eab207d7f33d4c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 17:36:56 +0800 Subject: [PATCH 6/9] test: update snapshot --- src/Body/MeasureCell.tsx | 5 +- tests/__snapshots__/ExpandRow.spec.jsx.snap | 40 ++--- tests/__snapshots__/FixedColumn.spec.tsx.snap | 152 +++++++++--------- tests/__snapshots__/Table.spec.jsx.snap | 6 +- 4 files changed, 103 insertions(+), 100 deletions(-) diff --git a/src/Body/MeasureCell.tsx b/src/Body/MeasureCell.tsx index 010459f5a..81865c1f1 100644 --- a/src/Body/MeasureCell.tsx +++ b/src/Body/MeasureCell.tsx @@ -20,7 +20,10 @@ export default function MeasureCell({ columnKey, onColumnResize, column }: Measu return ( -
-
 
+ 		+
+ {column?.title || ' '} +
- {column?.title || ' '} + {column?.title || '\xa0'}
-   +   -   +   -   +   -   +  
+
{column?.title || '\xa0'}
diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index f588cfa78..5c0ee296d 100644 --- a/tests/__snapshots__/ExpandRow.spec.jsx.snap +++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap @@ -192,7 +192,7 @@ LoadedCheerio { style="height: 0px;" >
shadow should be shown when there are columns where style="height: 0px;" >
shadow should be shown when there are columns where
shadow should be shown when there are columns where
shadow should be shown when there are columns where
shadow should display correctly 1`] = ` style="height: 0px;" >
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 1`] = `
shadow should display correctly 2`] = ` style="height: 0px;" >
shadow should display correctly 2`] = `
shadow should display correctly 2`] = `
shadow should display correctly 2`] = `
Date: Mon, 1 Sep 2025 17:43:19 +0800 Subject: [PATCH 7/9] feat: add grouped columns example with sticky header support --- docs/examples/stickyHeader.tsx | 37 ++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/examples/stickyHeader.tsx b/docs/examples/stickyHeader.tsx index 38887f212..3a5815c30 100644 --- a/docs/examples/stickyHeader.tsx +++ b/docs/examples/stickyHeader.tsx @@ -86,6 +86,34 @@ const columnsWithWidth: ColumnType[] = [ { title: 'title4', dataIndex: 'd', key: 'd', width: 100 }, ]; +const columnsGrouped: ColumnsType = [ + { + title: '', + dataIndex: 'productType', + key: 'productType', + rowSpan: 2, + rowScope: 'row', + }, + { + title: 'Mars', + dataIndex: 'mars', + key: 'mars', + children: [ + { title: 'ProducedProducedProduced', dataIndex: 'producedMars', key: 'producedMars' }, + { title: 'Sold', dataIndex: 'soldMars', key: 'soldMars' }, + ], + }, + { + title: 'Venus', + dataIndex: 'venus', + key: 'venus', + children: [ + { title: 'Produced Produced', dataIndex: 'producedVenus', key: 'producedVenus' }, + { title: 'Sold Sold Sold Sold', dataIndex: 'soldVenus', key: 'soldVenus' }, + ], + }, +]; + const data = [ { a: '123', key: '1' }, { a: 'cdd', b: 'edd', key: '2' }, @@ -279,6 +307,15 @@ const Demo = () => { }} sticky /> +
+ ); }; From 5ca983099d731233c0a2384b0dcb3c41759d6e36 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 18:17:04 +0800 Subject: [PATCH 8/9] fix type --- docs/examples/stickyHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples/stickyHeader.tsx b/docs/examples/stickyHeader.tsx index 3a5815c30..8d122caca 100644 --- a/docs/examples/stickyHeader.tsx +++ b/docs/examples/stickyHeader.tsx @@ -86,7 +86,7 @@ const columnsWithWidth: ColumnType[] = [ { title: 'title4', dataIndex: 'd', key: 'd', width: 100 }, ]; -const columnsGrouped: ColumnsType = [ +const columnsGrouped: ColumnType = [ { title: '', dataIndex: 'productType', From f7ddcd75b56a5d78246f13b56617e284bcccaf2e Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Sep 2025 18:25:59 +0800 Subject: [PATCH 9/9] fix type --- docs/examples/stickyHeader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/examples/stickyHeader.tsx b/docs/examples/stickyHeader.tsx index 8d122caca..52f285675 100644 --- a/docs/examples/stickyHeader.tsx +++ b/docs/examples/stickyHeader.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import Table from 'rc-table'; import '../../assets/index.less'; -import type { ColumnType } from '@/interface'; +import type { ColumnType, ColumnsType } from '@/interface'; interface RecordType { a?: string; @@ -86,7 +86,7 @@ const columnsWithWidth: ColumnType[] = [ { title: 'title4', dataIndex: 'd', key: 'd', width: 100 }, ]; -const columnsGrouped: ColumnType = [ +const columnsGrouped: ColumnsType = [ { title: '', dataIndex: 'productType',