fix: Table column header style

close ant-design/ant-design#26701
react-component · Sep 14, 2020 · fab74ef · fab74ef
1 parent 7801a55
commit fab74ef
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/examples/scrollY.tsx b/examples/scrollY.tsx
@@ -22,6 +22,7 @@ class Demo extends React.Component {
   };
 
   render() {
+    const { showBody } = this.state;
     const columns = [
       { title: 'title1', key: 'a', dataIndex: 'a', width: 100 },
       { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
@@ -46,7 +47,7 @@ class Demo extends React.Component {
         scroll={{ y: 300 }}
         rowKey={record => record.key}
         bodyStyle={{
-          display: this.state.showBody ? '' : 'none',
+          display: showBody ? '' : 'none',
         }}
       />
     );

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -407,8 +407,14 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     if (!fixHeader) {
       scrollYStyle = { overflowY: 'hidden' };
     }
+    let scrollTableWidth = scroll.x === true ? 'auto' : scroll.x;
+    // fix empty data columns style
+    // https://github.com/ant-design/ant-design/issues/26701
+    if (!hasData) {
+      scrollTableWidth = undefined;
+    }
     scrollTableStyle = {
-      width: scroll.x === true ? 'auto' : scroll.x,
+      width: scrollTableWidth,
       minWidth: '100%',
     };
   }
@@ -424,16 +430,15 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
 
   function forceScroll(scrollLeft: number, target: HTMLDivElement | ((left: number) => void)) {
-    /* eslint-disable no-param-reassign */
-    if (target) {
-      if (typeof target === 'function') {
-        target(scrollLeft);
-      } else if (target.scrollLeft !== scrollLeft) {
-        target.scrollLeft = scrollLeft;
-      }
+    if (!target) {
+      return;
+    }
+    if (typeof target === 'function') {
+      target(scrollLeft);
+    } else if (target.scrollLeft !== scrollLeft) {
+      // eslint-disable-next-line no-param-reassign
+      target.scrollLeft = scrollLeft;
     }
-
-    /* eslint-enable */
   }
 
   const onScroll = ({