loadMoreRows not triggering for InfiniteLoader

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.

[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.

[apuntovanini]

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