Реагирует на виртуализацию: строки таблицы обрезаются при включенном autoHeight

Question

В настоящее время я пытаюсь внедрить React Virtualized для замены таблицы с задержкой, но столкнулся с проблемой. я использую WindowScroller, AutoSizer, Table, а также Column от React Virtualized,

В моей таблице из 400 строк появляется около 30 строк, прежде чем они перестают отображаться (как в тех элементах DOM, которые не были обработаны). Тем не менее, таблица, кажется, правильной высоты. Вот картина, чтобы помочь визуализировать:

Из того, что я могу сказать, виновник (или связанный с) autoHeight на <Table /> элемент. Когда я удаляю его, я могу прокручивать все элементы строки в таблице. Однако это нарушает желаемую функциональность возможности прокрутки страницы, а не таблицы.

Вещи, которые я испытал до сих пор:

• Мне пришло в голову, что проблема может быть с scrollElement на WindowScroller так как элемент контейнера для моей таблицы имеет overflow: scroll; height: 100vh, Когда я попытался установить 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;

Answer 1

После опробования множества различных комбинаций проблема была в том, что я не установил scrollTop={scrollTop} на Table, Мне также нужно было установить scrollElement в соответствующий контейнер. Проблема заняла так много времени, так как оба необходимы, и я думаю, что я только что проверил один без другого