Grouped Load on Demand

The GroupedVirtuoso component can have a Footer, that has a "load more" button that appends more items to the existing ones.

To add additional items to the groups, you should re-calculate the groupCounts property value with the group values of the newly loaded items. Check the source code of this example for an example implementation.

The calculateGroupsSoFar Slices the total groups into the groups which contain the items so far. For example, if you have [10, 10, 10, 10] groups in total, slicing them to 23 will result in [10, 10, 3].

The setTimeout delay is just for illustrative purposes - in reality, the data will be fetched from a remote source.

loading...