how to list data in reverse order using React Virtualized Infinite loader?

Question

I tried to list the huge amount of data using infinite loader. But in my case, list of data need to render in reverse order. But i didn't get the result its keep on loading the record Down wise I have updated in below link,

https://codepen.io/john0075081/pen/qBExxqR

const { Table, Column, AutoSizer, InfiniteLoader } = ReactVirtualized
const generateRandomItem = (idx) => ({
   id: idx,
   name: faker.name.findName(),
   email: faker.internet.email()
})

class App extends React.Component {
   constructor () {
      super()
      this.loadMore = this.loadMore.bind(this)
      // fake data
      let items = []
      for (let i = 0, l = 100; i < l; i++) {
         items.push(generateRandomItem(i))
      }
      this.state = {
         items: items
      }
   }

   loadMore ({ startIndex, stopIndex }) {
      console.log(startIndex, stopIndex);
      // simulate a request
      setTimeout(() => {this.actuallyLoadMore()}, 500)
      // we need to return a promise
      return new Promise((resolve, reject) => {
         this.promiseResolve = resolve;
      })
   }

   actuallyLoadMore () {
      // fake new data
      let newItems = []
      let s = this.state.items.length + 1
      for (let i = 0, l = 100; i < l; i++) {
         newItems.push(generateRandomItem(s + i))
      }
      this.setState({ items: this.state.items.concat(newItems)})
      // resolve the promise after data where fetched
      this.promiseResolve();
   }

   render () {      
      return (
         <div className="container">
            <h1>Infinite scrolling autosize table example </h1>
            <InfiniteLoader
               isRowLoaded={({ index}) => !!this.state.items[index]}

               threshold={1}
               loadMoreRows={this.loadMore}
               rowCount={100000}
            >
               {({onRowsRendered, registerChild}) => (
                  <AutoSizer>
                     {({ width}) => (
                        <Table
                           ref={registerChild}
                           onRowsRendered={onRowsRendered}
                           rowClassName='table-row'
                           headerHeight={40}
                           width={width}
                           height={300}
                           rowHeight={40}
                               scrollToIndex={this.state.items.length-1}
                            scrollToAlignment="end"
                           rowCount={this.state.items.length}
                           rowGetter={({ index }) => this.state.items[index]}
                        >
                        <Column
                           label='Id'
                           dataKey='id'
                           width={width * 0.2}
                        />
                        <Column
                           label='Name'
                           dataKey='name'
                           width={width * 0.4}
                        />
                        <Column
                           label='E.mail'
                           dataKey='email'
                           width={width * 0.4}
                        />
                     </Table>
                     )}
                  </AutoSizer>
               )}
            </InfiniteLoader>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Is there is any solution to achieve the reverse order?

Answer 1

Your condition to check if a row is loaded is always true, so the method to get more rows is never called.

If you want to implement an inverse table/list/feed (as Slack) your method 'isRowLoaded' could look as:

isRowLoaded ({index}) {
    if (index > 0) {
      return true
    }
    return this.isLoading
}

Besides, you need to start at the end, so you need to set that the view scrolls to the end the first time:

scrollAtIndex={this.state.items.length}