可変の行の高さが必要な反応データ グリッドがあります。
<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 -->
スクロールを処理する関数をオーバーロードする方法を見つけようとしましたが、これを行う方法が見つかりませんでした。スクロールをオーバーロードして高さを設定してスムーズにスクロールする方法はありますか?