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) }) + } + }} /> +
+
+ ) }