У меня странная проблема.Виртуализированная таблица реакции с CellMeasurer неправильно рассчитывает высоту.
Моя функция рендеринга выглядит примерно так: -
<Table
deferredMeasurementCache={this._cache}
className={mainClasses}
width={500}
height={500}
headerHeight={headerHeight}
rowHeight={this._cache.rowHeight}
rowCount={dataList.length}
sort={this.sort}
sortBy={sortBy}
sortDirection={sortDirection}
rowGetter={({ index }) => dataList[index]}
rowRenderer={this.rowRenderer}
overscanRowCount={overscanRowCount}
onRowClick={onRowClick}
>
{
columnsDef.map((item, index) => {
if (index === 0) {
return (
<Column
key={item.dataKey}
dataKey={item.dataKey}
width={25}
cellRenderer={this.checkboxCellRenderer}
disableSort={!this.isSortEnabled(item)}
headerRenderer={this.checkBoxHeaderRenderer}
/>
);
}
return (
<Column
key={item.dataKey}
dataKey={item.dataKey}
width={item.width ? item.width : 0}
label={item.label}
cellRenderer={this.dynamicCellRenderer}
disableSort={!this.isSortEnabled(item)}
headerRenderer={this.headerRenderer}
flexGrow={item.flexGrow}
/>
);
})
}
</Table>
Моя функция рендеринга динамической ячейки выглядит следующим образом: -
dynamicCellRenderer = (data) => {
return (
<CellMeasurer
cache={this._cache}
columnIndex={0}
key={data.cellData}
parent={data.parent}
rowIndex={data.rowIndex}
>
<div
style={{
whiteSpace: 'normal'
}}
>
{data.cellData}
</div>
</CellMeasurer>
);
}
У меня определен кеш в конструкторе: -
constructor(props) {
super(props);
this._cache = new CellMeasurerCache({ minHeight: props.rowHeight, fixedWidth: true });
}
Может кто-нибудь помочь мне с тем, где я ошибаюсь.Я что-то упустил с реализацией CellMeasurer?Любая помощь приветствуется.Заранее спасибо.