chore: sync master into 5.x

Author: li-jia-nan

docs/demo/measureRowRender.md

@@ -0,0 +1,8 @@
+---
+title: measureRowRender
+nav:
+  title: measureRowRender
+  path: /demo
+---
+
+<code src="../examples/measureRowRender.tsx"></code>

docs/examples/measureRowRender.tsx

@@ -1,38 +1,47 @@
 import React from 'react';
 import Table from 'rc-table';
+import type { TableProps } from 'rc-table';
 
-// 示例：使用 measureRowRender 来隐藏 MeasureRow 中的弹层
-const MeasureRowRenderExample = () => {
-  const columns = [
-    {
-      title: (
-        <div>
-          Name
-          <div className="filter-dropdown" style={{ display: 'none' }}>
-            Filter Content
-          </div>
+const columns = [
+  {
+    title: (
+      <div>
+        Name
+        <div className="filter-dropdown" style={{ display: 'none' }}>
+          Filter Content
         </div>
-      ),
-      dataIndex: 'name',
-      key: 'name',
-      width: 100,
-    },
-    {
-      title: 'Age',
-      dataIndex: 'age',
-      key: 'age',
-      width: 80,
-    },
-  ];
+      </div>
+    ),
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+    width: 80,
+  },
+];
 
-  const data = [
-    { key: 1, name: 'John', age: 25 },
-    { key: 2, name: 'Jane', age: 30 },
-  ];
+const data = [
+  { key: 1, name: 'John', age: 25 },
+  { key: 2, name: 'Jane', age: 30 },
+  { key: 3, name: 'Jime', age: 35 },
+];
 
-  // 自定义 MeasureRow 渲染，隐藏弹层内容
-  const measureRowRender = measureRow => <div style={{ display: 'none' }}>{measureRow}</div>;
+// 自定义 MeasureRow 渲染，隐藏弹层内容
+const measureRowRender: TableProps['measureRowRender'] = measureRow => {
+  if (React.isValidElement(measureRow)) {
+    return React.cloneElement<any>(measureRow, {
+      style: { ...(measureRow.props as any).style, display: 'none' },
+    });
+  }
+  return measureRow;
+};
 
+// 示例：使用 measureRowRender 来隐藏 MeasureRow 中的弹层
+const MeasureRowRenderExample: React.FC = () => {
   return (
     <Table
       columns={columns}

src/FixedHolder/index.tsx

@@ -137,32 +137,13 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
 
   const mergedColumnWidth = useColumnWidth(colWidths, columCount);
 
-  const colGroupNode = useMemo(() => {
+  const isColGroupEmpty = useMemo<boolean>(() => {
     // 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,
-    colGroup,
-    combinationScrollBarSize,
-    columCount,
-    flattenColumnsWithScrollbar,
-  ]);
+    const noWidth =
+      !mergedColumnWidth || !mergedColumnWidth.length || mergedColumnWidth.every(w => !w);
+    return noData || noWidth;
+  }, [noData, mergedColumnWidth]);
 
   return (
     <div
@@ -183,7 +164,13 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
           width: scrollX,
         }}
       >
-        {colGroupNode}
+        {isColGroupEmpty ? null : (
+          <ColGroup
+            colWidths={[...mergedColumnWidth, combinationScrollBarSize]}
+            columCount={columCount + 1}
+            columns={flattenColumnsWithScrollbar}
+          />
+        )}
         {children({
           ...restProps,
           stickyOffsets: headerStickyOffsets,

src/interface.ts

@@ -143,7 +143,7 @@ type Component<P> =
   | React.ComponentType<P>
   | React.ForwardRefExoticComponent<P>
   | React.FC<P>
-  | keyof React.ReactHTML;
+  | keyof React.JSX.IntrinsicElements;
 
 export type CustomizeComponent = Component<any>;