diff --git a/src/BaseTable.js b/src/BaseTable.js
index 93f574fd..70f4cb75 100644
--- a/src/BaseTable.js
+++ b/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 ;
@@ -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;
diff --git a/src/TableRow.js b/src/TableRow.js
index be5e8ff0..308bbd84 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;
diff --git a/website/src/examples/dynamic-row-heights.js b/website/src/examples/dynamic-row-heights.js
index c8a06457..8fb40082 100644
--- a/website/src/examples/dynamic-row-heights.js
+++ b/website/src/examples/dynamic-row-heights.js
@@ -191,16 +191,33 @@ export default class App extends React.Component {
>
Add item to top
-
{
+ if (parseFloat(e.target.value)) {
+ this.setState({ scale: parseFloat(e.target.value) })
+ }
+ }}
/>
+
>
)
}