The Infinite Row Model

This video switches to the aggr-infinite starting point.

In this video, we'll learn about ag-Grid's Infinite Row Model. The infinite row model allows the grid to lazy load rows from the server depending on what the scroll position is of the grid. In its simplest form, the more the user scrolls down, the more rows get loaded.

The grid will have an 'auto extending' vertical scroll. That means as the scroll reaches the bottom position, the grid will extend the height to allow scrolling even further down, almost making it impossible for the user to reach the bottom. This will stop happening once the grid has extended the scroll to reach the last record in the table.

In the video, we swap out using rowData and setState to set our grid data with an infinite row model setDatasource function on the grid API.

First, we update our state to include several parameters for the infinite row model:

// src/App.js
this.state = {
  // rest unchanged
    rowModelType: "infinite",
   rowBuffer: 0,
   paginationPageSize: 100,
   cacheOverflowSize: 2,
   maxConcurrentDatasourceRequests: 1,
   maxBlocksInCache: 10,
   infiniteInitialRowCount: 100
     }  

We then need to pass those pieces of state in as props:

// src/App.js
// rest unchanged
<AgGridReact
  onGridReady={this.onGridReady}
  columnDefs={this.state.columnDefs}
 defaultColDef={this.state.defaultColDef}
  components={this.state.components}
 rowSelection={this.state.rowSelection}
 rowDeselection={true}
 rowBuffer={this.state.rowBuffer}
 rowModelType={this.state.rowModelType}
 paginationPageSize={this.state.paginationPageSize}
 cacheOverflowSize={this.state.cacheOverflowSize}
 maxConcurrentDatasourceRequests={this.state.maxConcurrentDatasourceRequests}
 infiniteInitialRowCount={this.state.infiniteInitialRowCount}
 maxBlocksInCache={this.state.maxBlocksInCache}
  />

We then need to update our onGridReady function by defining and calling an updateData function. This function will define and set the data source for the grid and we'll call it in the callback of fetching our data.

The finished onGridReady function looks like this:

// src/App.js
// rest unchanged
  onGridReady = params => {
    const updateData = data => {
      const dataSource = {
        rowCount: null,
        getRows: function(params) {
          setTimeout(function() {
            let rowsThisPage = data.slice(params.startRow, params.endRow);
            let lastRow = -1;
            if (data.length <= params.endRow) {
              lastRow = data.length;
            }
            params.successCallback(rowsThisPage, lastRow);
          }, 500);
        }
      };
      params.api.setDatasource(dataSource);
    };

    fetch(
      "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json"
    )
      .then(res => res.json())
      .then(data => {
        updateData(data);
      });
  };

Note that the dataSource object must follow a predefined interface from ag-Grid. You can read more about it in the docs for infinite row model, but the most important part of is the getRows function. The getRows function is called by the grid to load a block of rows into the browser side cache of blocks. In this video, we use the startRow, endRow, and successCallback params supplied to the getRows function to tell ag-Grid how to determine which data should be displayed as the user scrolls. We then call the grid API's setDatasource method to set our grid's data source.

This video really only scratches the surface of what the infinite row model can do. It can also be used with sorting, filtering, and selecting, and there are numerous options for controlling how and when data is cached. You'll definitely want to read through the docs to cement your grasp on this amazing feature!

Let's shift gears now and learn about how we can use Redux with ag-Grid. See you in the next video!