0

React DataGrid supports virtualization. This way, it only displays the number of rows that are visible, according to the height.

In my component, I would like to know which rows are currently visible (once loaded the grid and after each scrolling). Is it possible?

Thanks.

pablovb
  • 1
  • 1
  • 2

1 Answers1

1

As per react-data-grid documentation, https://adazzle.github.io/react-data-grid/docs/implementation-notes, we have access to the following props

rowVisibleStartIdx - The index of the first visible row to be rendered to the canvas.

rowVisibleEndIdx - The index of the last visible row to be rendered to the canvas.

With the visible rows start and end indexes, you can assert the rows that are currently visible on the table canvas onScroll.

Provide onScroll handler to the table

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}
/>

Hope this is helpful!

Avanthika
  • 3,984
  • 1
  • 12
  • 19
  • Hi, this works when scrolling, but the first time the grid is loaded, how can I know those "rowVisibleStartIdx" and "rowVisibleEndIdx"? Thanks!! – pablovb Oct 08 '19 at 11:31