2

可変の行の高さが必要な反応データ グリッドがあります。

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

スクロールを処理する関数をオーバーロードする方法を見つけようとしましたが、これを行う方法が見つかりませんでした。スクロールをオーバーロードして高さを設定してスムーズにスクロールする方法はありますか?

4

1 に答える 1