Fix dynamic row height calculation with scaled parent element

src/BaseTable.js

@@ -328,7 +328,7 @@ class BaseTable extends React.PureComponent {
   }
 
   renderRow({ isScrolling, columns, rowData, rowIndex, style }) {
-    const { rowClassName, rowRenderer, rowEventHandlers, expandColumnKey, estimatedRowHeight } = this.props;
+    const { rowClassName, rowRenderer, rowEventHandlers, expandColumnKey, estimatedRowHeight, scale } = this.props;
 
     const rowClass = callOrReturn(rowClassName, { columns, rowData, rowIndex });
     const extraProps = callOrReturn(this.props.rowProps, { columns, rowData, rowIndex });
@@ -368,6 +368,7 @@ class BaseTable extends React.PureComponent {
       // for fixed table, we need to sync the hover state across the inner tables
       onRowHover: hasFrozenColumns ? this._handleRowHover : null,
       onRowHeightChange: hasFrozenColumns ? this._handleFrozenRowHeightChange : this._handleRowHeightChange,
+      scale,
     };
 
     return <TableRow {...rowProps} />;
@@ -1311,6 +1312,11 @@ BaseTable.propTypes = {
     ExpandIcon: PropTypes.elementType,
     SortIndicator: PropTypes.elementType,
   }),
+
+  /**
+   * Scale factor applied to a parent element
+   */
+  scale: PropTypes.number,
 };
 
 export default BaseTable;

src/TableRow.js

@@ -115,8 +115,13 @@ class TableRow extends React.PureComponent {
   _measureHeight(initialMeasure) {
     if (!this.ref) return;
 
-    const { style, rowKey, onRowHeightChange, rowIndex, columns } = this.props;
-    const height = this.ref.getBoundingClientRect().height;
+    const { style, rowKey, onRowHeightChange, rowIndex, columns, scale } = this.props;
+    let height = this.ref.getBoundingClientRect().height;
+
+    if (scale && scale > 0 && scale < 1) {
+      height = height / scale;
+    }
+
     this.setState({ measured: true }, () => {
       if (initialMeasure || height !== style.height)
         onRowHeightChange(rowKey, height, rowIndex, columns[0] && !columns[0].__placeholder__ && columns[0].frozen);
@@ -189,6 +194,7 @@ TableRow.propTypes = {
   onRowExpand: PropTypes.func,
   onRowHeightChange: PropTypes.func,
   tagName: PropTypes.elementType,
+  scale: PropTypes.number,
 };
 
 export default TableRow;

website/src/examples/dynamic-row-heights.js

@@ -191,16 +191,33 @@ export default class App extends React.Component {
         >
           Add item to top
         </button>
-        <Table
-          fixed
-          columns={
-            !!this.state.toggle ? this.columns.slice(0, 4) : this.columns
-          }
-          estimatedRowHeight={40}
-          data={data}
-          sortBy={sortBy}
-          onColumnSort={this.onColumnSort}
+        <input
+          placeholder="Scale factor"
+          onChange={e => {
+            if (parseFloat(e.target.value)) {
+              this.setState({ scale: parseFloat(e.target.value) })
+            }
+          }}
         />
+        <div
+          style={
+            this.state.scale
+              ? { transform: `scale(${this.state.scale})` }
+              : undefined
+          }
+        >
+          <Table
+            fixed
+            columns={
+              !!this.state.toggle ? this.columns.slice(0, 4) : this.columns
+            }
+            estimatedRowHeight={40}
+            data={data}
+            sortBy={sortBy}
+            onColumnSort={this.onColumnSort}
+            scale={this.state.scale}
+          />
+        </div>
       </>
     )
   }