fix: horizontal scrollbar in flex mode with dynamic row height (#183)

Author: nihgwu

src/BaseTable.js

@@ -100,8 +100,6 @@ class BaseTable extends React.PureComponent {
       this.columnManager.reset(columns, fixed);
 
       if (this.props.estimatedRowHeight && fixed) {
-        this.resetColumnWidthCache(false);
-
         if (!this.columnManager.hasLeftFrozenColumns()) {
           this._leftRowHeightMap = {};
         }
@@ -223,15 +221,6 @@ class BaseTable extends React.PureComponent {
     this.rightTable && this.rightTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
   }
 
-  /**
-   * Reset cached column width, should be used only in dynamic mode(estimatedRowHeight is provided)
-   */
-  resetColumnWidthCache(shouldForceUpdate = true) {
-    this.table && this.table.resetAfterColumnIndex(0, shouldForceUpdate);
-    this.leftTable && this.leftTable.resetAfterColumnIndex(0, shouldForceUpdate);
-    this.rightTable && this.rightTable.resetAfterColumnIndex(0, shouldForceUpdate);
-  }
-
   /**
    * Reset cached row heights, should be used only in dynamic mode(estimatedRowHeight is provided)
    */
@@ -955,10 +944,6 @@ class BaseTable extends React.PureComponent {
     this.columnManager.setColumnWidth(key, width);
     this.setState({ resizingWidth: width });
 
-    if (this.props.estimatedRowHeight && this.props.fixed) {
-      this.resetColumnWidthCache();
-    }
-
     const column = this.columnManager.getColumn(key);
     this.props.onColumnResize({ column, width });
   }

src/GridTable.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { FixedSizeGrid, VariableSizeGrid } from 'react-window';
+import memoize from 'memoize-one';
 
 import Header from './TableHeader';
 
@@ -18,6 +19,10 @@ class GridTable extends React.PureComponent {
     this._itemKey = this._itemKey.bind(this);
     this._getBodyWidth = this._getBodyWidth.bind(this);
     this._handleItemsRendered = this._handleItemsRendered.bind(this);
+    this._resetColumnWidthCache = memoize(bodyWidth => {
+      if (!this.props.estimatedRowHeight) return;
+      this.bodyRef && this.bodyRef.resetAfterColumnIndex(0, false);
+    });
 
     this.renderRow = this.renderRow.bind(this);
   }
@@ -27,11 +32,6 @@ class GridTable extends React.PureComponent {
     this.bodyRef && this.bodyRef.resetAfterRowIndex(rowIndex, shouldForceUpdate);
   }
 
-  resetAfterColumnIndex(columnIndex = 0, shouldForceUpdate) {
-    if (!this.props.estimatedRowHeight) return;
-    this.bodyRef && this.bodyRef.resetAfterColumnIndex(columnIndex, shouldForceUpdate);
-  }
-
   forceUpdateTable() {
     this.headerRef && this.headerRef.forceUpdate();
     this.bodyRef && this.bodyRef.forceUpdate();
@@ -99,6 +99,8 @@ class GridTable extends React.PureComponent {
     const cls = cn(`${classPrefix}__table`, className);
     const containerProps = containerStyle ? { style: containerStyle } : null;
     const Grid = estimatedRowHeight ? VariableSizeGrid : FixedSizeGrid;
+
+    this._resetColumnWidthCache(bodyWidth);
     return (
       <div role="table" className={cls} {...containerProps}>
         <Grid

website/siteConfig.js

@@ -192,6 +192,10 @@ module.exports = {
       title: 'Expand - Controlled',
       path: '/examples/expand-controlled',
     },
+    {
+      title: 'Detail View',
+      path: '/examples/detail-view',
+    },
     {
       title: 'Use IsScrolling',
       path: '/examples/is-scrolling',

website/src/examples/detail-view.js

@@ -0,0 +1,44 @@
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+
+data.forEach(x => {
+  x.children = [
+    {
+      id: `${x.id}-detail`,
+      content: faker.lorem.paragraphs(),
+    },
+  ]
+})
+
+const GlobalStyle = createGlobalStyle`
+  .BaseTable__row--depth-0 {
+    height: 50px;
+  }
+
+  .BaseTable__row--depth-0 .BaseTable__row-cell-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`
+
+const Row = styled.div`
+  padding: 15px;
+`
+const rowRenderer = ({ rowData, cells }) => {
+  if (rowData.content) return <Row>{rowData.content}</Row>
+  return cells
+}
+
+export default () => (
+  <>
+    <GlobalStyle />
+    <Table
+      expandColumnKey={columns[0].key}
+      estimatedRowHeight={50}
+      columns={columns}
+      data={data}
+      rowRenderer={rowRenderer}
+    />
+  </>
+)