反应数据网格可变高度行

Question

我有一个需要可变行高的 React 数据网格。

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

我大部分时间都在使用行渲染器并动态计算行高

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()}
            />
        );
    }
};

但是，由于虚拟化创建的div使用的是固定行高

，因此无法正常滚动

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 -->

我试图找到一种方法来重载处理滚动的函数，但还没有找到方法。有没有办法使滚动过载并设置高度以使其平滑滚动？

Answer 1

我最终使用了过扫描并将可见列设置为始终为 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;

不漂亮，但适用于 Chrome 和 Firefox。 Safari 仍然存在渲染问题，其中 header 不与数据行保持同步，但它可以正常工作

反应数据网格可变高度行

react-data-grid variable height rows

reactjs

react-data-grid