I am trying to use react-virtualized to virtualize a list where some rows have varying heights, and also the list takes up all the space in the parent. I am trying to acplish this with the CellMeasurer, AutoSizer and List ponents.

My package versions are as follows:

react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"

import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/monjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';


class Table extends PureComponent {

  rowRenderer = ({ index, style, key }) => {
    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >
        <div style={style} key={key}>
          content
        </div>
      </CellMeasurer>
    );
  }

  cache = new CellMeasurerCache({
    defaultHeight: 24,
    fixedWidth: true,
  });

  renderAutoSizerContent = () => {
    return this.RenderList;
  }

  RenderList = ({ height, width }) => {
    return (<List
      items={this.props.items}
      width={width}
      height={height}
      rowCount={this.props.items.length}
      rowHeight={this.cache.rowHeight}
      rowRenderer={this.rowRenderer}
      deferredMeasurementCache={this.cache}
    />
    );
  }


  render() {
    return (
      <AutoSizer
        items={ this.props.items}
      >
        {this.renderAutoSizerContent()}
      </AutoSizer>
    );
  }
}

export default Table;

After the initial render everything looks like this. For some reason the top attribute is 0 for every element in the array:

After scrolling or triggering a rerender the items seem to get their top property and the following renders. In the actual code some of my elements have height variance, but the height seems to default to the defaultHeight I give to the CellMeasurerCache constructor anyway.

How do I get the initial render to have top property for each element, and how do I get the heights to calculate correctly? What am I doing wrong in the code I have shown here?

I am trying to use react-virtualized to virtualize a list where some rows have varying heights, and also the list takes up all the space in the parent. I am trying to acplish this with the CellMeasurer, AutoSizer and List ponents.

My package versions are as follows:

react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"

import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/monjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';


class Table extends PureComponent {

  rowRenderer = ({ index, style, key }) => {
    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >
        <div style={style} key={key}>
          content
        </div>
      </CellMeasurer>
    );
  }

  cache = new CellMeasurerCache({
    defaultHeight: 24,
    fixedWidth: true,
  });

  renderAutoSizerContent = () => {
    return this.RenderList;
  }

  RenderList = ({ height, width }) => {
    return (<List
      items={this.props.items}
      width={width}
      height={height}
      rowCount={this.props.items.length}
      rowHeight={this.cache.rowHeight}
      rowRenderer={this.rowRenderer}
      deferredMeasurementCache={this.cache}
    />
    );
  }


  render() {
    return (
      <AutoSizer
        items={ this.props.items}
      >
        {this.renderAutoSizerContent()}
      </AutoSizer>
    );
  }
}

export default Table;

After the initial render everything looks like this. For some reason the top attribute is 0 for every element in the array:

After scrolling or triggering a rerender the items seem to get their top property and the following renders. In the actual code some of my elements have height variance, but the height seems to default to the defaultHeight I give to the CellMeasurerCache constructor anyway.

How do I get the initial render to have top property for each element, and how do I get the heights to calculate correctly? What am I doing wrong in the code I have shown here?

• javascript
• reactjs
• react-native
• react-virtualized

• 1 Would be easier with code snippet instead of screenshots. – Gabriel Bleu Commented Aug 20, 2019 at 8:42
• There is the entire code to reproduce the issue, or what do you mean? – Waltari Commented Aug 20, 2019 at 10:09
• 1 I mean runnable code snippet – Gabriel Bleu Commented Aug 20, 2019 at 10:17

1 Answer 1

In your rowRenderer ponent, you provided parent prop to CellMeasurer but parent is undefined.
You get parent from rowRenderer as written in the docs: https://github./bvaughn/react-virtualized/blob/master/docs/List.md#rowrenderer

So your rowRenderer ponent should be:

  rowRenderer = ({ index, style, key, parent }) => {
      return (
        <CellMeasurer
            cache={this.cache}
            columnIndex={0}
            key={key}
            parent={parent}
            rowIndex={index}
        >
           <div style={style} key={key}>
              {items[index]}
          </div>
        </CellMeasurer>
       );
  }

You can also check this code sandbox with working example: https://codesandbox.io/s/material-demo-yw1k8?fontsize=14