fix: Table header layout when data is empty (#1330)

Author: afc163

docs/examples/stickyHeader.tsx

@@ -261,6 +261,15 @@ const Demo = () => {
         }}
         sticky
       />
+      <br />
+      <Table
+        columns={fixedColumns.map(column => ({ ...column, width: undefined }))}
+        data={[]}
+        scroll={{
+          x: 'max-content',
+        }}
+        sticky
+      />
     </div>
   );
 };

src/FixedHolder/index.tsx

@@ -34,6 +34,7 @@ export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   stickyTopOffset?: number;
   stickyBottomOffset?: number;
   stickyClassName?: string;
+  scrollTableStyle?: React.CSSProperties;
   onScroll: (info: { currentTarget: HTMLDivElement; scrollLeft?: number }) => void;
   children: (info: HeaderProps<RecordType>) => React.ReactNode;
   colGroup?: React.ReactNode;
@@ -58,6 +59,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
     stickyTopOffset,
     stickyBottomOffset,
     stickyClassName,
+    scrollTableStyle,
     onScroll,
     children,
     ...restProps
@@ -148,6 +150,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<any>>((pro
         style={{
           tableLayout: 'fixed',
           visibility: noData || mergedColumnWidth ? null : 'hidden',
+          ...scrollTableStyle,
         }}
       >
         {/* use original ColGroup if no data, otherwise use calculated column width */}

src/Table.tsx

@@ -684,6 +684,7 @@ function Table<RecordType extends DefaultRecordType>(
       ...columnContext,
       direction,
       stickyClassName,
+      scrollTableStyle,
       onScroll: onInternalScroll,
     };
 

tests/__snapshots__/FixedColumn.spec.tsx.snap

@@ -1941,7 +1941,7 @@ LoadedCheerio {
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 1200px; min-width: 100%;"
         >
           <colgroup>
             <col
@@ -2814,7 +2814,7 @@ LoadedCheerio {
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 1200px; min-width: 100%;"
         >
           <colgroup>
             <col
@@ -3136,7 +3136,7 @@ exports[`Table.FixedColumn > shadow should be shown when there are columns where
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 1500px; min-width: 100%;"
         >
           <colgroup>
             <col
@@ -5567,7 +5567,7 @@ exports[`Table.FixedColumn > shadow should display correctly 1`] = `
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 1500px; min-width: 100%;"
         >
           <colgroup>
             <col
@@ -11653,7 +11653,7 @@ exports[`Table.FixedColumn > shadow should display correctly 2`] = `
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 1500px; min-width: 100%;"
         >
           <colgroup>
             <col

tests/__snapshots__/Table.spec.jsx.snap

@@ -214,7 +214,7 @@ LoadedCheerio {
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 100px; min-width: 100%;"
         >
           <colgroup>
             <col
@@ -390,7 +390,7 @@ LoadedCheerio {
         style="overflow: hidden;"
       >
         <table
-          style="table-layout: fixed;"
+          style="table-layout: fixed; width: 100px; min-width: 100%;"
         >
           <colgroup>
             <col