React-virtualized: loadMoreRows not triggering for InfiniteLoader

[prestonbernstein]

First off, I just want to say thank you for creating this amazing package.

For my use case, I need to use InfiniteLoader. Unfortunately, the loadMoreRows function is not triggering.

Currently, I load my table wrapped in an InfiniteLoader and AutoSizer

const ProductsContentTableIndex = ({
  headerHeight,
  headerRenderer,
  isRowLoaded,
  loadMoreRows,
  noRowsRenderer,
  overscanRowCount,
  rowCount,
  rowGetter,
  rowHeight,
  rowRenderer,
  scrollToAlignment,
  scrollToIndex,
  sort,
  sortBy,
  sortDirection,
}) => {
  return (
    <div id='AutoSizerContainer'>
      <InfiniteLoader
        isRowLoaded={isRowLoaded}
        loadMoreRows={() => console.log('yo')}
        rowCount={rowCount}
      >
        {({ onRowsRendered, registerChild }) => (
        <AutoSizer disableHeight>
          {({ height, width }) => (
            <Table
              headerHeight={headerHeight}
              height={height}
              noRowsRenderer={noRowsRenderer}
              onRowsRendered={onRowsRendered}
              overscanRowCount={overscanRowCount}
              ref={registerChild}
              rowHeight={rowHeight}
              rowCount={rowCount}
              rowGetter={rowGetter}
              scrollToAlignment={scrollToAlignment}
              scrollToIndex={scrollToIndex}
              sort={sort}
              sortBy={sortBy}
              sortDirection={sortDirection}
              width={width}
            >
              <Column
                dataKey='index'
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Index'
                width={100}
              />
              <Column
                cellRenderer={selectCellRenderer}
                dataKey='select'
                disableSort
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Select'
                width={100}
              />
              <Column
                cellRenderer={productNameCellRenderer}
                dataKey='name'
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Product Name'
                width={100}
              />
              <Column
                cellRenderer={manufacturerCellRenderer}
                dataKey='manufacturer'
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Manufacturer'
                width={100}
              />
              <Column
                cellRenderer={categoryCellRenderer}
                dataKey='category'
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Category'
                width={100}
              />
              <Column
                cellRenderer={validCellRenderer}
                dataKey='valid'
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Valid Data'
                width={100}
              />
              <Column
                cellRenderer={publishedCellRenderer}
                dataKey='published'
                disableSort
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Published'
                width={100}
              />
              <Column
                cellRenderer={optionsCellRenderer}
                dataKey='options'
                disableSort
                flexGrow={1}
                headerRenderer={headerRenderer}
                label='Options'
                width={150}
              />
            </Table>
          )}
        </AutoSizer>
        )}
      </InfiniteLoader>
    </div>
  );

This will render properly.

When I include the rowRenderer function I created, all of the columns are rendered on top of each other.

  rowRenderer({ className, columns, index, key, style }) {
    const { products } = this.props;
    let content;

    if(!this.isRowLoaded({ index })) {
      content = 'loading...'
    } else {
      content = columns
    }

    return (
      <div
        className={className}
        key={key}
        style={style}
        role='row'
      >
        {content}
      </div>
    )
  }

Is there anyone with any more experience with this library that can offer support for this issue? Thanks so much.

[prestonbernstein]

Found out the error. Forgot to import classNames into the rowRenderer function. Still having the loadMoreRows not triggering issue.

[apuntovanini]

Hi @prestonbernstein, I have the same problem about loadMoreRows not triggering, since you closed the issue, do you mind sharing your solution?
Thanks!

[windgaucho]

The same happened to me. I have resolved it setting the InfiniteLoader rowCount property to the total count of rows that I will get from the database (by executing loadMoreRows) and the Table rowCount property to the 'real' (not the rowCount of the InifiniteLoader) number of rows in the table.

[bvaughn]

The same happened to me. I have resolved it setting the InfiniteLoader rowCount property to the total count of rows that I will get from the database (by executing loadMoreRows) and the Table rowCount property to the 'real' (not the rowCount of the InifiniteLoader) number of rows in the table.

FWIW, I'd expect that you'd need to set the rowCount for Table to the number of loaded rows _plus_ 1 more (to trigger loading the next batch). At least that's the general technique I've used before (and what's described here in the docs).

[windgaucho]

@bvaughn Thank you for your response and thank you for this awesome component !!

I will check it out and update my code, thanks !!

[dengnan123]

The same happened to me. I have resolved it setting the InfiniteLoader rowCount property to the total count of rows that I will get from the database (by executing loadMoreRows) and the Table rowCount property to the 'real' (not the rowCount of the InifiniteLoader) number of rows in the table.

thanks