MultiGrid with Infinite Loader

[param-fk]

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?

[bvaughn]

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!

[russtuck91]

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 });
}

[dasler-fw]

MultiGrid + InfiniteLoader + AutoSizer:

<AutoSizer onResize={this.onResize}>
        {({ width, height }) => {
          return (
            <InfiniteLoader {...infiniteLoaderProps}>
              {loaderProps =>
                this._infiniteLoaderChildFunction(loaderProps, width, height)
              }
            </InfiniteLoader>
          );
        }}
      </AutoSizer>

  _infiniteLoaderChildFunction = (
    { onRowsRendered, registerChild },
    width,
    height,
  ) => {
    this._onRowsRendered = onRowsRendered;
    const {
      rowHeight,
      gridProps,
      onScroll,
      data,
      columns,
      overscanRowCount,
    } = this.props;
    const rowCount = data.length + 1; // data + header

    return (
      <MultiGrid
        {...gridProps}
        onSectionRendered={this._onSectionRendered}
        ref={registerChild}
        cellRangeRenderer={this.props.cellRangeRenderer}
        cellRenderer={this.renderCell}
        columnWidth={this.getColumnWidth}
        columnCount={columns.length}
        height={height}
        rowHeight={rowHeight}
        rowCount={rowCount}
        width={width}
        onScroll={onScroll}
        overscanRowCount={overscanRowCount}
        data={data}
        columns={columns}
      />
    );
  };

  _onSectionRendered = ({
    columnStartIndex,
    columnStopIndex,
    rowStartIndex,
    rowStopIndex,
  }) => {
    const { columns } = this.props;

    const startIndex = rowStartIndex * columns.length + columnStartIndex;
    const stopIndex = rowStopIndex * columns.length + columnStopIndex;

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