3

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:

  • It occurred to me that the issue might be with the scrollElement on WindowScroller since the container element for my table has overflow: scroll; height: 100vh. When I tried setting the scrollElement property to this element none of my rows would render. For testing purposes, I also tried removing this container so that window would handle scrolling, but this didn't solve the bug either.

  • I have tried replicating this example as closely as possible, but no dice 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;

1 Answer 1

4

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

1
  • 1
    In case anyone runs into this issue again here is a working fiddle: jsfiddle.net/6md5st9h/28 You can see my issue occurring if you remove scrollTop={scrollTop} Commented Feb 2, 2018 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.