chore: sync antd-5.x to master

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

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;
@@ -79,6 +79,41 @@ const columns: ColumnType<RecordType>[] = [
  },
 ];
 
+const columnsWithWidth: ColumnType<RecordType>[] = [
+ { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+ { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+ { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+ { title: 'title4', dataIndex: 'd', key: 'd', width: 100 },
+];
+
+const columnsGrouped: ColumnsType<any> = [
+ {
+ 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' },
@@ -105,11 +140,7 @@ const data = [
 const Demo = () => {
  const container = useRef();
  return (
- <div
- style={{
- height: 10000,
- }}
- >
+ <div>
  <h2>Sticky</h2>
  <Table<RecordType>
  columns={columns}
@@ -212,6 +243,79 @@ const Demo = () => {
  suscipit asperiores, id ullam in iste soluta dignissimos vero incidunt, rem ex consectetur
  beatae totam aperiam. Sunt, laudantium?
  </div>
+
+ <h2>Sticky header with empty data</h2>
+ <Table
+ columns={fixedColumns}
+ data={[]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={fixedColumns}
+ data={[]}
+ scroll={{
+ x: 1200,
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={columnsWithWidth}
+ data={[]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={fixedColumns}
+ data={[{}]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={columnsWithWidth}
+ data={[{}]}
+ scroll={{
+ x: 1200,
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
+ data={[]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
+ data={[{}]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
+ <br />
+ <Table
+ columns={columnsGrouped}
+ data={[{}, {}]}
+ scroll={{
+ x: 'max-content',
+ }}
+ sticky
+ />
  </div>
  );
 };

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@rc-component/table",
- "version": "1.5.2",
+ "version": "1.5.3",
  "description": "table ui component for react",
  "engines": {
  "node": ">=8.x"

src/Body/MeasureCell.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import ResizeObserver from '@rc-component/resize-observer';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import type { ColumnType } from '../interface';
 
 export interface MeasureCellProps {
  columnKey: React.Key;
  onColumnResize: (key: React.Key, width: number) => void;
+ column?: ColumnType<any>;
 }
 
-export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) {
  const cellRef = React.useRef<HTMLTableCellElement>();
 
  useLayoutEffect(() => {
@@ -18,8 +20,13 @@ export default function MeasureCell({ columnKey, onColumnResize }: MeasureCellPr
 
  return (
  <ResizeObserver data={columnKey}>
- <td ref={cellRef} style={{ padding: 0, border: 0, height: 0 }}>
- <div style={{ height: 0, overflow: 'hidden' }}>&nbsp;</div>
+ <td
+ ref={cellRef}
+ style={{ paddingTop: 0, paddingBottom: 0, borderTop: 0, borderBottom: 0, height: 0 }}
+ >
+ <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}>
+ {column?.title || '\xa0'}
+ </div>
  </td>
  </ResizeObserver>
  );

src/Body/MeasureRow.tsx

@@ -2,23 +2,25 @@ import * as React from 'react';
 import ResizeObserver from '@rc-component/resize-observer';
 import MeasureCell from './MeasureCell';
 import isVisible from '@rc-component/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<any>[];
 }
 
-export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: MeasureCellProps) {
+export default function MeasureRow({
+ prefixCls,
+ columnsKey,
+ onColumnResize,
+ columns,
+}: MeasureRowProps) {
  const ref = React.useRef<HTMLTableRowElement>(null);
 
  return (
- <tr
- aria-hidden="true"
- className={`${prefixCls}-measure-row`}
- style={{ height: 0, fontSize: 0 }}
- ref={ref}
- >
+ <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}>
  <ResizeObserver.Collection
  onBatchResize={infoList => {
  if (isVisible(ref.current)) {
@@ -28,9 +30,17 @@ export default function MeasureRow({ prefixCls, columnsKey, onColumnResize }: Me
  }
  }}
  >
- {columnsKey.map(columnKey => (
- <MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} />
- ))}
+ {columnsKey.map(columnKey => {
+ const column = columns.find(col => col.key === columnKey);
+ return (
+ <MeasureCell
+ key={columnKey}
+ columnKey={columnKey}
+ onColumnResize={onColumnResize}
+ column={column}
+ />
+ );
+ })}
  </ResizeObserver.Collection>
  </tr>
  );

src/Body/index.tsx

@@ -146,6 +146,7 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
  prefixCls={prefixCls}
  columnsKey={columnsKey}
  onColumnResize={onColumnResize}
+ columns={flattenColumns}
  />
  )}
 

src/ColGroup.tsx

@@ -22,7 +22,7 @@ function ColGroup<RecordType>({ colWidths, columns, columCount }: ColGroupProps<
  for (let i = len - 1; i >= 0; i -= 1) {
  const width = colWidths[i];
  const column = columns && columns[i];
- let additionalProps;
+ let additionalProps: Record<string, unknown>;
  let minWidth: number;
  if (column) {
  additionalProps = column[INTERNAL_COL_DEFINE];

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(() => {
@@ -36,6 +36,8 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
  stickyTopOffset?: number;
  stickyBottomOffset?: number;
  stickyClassName?: string;
+ scrollTableStyle?: React.CSSProperties;
+ tableLayout?: TableLayout;
  onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
  children: (info: HeaderProps<RecordType>) => React.ReactNode;
 }
@@ -59,6 +61,8 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  stickyTopOffset,
  stickyBottomOffset,
  stickyClassName,
+ scrollTableStyle,
+ tableLayout = 'fixed',
  onScroll,
  maxContentScroll,
  children,
@@ -115,12 +119,6 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  };
  }, []);
 
- // Check if all flattenColumns has width
- const allFlattenColumnsWithWidth = React.useMemo(
- () => flattenColumns.every(column => column.width),
- [flattenColumns],
- );
-
  // Add scrollbar column
  const lastColumn = flattenColumns[flattenColumns.length - 1];
  const ScrollBarColumn: ColumnType<unknown> & { scrollbar: true } = {
@@ -158,6 +156,32 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
 
  const mergedColumnWidth = useColumnWidth(colWidths, columCount);
 
+ const colGroupNode = useMemo(() => {
+ // use original ColGroup if no data or no calculated column width, otherwise use calculated column width
+ // Return original colGroup if no data, or mergedColumnWidth is empty, or all widths are falsy
+ if (
+ noData ||
+ !mergedColumnWidth ||
+ mergedColumnWidth.length === 0 ||
+ mergedColumnWidth.every(width => !width)
+ ) {
+ return ColGroup;
+ }
+ return (
+ <ColGroup
+ colWidths={[...mergedColumnWidth, combinationScrollBarSize]}
+ columCount={columCount + 1}
+ columns={flattenColumnsWithScrollbar}
+ />
+ );
+ }, [
+ noData,
+ mergedColumnWidth,
+ combinationScrollBarSize,
+ columCount,
+ flattenColumnsWithScrollbar,
+ ]);
+
  return (
  <div
  style={{
@@ -172,17 +196,12 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
  >
  <TableComponent
  style={{
- tableLayout: 'fixed',
+ tableLayout,
  visibility: noData || mergedColumnWidth ? null : 'hidden',
+ ...scrollTableStyle,
  }}
  >
- {(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (
- <ColGroup
- colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}
- columCount={columCount + 1}
- columns={flattenColumnsWithScrollbar}
- />
- )}
+ {colGroupNode}
  {children({
  ...restProps,
  stickyOffsets: headerStickyOffsets,

src/Table.tsx

@@ -719,6 +719,8 @@ function Table<RecordType extends DefaultRecordType>(
  ...columnContext,
  direction,
  stickyClassName,
+ scrollTableStyle,
+ tableLayout: mergedTableLayout,
  onScroll: onInternalScroll,
  };