react-data-grid variable height rows

Question

I have a react data grid that needs variable row height.

<ReactDataGrid
    ref={node => this.grid = node}
    enableCellSelect
    columns={columnDefs}
    rowGetter={this.rowGetter(this)}
    rowsCount={this.props.table.length}
    rowRenderer={RowRenderer}
    rowHeight={50}
    rowScrollTimeout={200}
    minHeight={550}
    minColumnWidth={15}
/>

I am most of the way there using a row renderer and dynamically calculating the row height

class RowRenderer extends React.Component {
    setScrollLeft(scrollBy) {
        this.refs.row.setScrollLeft(scrollBy);
    }

    getRowHeight() {
        const rowLines = Math.ceil((this.props.row.desc.length + 1) / 150);
        return rowLines * 50;
    }

    render() {
        return (
            <ReactDataGrid.Row
                ref="row"
                {...this.props}
                height={this.getRowHeight()}
            />
        );
    }
};

However, scrolling does not work right due to the div created by virtualization is using a fixed row height

https://github.com/adazzle/react-data-grid/issues/671

<div class="react-grid-Canvas" style="position: absolute; top: 0px; left: 0px; overflow-x: auto; overflow-y: scroll; width: 1214px; height: 498px;">
    <div>
        <div style="height: 600px;">  <!-- always increments by 50px, the initial row height -->

I have tried to find a way how to overload a function handling the scrolling, but have not found a way to do this. Is there a way to overload the scrolling and set the height so it scrolls smoothly?

score 0 · Accepted Answer · answered Jan 05 '18 at 00:08

I ended up using overscan and setting the visible column to always be 0

// extend third party lib react-data-grid ReactDataGrid
import ReactDataGrid from 'react-data-grid';


class TableDataGrid extends ReactDataGrid {
    render() {
        // force viewport columns to always start from zero
        // to prevent row re-rendering when scrolling horizontally
        if (this.base && this.base.viewport) {
            this.base.viewport.getVisibleColStart = () => 0;
        }
        return super.render();
    }
}

module.exports = TableDataGrid;

Not pretty, but it works for Chrome and Firefox. There is still a rendering problem for safari where the header does not stay synced with the data rows, but it is functional

react-data-grid variable height rows

1 Answers1