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?