Реагировать на DataGrid: как узнать, какие строки отображаются?

Question

React DataGrid поддерживает виртуализацию. Таким образом, он отображает только количество видимых строк в соответствии с высотой.

В моем компоненте я хотел бы знать, какие строки в данный момент видны (после загрузки сетки и после каждой прокрутки). Возможно ли это?

Спасибо.

Answer 1

Согласно документации по реагирующим сеткам данных, https://adazzle.github.io/react-data-grid/docs/implementation-notes, у нас есть доступ к следующим реквизитам

rowVisibleStartIdx - Индекс первой видимой строки, которая будет отображена на холсте.

rowVisibleEndIdx - Индекс последней видимой строки, отображаемой на холсте.

С помощью начальных и конечных индексов видимых строк можно утверждать строки, которые в данный момент видны в таблице. canvas onScroll.

Предоставить обработчик onScroll для таблицы

onScroll = ({ rowVisibleStartIdx, rowVisibleEndIdx }) => {
   console.log(rowVisibleStartIdx, rowVisibleEndIdx);
   // The visible indexes will be updated as your canvas view port changes.
   // use this to assert the currently visible rows from your data.
};

<ReactDataGrid
   // ... other props
   onScroll={this.onScroll}
/>

Надеюсь, это полезно!