反応データグリッドの可変高さの行

Question

私は可変な行の高さが必要な反応データグリッドを持っています。

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

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

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のレンダリングに問題はありますが、ヘッダーはデータ行と同期していないが、機能的です。