React-data-grid: Lazyload remote data

[sandeep-prakash]

HI,

Is there a way to load data from a REST call as the user scrolls through the grid (or any other paging mechanism)? Or, is the best way right now to do it outside the component by:

1. Making the REST call
2. Update the component in the REST call callback with the new data

Regards,
SP

[malonecj]

There is currently no paging functionality implemented in the grid, nor a way to fetch data as the user scrolls, although they are on our roadmap. For now you will need to prefetch your data and supply it to the grid

[littlebee]

:+1: this will become critical to me as well

But... I was thinking maybe, really all I need to do is something like this in my rowGetter:

rowGetter: function(index){
  // we have a magical mixin for this that handles paging in and out data
  // options like Backbone.Collection.fetch() 
  @state.collection.ensureRows(index, index + @props.pageSize, {success: function(){
      // :hand waving:  tell react-data-grid the rows have changed / refresh / whatever  
   }});
  return {}   // ...or something that we wont choke on

basic idea. ensureRows can also check and give us the model synchronously if it's page is in the collection.

So user is initially looking a blank rows. And then tell react-data-grid to refresh (preferably without resetting scroll position) when the data arrives from the remote. Add a formatter to detect and render a subtle loading... placeholder (please no spinners - even one spinner per row is annoying)

Would that work?

[bakesteve]

@littlebee yeah - that would work. Right now, if ensureRows changed the rowCount prop, that will make the grid re-render. your scroll state should still be preserved too.
Will try that out as an example at some point

[zatziky]

Hello @malonecj, what date does inifiteScrolling and pagination have on your road map?
We are thinking about using your grid but this is a feature we really need.

@bakesteve, have you managed to put together a working example?

[tobyhede]

:+1: to this feature

[nehvaleem]

are there any news about pagination/infinite scrolling features?

[bostondevin]

+1

[behzad888]

+1

[jstray]

Yes please.

[DavidDonoghue]

+1

[jstray]

I have implemented this manually in a React component for the Computational Journalism Workbench, using a row access function that looks like this:

 getRow(i) {
    if (this.state.tableData) {

      // Time to load more rows?
      if (!this.loading) {
        var target = Math.min(i + this.preloadRows, this.state.tableData.total_rows);  // don't try to load past end of data
        if (target > this.state.lastLoadedRow) {
          //console.log("Triggered reload at getRow " + i);
          this.loadTable(this.props.id, this.state.lastLoadedRow + this.deltaRows);
        }
      }

      // Return the row if we have it
      if (i < this.state.lastLoadedRow ) {
        return this.state.tableData.rows[i];
      } else {
        return this.emptyRow();
      }

    } else {
        // nothing loaded yet
        return null;
    }
  }

This displays blank rows (this.emptyRow) for rows that are not yet loaded, which are then filled when the table re-renders when loadTable completes. Please see the file linked above for details.