fix: table header broken when scroll do not have the data(#594) (#595)

react-component · Mar 18, 2021 · b0a09b6 · b0a09b6 · vercel · Mar 18, 2021
1 parent d5c3bae
commit b0a09b6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/src/Header/FixedHeader.tsx b/src/Header/FixedHeader.tsx
@@ -25,6 +25,7 @@ function useColumnWidth(colWidths: readonly number[], columCount: number) {
 
 export interface FixedHeaderProps<RecordType> extends HeaderProps<RecordType> {
   noData: boolean;
+  maxContentScroll: boolean;
   colWidths: readonly number[];
   columCount: number;
   direction: 'ltr' | 'rtl';
@@ -48,6 +49,7 @@ const FixedHeader = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
       offsetHeader,
       stickyClassName,
       onScroll,
+      maxContentScroll,
       ...props
     },
     ref,
@@ -138,7 +140,7 @@ const FixedHeader = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
             visibility: noData || mergedColumnWidth ? null : 'hidden',
           }}
         >
-          {(!noData || allFlattenColumnsWithWidth) && (
+          {(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (
             <ColGroup
               colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}
               columCount={columCount + 1}

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -530,6 +530,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     stickyOffsets,
     onHeaderRow,
     fixHeader,
+    scroll
   };
 
   // Empty
@@ -627,6 +628,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
         {showHeader !== false && (
           <FixedHeader
             noData={!mergedData.length}
+            maxContentScroll={horizonScroll && scroll.x === 'max-content'}
             {...headerProps}
             {...columnContext}
             direction={direction}

diff --git a/tests/__snapshots__/FixedColumn.spec.js.snap b/tests/__snapshots__/FixedColumn.spec.js.snap
@@ -2406,6 +2406,47 @@ exports[`Table.FixedColumn renders correctly scrollXY - without data 1`] = `
       <table
         style="table-layout: fixed;"
       >
+        <colgroup>
+          <col
+            style="width: 93px; min-width: 93px;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 0px; min-width: 0;"
+          />
+          <col
+            style="width: 15px; min-width: 15px;"
+          />
+        </colgroup>
         <thead
           class="rc-table-thead"
         >