CODEWITHSUNDEEP
javascriptreactjsreact-virtualized
Nicholas Haley
Nicholas Haley

Reputation: 4014

React Virtualized: Table rows get cut off when autoHeight is on

I am currently trying to implement React Virtualized to replace an laggy table but am running into an issue. I am using WindowScroller, AutoSizer, Table, and Column from React Virtualized,

In my 400 row table, about 30 rows appear before they stop showing up (as in those DOM elements have not been rendered). However, the table appears to be the correct height. Here is a picture to help visualize:

enter image description here

From what I can tell, the culprit is (or related to) autoHeight on the <Table /> element. When I remove it, I can scroll through all the row elements within the Table. However, this breaks the desired functionality of being able to scroll the page, not the Table.

Things I have tested so far:

Finally, here is a simplified code snippet:

import React, { Component } from "react";
import { Table, Column, WindowScroller, AutoSizer } from "react-virtualized";
import "react-virtualized/styles.css";
import "./style.scss";

class AnalyticsResponsesReportTable extends React.Component {
  constructor(props) {
    ...
  }

  //Methods...

  render() {
    const data = this.props.values.data;

    return (
      <div className="AnalyticsResponsesReportTable">
        {data.length && (
          <WindowScroller>
            {({
              height,
              isScrolling,
              registerChild,
              onChildScroll,
              scrollTop
            }) => (
              <div>
                <AutoSizer disableHeight>
                  {({ width }) => (
                    <Table
                      ref="Table"
                      headerHeight={40}
                      height={height}
                      width={width}
                      autoHeight
                      rowCount={data.length}
                      rowHeight={40}
                      rowGetter={({ index }) => data[index]}
                      className="AnalyticsResponsesReportTable__table"
                      onRowClick={this.handleRowClick}
                    >
                     //Columns rendering here
                    </Table>
                  )}
                </AutoSizer>
              </div>
            )}
          </WindowScroller>
        )}
      </div>
    );
  }
}

export default AnalyticsResponsesReportTable;

Upvotes: 3

Views: 4561

Answers (1)

Nicholas Haley
Nicholas Haley

Reputation: 4014

After trying out many different combinations, the root issue was that I had not set scrollTop={scrollTop} on Table. I also needed to set scrollElement to the appropriate container. The issue took so long to solve since both are needed, and I guess I had just tested one without the other

Upvotes: 4

Related Questions