From 85b307ecb1ed16be538233894ef9d55850cfdbd0 Mon Sep 17 00:00:00 2001
From: Jameson Hill <jhill@achieveit.com>
Date: Wed, 1 Sep 2021 15:49:58 -0400
Subject: [PATCH 1/2] Fix row height calc when scaled

---
 src/BaseTable.js |  8 +++++++-
 src/TableRow.js  | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/BaseTable.js b/src/BaseTable.js
index 09661977..5bfcdee8 100644
--- a/src/BaseTable.js
+++ b/src/BaseTable.js
@@ -317,7 +317,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 });
@@ -357,6 +357,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} />;
@@ -1294,6 +1295,11 @@ BaseTable.propTypes = {
     ExpandIcon: PropTypes.func,
     SortIndicator: PropTypes.func,
   }),
+
+  /**
+   * Scale factor applied to a parent element
+   */
+  scale: PropTypes.number,
 };
 
 export default BaseTable;
diff --git a/src/TableRow.js b/src/TableRow.js
index d7d44402..fa18f888 100644
--- a/src/TableRow.js
+++ b/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;

From ce68f6ada063e78c04672e8e93f4497b6c4e4bf9 Mon Sep 17 00:00:00 2001
From: Jameson Hill <jhill@achieveit.com>
Date: Wed, 1 Sep 2021 15:50:59 -0400
Subject: [PATCH 2/2] Add scale to dynamic row height example

---
 website/src/examples/dynamic-row-heights.js | 37 +++++++++++++++------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/website/src/examples/dynamic-row-heights.js b/website/src/examples/dynamic-row-heights.js
index 26d07a89..7eca478b 100644
--- a/website/src/examples/dynamic-row-heights.js
+++ b/website/src/examples/dynamic-row-heights.js
@@ -191,17 +191,34 @@ export default class App extends React.Component {
         >
           Add item to top
         </button>
-        <Table
-          fixed
-          selectable
-          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
+            selectable
+            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>
       </>
     )
   }