Infinite Row Model

Goals

• Displaying and rendering huge amounts of data in ag-Grid, or even in the browser, is expensive.
• Streaming chunks of data into the grid by leveraging Infinite Row Model.
• Enabling the infinite row model mode via the rowModelType input binding on the <ag-grid-angular> component.
• Setting the block size for caching of data in the grid using the cacheBlockSize input binding.
• Setting the number of rows the user can initially scroll to via the infiniteInitialRowCount input binding.
• Defining the IDataSource object for fetching rows.

Links

• Infinite Row Model

Summary

The goal of this chapter was to understand client-side data with ag-Grid.

We covered:

• Binding simple data to the grid.
• Displaying asynchronous data using Angular and RxJS.
• Using value getters and cell rendering for displaying complex data and customizing the display of data.
• Three methods for updating data in the grid.
• Using delta row data to efficiently add, remove, and update data in the grid.
• Leveraging the infinite-row model for streaming data chunks into the grid.

Simple Data Summary

• Bind static data to ag-Grid with Angular using the rowData input binding.
• Defining columns and specifying the field property.
• Using dot-notation to access nested objects and data.

Asynchronous Data Summary

• Displaying data that is fetched asynchronously in ag-Grid.
• Streaming data into the grid using RxJS and Angular.

Value Getter

• The valueGetter property in a column definition enables us to define an expression or function for accessing data for the specified column.
• The valueGetter function accepts the ValueGetterParams object, which among other things, provides us with the data for each row in the grid.
• We can return a string from the valueGetter function that is used for each row in the specified column.
• Value getters are a method for customizing the formatting and display of data in the grid.

Updating Data

• Using an RxJS Subject we can stream updates to data into ag-Grid with Angular.
• Using the setRowData() method in the Grid API we can update all of the data that is displayed in the grid.
• Using a RowDataTransaction object that is provided to the updateRowData() method in the Grid API we can instruct the grid to add, remove or update data in bulk.

Cell Rendering

• Using the cellRenderer property in a column definition for specifying a function that renders each cell.
• The cellRenderer function is invoked with a parameter object containing, among many things, the value for each cell to be rendered.
• We can use cell rendering to display HTML element such as images in a grid.

Delta Row Data

• Learn the basics of immutability in Angular.
• Enable the delta row data model using the deltaRowDataModel input binding on the <ag-grid-angular> component.
• Provding a function for determing the a row node unique identifying via the getRowNodeId input binding for determing the changes to immutable data.
• Inplementing immutable data using NgRx, a redux inspired library for Angular.