diff --git a/docs/examples/stickyHeader.tsx b/docs/examples/stickyHeader.tsx index bed178ea3..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,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' }, @@ -270,6 +298,24 @@ 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..81865c1f1 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,13 @@ export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellPr return ( - ); diff --git a/src/Body/MeasureRow.tsx b/src/Body/MeasureRow.tsx index ba95c961d..f7be5370f 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 { +export interface MeasureRowProps { 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, +}: MeasureRowProps) { 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, }; diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index 9ee888bc2..5c0ee296d 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,40 +1422,40 @@ 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..8741bf5b8 100644 --- a/tests/__snapshots__/Table.spec.jsx.snap +++ b/tests/__snapshots__/Table.spec.jsx.snap @@ -285,33 +285,33 @@ LoadedCheerio {
-
 
+ 		+
+ {column?.title || '\xa0'} +