fix: scroll.x max-content not working

react-component · Oct 18, 2019 · a7f4cbb · a7f4cbb
1 parent d2fc944
commit a7f4cbb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/BaseTable.tsx b/src/BaseTable.tsx
@@ -149,11 +149,7 @@ class BaseTable<ValueType> extends React.Component<BaseTableProps<ValueType>> {
 
     if (!fixed && scroll.x) {
       // not set width, then use content fixed width
-      if (scroll.x === true) {
-        tableStyle.tableLayout = 'fixed';
-      } else {
-        tableStyle.width = scroll.x;
-      }
+      tableStyle.width = scroll.x === true ? 'max-content' : scroll.x;
     }
 
     const Table = hasBody ? components.table : 'table';

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -284,14 +284,19 @@ class Table<ValueType> extends React.Component<TableProps<ValueType>, TableState
     if (typeof tableLayout !== 'undefined') {
       return tableLayout === 'fixed';
     }
-    // if one column is fixed or ellipsis, use fixed table layout to fix align issue
-    if (columns.some(({ fixed, ellipsis }) => !!fixed || !!ellipsis)) {
+    // if one column is ellipsis, use fixed table layout to fix align issue
+    if (columns.some(({ ellipsis }) => !!ellipsis)) {
       return true;
     }
     // if header fixed, use fixed table layout to fix align issue
     if (useFixedHeader || scroll.y) {
       return true;
     }
+    // if scroll.x is number/px/% width value, we should fixed table layout
+    // to avoid long word layout broken issue
+    if (scroll.x && scroll.x !== true && scroll.x !== 'max-content') {
+      return false;
+    }
     return false;
   }