React-virtualized: MultiGrid with Infinite Loader

Created on 6 Feb 2018  路  2Comments  路  Source: bvaughn/react-virtualized

I want to use pagination using infinite loading but strangely there are no examples shown to achieve the same.
It's a very common use case to implement pagination into MultiGrid. Can you please provide information or resources on the same?

Most helpful comment

I implemented infinite loading with MultiGrid, and it did turn out to be similar to other examples, in particular Grid + Infinite loading.
I started with the example here:
https://github.com/bvaughn/react-virtualized/issues/516#issuecomment-269643156

The only difference I found is that you can pass rowStartIndex and rowStopIndex directly as the startIndex & stopIndex parameters, there's no need to multiply by column counts or add column offsets. Here's what I ended up with:

_onSectionRendered ({ columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex }) {
  const startIndex = rowStartIndex;
  const stopIndex = rowStopIndex;

  this._onRowsRendered({ startIndex, stopIndex });
}

All 2 comments

There are various examples in the repo and documentation for how to use the components. Although there are no examples for the specific combination you've requested, I think you can probably infer it form the other docs.

It's a lot of work to maintain docs and providing examples for all combinations of RV components would be a big burden. I'm sorry! You're welcome to contribute docs to the repo if you'd like to put together a PR though!

I implemented infinite loading with MultiGrid, and it did turn out to be similar to other examples, in particular Grid + Infinite loading.
I started with the example here:
https://github.com/bvaughn/react-virtualized/issues/516#issuecomment-269643156

The only difference I found is that you can pass rowStartIndex and rowStopIndex directly as the startIndex & stopIndex parameters, there's no need to multiply by column counts or add column offsets. Here's what I ended up with:

_onSectionRendered ({ columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex }) {
  const startIndex = rowStartIndex;
  const stopIndex = rowStopIndex;

  this._onRowsRendered({ startIndex, stopIndex });
}
Was this page helpful?
0 / 5 - 0 ratings