facebookarchive / fixed-data-table

A React table component designed to allow presenting thousands of rows of data.
http://facebook.github.io/fixed-data-table/
Other
4.3k stars 553 forks source link

reach bottom of grid callback function? #421

Open foodaka opened 8 years ago

foodaka commented 8 years ago

Is there a way once the user reaches the bottom of the grid can provide a callback function, to load more data with ajax?

jivinivan commented 8 years ago

Yes! I want this too. It would also be nice if the callback could be fired based on a configurable threshold (when last visible row is x rows away from the end or something similar).

KamranAsif commented 8 years ago

We've done something similar, where we load data dynamically.

We've actually forked this repo to add more functionality / bug fixes since the original maintained seem to have abonded it.

Heres an example we have of pagination: http://schrodinger.github.io/fixed-data-table-2/example-pagination.html

foodaka commented 8 years ago

Ive used native javascript to hack it together. In component will mount or constructor

  constructor(props){
    super(props)

    //handle window height ajax
    window.addEventListener('scroll', e =>{
      e.preventDefault();
      let body = document.body;
      let html = document.documentElement;
      let height = Math.max( body.scrollHeight, body.offsetHeight,html.clientHeight, html.scrollHeight, html.offsetHeight );
      let scrollTop = document.body.scrollTop;
      if(scrollTop + window.innerHeight > height -100 && !this.props.reducer.isLoading){
        let skip = this.props.reducer.offSet
        skip += 100;
        this.props.actions.FIRE(skip)
      }
    })
  }