Angular ag-grid: Load column data lazily

Question

I have a peculiar problem to address. I am using ag-grid enterprise version and the data is loaded in the grid using Angular/NgRx with SpringBoot in the backend. There are 10 columns in the grid and 9 of them are pretty easy to load from the database. The remaining column is a bit complex to process on backend and it hampers the overall grid load time.

Here's what I am looking for:

• Is it possible in ag-grid to retrieve 9 easy columns and load the grid, and as the data the remaining column is available, then refresh the grid. So the full grid loads quickly and just updates one column after its data is available.
• I have also tried the master-detail model but I need to see this as a column and filtering should be available based on its value.
• I tried checking out several sources including Angular - ag-grid - add columns dynamically but I am unable to find out any useful pointers.

Answer 1

Split your query in two:

• The first will load the data with 9 columns and fill the grid. The 10th column will have some placeholder value.
• The second query will load values of the remaining column and once completed, you can update grid data like this:

const withCol10 = [
{
    id: 1,
    col10: 42
}
// ...
];
this.gridApi.forEachNode(rowNode => {
  const original = rowNode.data;
  const updated = withCol10.find(i => i.id === original.id);
  if (!updated) {
    rowNode.setData({
      ...original,
      ...updated
    });
  }
});

See docs for more details.