4

I have been trying to implement Infinite scrolling with lists and table with react-virtualized.

I implemented an Infinite Scrolling which is very similar to this example.

loadMoreRows

_loadMoreRows ({ startIndex, stopIndex }) {
    if(!completed){  //From redux store
      return new Promise(resolve => {
        loadData(() => resolve);
      });
    }
}

rowRenderer

 _rowRenderer ({ index, key, style }) {
    const row = list[index] //From store
    if(row) {
      content = row;
    } else {
      content = 'Loading'
    }
    return (
      <div
        className='row'
        key={key}
        style={style}
      >
        {content}
      </div>
    )
  }

And my List was

<List
  ref={registerChild}
  className='List'
  height={1000}
  onRowsRendered={onRowsRendered}
  rowCount={this.state.rowCount}
  rowHeight={100}
  rowRenderer={this._rowRenderer}
  width={width}
/>

inside

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowCount={this.state.rowCount}
>

List worked like charm for me. I wanted to replace List component with the Table. So I replaced the list with following changes,

<Table
  ref={registerChild}
  width={300}
  height={300}
  headerHeight={20}
  rowHeight={30}
  rowCount={this.state.rowCount}
  rowRenderer={this._rowRenderer}
  rowGetter = {({ index }) => list[index]}
>

{Object.keys(headers).map((headerKey, index) => {
  return (
    <Column
        label={headers[headerKey].label}
        dataKey={headerKey}
        width={100}
        key={index}
    />
  );
})}
</Table>

The list from store is of format [{'key': 'value'}]. Infinite loader is not showing any error in console but the table is empty, filled with one Loading from rowRenderer.
Initially this.state.rowCount would be 1 and the list would be empty. Through loadMoreRows I was dispatching an action to fetch and populate list. After than I increased rowCount, which worked fine for List component. But since the list is empty at the first attempt, loadMoreRows was not triggered with Table component and is not working.

What could be the correct way to approach this?

user2193672
  • 217
  • 3
  • 16
  • 1
    `WindowScroller` and `Table` don't quite work correctly together. You might be better off writing your own fixed-header and then rendering rows with columns in them (within a `List`). – bvaughn Jun 21 '17 at 21:45
  • Great! I was expecting to do that if it is not possible to make it work with `Table`. Thanks. – user2193672 Jun 22 '17 at 05:11

0 Answers0