fix: fix sticky header column width with empty data (#1323)

Co-authored-by: Copilot <[email protected]>

Author: afc163

docs/examples/stickyHeader.tsx

@@ -79,6 +79,13 @@ 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 data = [
   { a: '123', key: '1' },
   { a: 'cdd', b: 'edd', key: '2' },
@@ -105,11 +112,7 @@ const data = [
 const Demo = () => {
   const container = useRef();
   return (
-    <div
-      style={{
-        height: 10000,
-      }}
-    >
+    <div>
       <h2>Sticky</h2>
       <Table<RecordType>
         columns={columns}
@@ -212,6 +215,52 @@ 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
+      />
     </div>
   );
 };

src/FixedHolder/index.tsx

@@ -27,7 +27,6 @@ function useColumnWidth(colWidths: readonly number[], columCount: number) {
 export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   className: string;
   noData: boolean;
-  maxContentScroll: boolean;
   colWidths: readonly number[];
   columCount: number;
   direction: Direction;
@@ -37,6 +36,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   stickyClassName?: string;
   onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
   children: (info: HeaderProps<RecordType>) => React.ReactNode;
+  colGroup?: React.ReactNode;
 }
 
 const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((props, ref) => {
@@ -50,6 +50,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     columns,
     flattenColumns,
     colWidths,
+    colGroup,
     columCount,
     stickyOffsets,
     direction,
@@ -58,7 +59,6 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     stickyBottomOffset,
     stickyClassName,
     onScroll,
-    maxContentScroll,
     children,
     ...restProps
   } = props;
@@ -98,12 +98,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 } = {
@@ -156,7 +150,10 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
           visibility: noData || mergedColumnWidth ? null : 'hidden',
         }}
       >
-        {(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (
+        {/* use original ColGroup if no data, otherwise use calculated column width */}
+        {noData ? (
+          colGroup
+        ) : (
           <ColGroup
             colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}
             columCount={columCount + 1}

src/Table.tsx

@@ -680,7 +680,6 @@ function Table<RecordType extends DefaultRecordType>(
     // Fixed holder share the props
     const fixedHolderProps = {
       noData: !mergedData.length,
-      maxContentScroll: horizonScroll && mergedScrollX === 'max-content',
       ...headerProps,
       ...columnContext,
       direction,
@@ -697,6 +696,7 @@ function Table<RecordType extends DefaultRecordType>(
             stickyTopOffset={offsetHeader}
             className={`${prefixCls}-header`}
             ref={scrollHeaderRef}
+            colGroup={bodyColGroup}
           >
             {renderFixedHeaderTable}
           </FixedHolder>
@@ -712,6 +712,7 @@ function Table<RecordType extends DefaultRecordType>(
             stickyBottomOffset={offsetSummary}
             className={`${prefixCls}-summary`}
             ref={scrollSummaryRef}
+            colGroup={bodyColGroup}
           >
             {renderFixedFooterTable}
           </FixedHolder>

tests/__snapshots__/FixedColumn.spec.tsx.snap

@@ -2818,43 +2818,22 @@ LoadedCheerio {
         >
           <colgroup>
             <col
-              style="width: 93px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
-            />
-            <col
-              style="width: 1000px;"
+              style="width: 100px;"
             />
             <col
-              style="width: 1000px;"
+              style="width: 100px;"
             />
+            <col />
+            <col />
+            <col />
+            <col />
+            <col />
+            <col />
+            <col />
+            <col />
+            <col />
             <col
-              style="width: 15px;"
+              style="width: 100px;"
             />
           </colgroup>
           <thead