Table in react-virtualized does not render any rows

Question

I'm having trouble with react-virtualized Table (inside InfiniteLoader inside AutoSizer) with custom row renderer. Header row is rendered, but no data rows. Neither rowRenderer or rowGetter even get called for any row. I checked the data is there (this.props.requests).

What am I missing, or, how do I go about debugging?

<AutoSizer>
  {({ height, width }) => (
    <InfiniteLoader
      isRowLoaded={this.isRowLoaded}
      loadMoreRows={this.props.loadMoreEntries}
      rowCount={(this.props.requests || []).length}
    >
      {({ onRowsRendered, registerChild }) => (
        <Table
          deferredMeasurementCache={this._cache}
          onRowsRendered={onRowsRendered}
          overscanRowCount={2}
          ref={registerChild}
          height={height}
          headerHeight={50}
          rowCount={(this.props.requests || []).length}
          rowHeight={this._cache.rowHeight}
          rowRenderer={this._rowRenderer}
          rowGetter={this._rowGetter}
          onRowClick={this.rowClicked}
          width={width}
        >
          <Column
            dataKey="requestType"
            label="RqType"
            width={100}
            cellRenderer={this._renderRequestType}
          />
          ...
        </Table>
      )}
    </InfiniteLoader>
  )}
</AutoSizer>

Answer 1

My guess would be that the container div has no fixed height, and since you are using the Autosizer your table ends up with height = 0. Try with a fixed height in the props of Table and for the container div (maybe based on the current number of rows * row height).

You can also check that the rowCount is positive, but it should be ok as far as I can tell.