[英]React Virtualized table with CellMeasurer is not calculating the height properly
I have a strange issue going on.我有一个奇怪的问题。 The react-virtualized table with CellMeasurer is not calculating the height properly.带有 CellMeasurer 的反应虚拟化表没有正确计算高度。
My render function looks something like this :-我的渲染功能看起来像这样:-
<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>
My dynamic cell renderer function is as follows :-我的动态单元格渲染器功能如下:-
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>
);
}
I have cache defined in constructor :-我在构造函数中定义了缓存:-
constructor(props) {
super(props);
this._cache = new CellMeasurerCache({ minHeight: props.rowHeight, fixedWidth: true });
}
Can anyone please help me with where am I going wrong.任何人都可以帮我解决我哪里出错了。 Am I missing something with implementation of CellMeasurer?我是否遗漏了 CellMeasurer 的实现? Any help is appreciated.任何帮助表示赞赏。 Thanks in advance.提前致谢。
I had the same issue.我遇到过同样的问题。 I think that the problem is because each cell's height is calculated before it's content is loaded.我认为问题是因为在加载内容之前计算了每个单元格的高度。 I used the parameter measure of the CellMeasurer and call it when the content is loaded我使用了 CellMeasurer 的参数 measure 并在加载内容时调用它
<CellMeasurer
cache={cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
width={width}
>
{({measure}) => (
<Content onLoad={measure} />
)}
</CellMeasurer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.