React Data Grid строки исчезают при динамическом обеспечении высоты

Question

Я пытаюсь сделать RDG Table, который можно расширить (для расширения я использовал ReactGridLayout) по высоте и ширине. Я использую react-sizeme для динамического предоставления height & Width моему компоненту (в моем случае Example компонент). Теперь таблица расширяется по высоте и ширине правильно, когда полоса прокрутки в таблице находится сверху. На рисунке ниже показана таблица с полосой прокрутки вверху: Если я разверну таблицу, все будет работать правильно, как показано на рисунке ниже:

Как только мы поместим полосу прокрутки между ними, а затем увеличим высоту таблицы, строки исчезнут. Эти строки становятся видимыми, как только я прокручиваю на небольшую сумму в таблице. Например, На изображении ниже полоса прокрутки находится не в начале (строка 6 видна).

Теперь, если я разверну таблицу, некоторые строки исчезнут, как показано на рисунке ниже:

Я не могу понять, почему строки исчезают при расширении, когда полоса прокрутки не начинается.

CodeSandbox Link: https://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj

Редактировать: Таблица в настоящее время содержит 199 строк.

Answer 1

Я думаю, что нет необходимости менять состояние, чтобы просто обновить DOM. Вы можете сделать это, сгенерировав новый ключ для оболочки div из RDG.

<div key={Math.random()}>
  <ReactDataGrid
    columns={this.state.columns}
    rowGetter={this.rowGetter}
    rowsCount={this.state.rows.length}
    minHeight={height}
    onScroll={this.onScroll}
  />
</div>

Попробуйте это.

Answer 2

Когда полоса прокрутки находится между ними и размер компонента изменяется (путем увеличения высоты), RDG не будет знать, что он должен рендерить новые строки, чтобы заполнить пустые строки, созданные увеличением высоты.Вот почему, как только я прокручиваю вручную небольшую сумму, RDG будет знать, что он должен рендерить новые строки, и все будет работать нормально.

Итак, теперь проблема сводится к тому, чтобы заставить RDG понять, что он имеетдля рендеринга новых строк.

Для этого я сохранил key: Math.random() в состоянии и передал этот ключ RDG в качестве проп.При изменении размера я проверяю, не равна ли новая высота предыдущей высоте, и если да, обновите key в состоянии, которое будет перерисовывать всю RDG.

Я знаю, что это неэффективное решение, но оно выиграло 'Это не имеет значения, так как у меня будет максимум 200 строк.

Рабочий код: https://codesandbox.io/embed/rdg-optimising-scrolling-pgso9