React Virtualized table with CellMeasurer is not calculating the height properly

Question

I have a strange issue going on. The react-virtualized table with CellMeasurer is not calculating the height properly.

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? Any help is appreciated. Thanks in advance.

score 1 · Answer 1 · answered Mar 11 '20 at 14:44

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
    cache={cache}
    columnIndex={0}
    key={key}
    parent={parent}
    rowIndex={index}
    width={width}
  >
    {({measure}) => (
      <Content onLoad={measure} />
    )}
  </CellMeasurer>

React Virtualized table with CellMeasurer is not calculating the height properly

1 Answers1