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:
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
onWindowScroller
since the container element for my table hasoverflow: scroll; height: 100vh
. When I tried setting thescrollElement
property to this element none of my rows would render. For testing purposes, I also tried removing this container so thatwindow
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;