Blog
Measure AG Grid Performance

Measure AG Grid Performance

This article will show you how to measure the performance of AG Grid.

As a minimum, we believe that you should measure the following:

Time to grid ready
Time to first render

Let's break each of these down and show how you can measure the performance of AG Grid using Polaris.

Prerequisites

Follow our docs for installing the Polaris SDK:

Install AG Grid SDK

To measure the performance of AG Grid using Polaris, you will need to install the AG Grid SDK.

Terminal

npm i -S @getpolaris.ai/sdk-ag-grid

Instrument AG Grid with Polaris

AG Grid implements a gridReady event that is fired when the grid is initialized, and for the most part, the API is ready for interaction. AG Grid also implements a firstDataRendered event that is fired when the grid has rendered the first set of data.

Let's look at an example using the Polaris AG Grid SDK to measure both of these events using the instrumentGrid function.

Here is an example using React:

Grid.tsx

import { instrumentGrid } from '@getpolaris.ai/sdk-ag-grid';

export default function Grid() {
  // code for column definitions omitted for brevity

  const gridOptions = useMemo(() => {
    return instrumentGrid({
      gridId: 'customers',
      columnDefs,
    });
  }, [columnDefs]);

  return (
    <div className="ag-theme-quartz-auto-dark">
      <AgGridReact rowData={rowData} gridOptions={gridOptions}></AgGridReact>
    </div>
  );
}

And, here is another example using Angular:

Grid.component.ts

import { instrumentGrid } from '@getpolaris.ai/sdk-ag-grid';

@Component({
  selector: 'app-grid',
  template: `
    <ag-grid-angular
      class="ag-theme-quartz-auto-dark"
      [gridOptions]="gridOptions"
      [rowData]="rowData"
    ></ag-grid-angular>
  `,
})
export class GridComponent {
  // code for column definitions omitted for brevity

  gridOptions = instrumentGrid({
    gridId: 'customers',
    columnDefs: this.columnDefs,
  });
}

Let's review the code above:

We import the instrumentGrid function from the Polaris AG Grid SDK.
We call the instrumentGrid function to measure the time to grid ready.
We pass the gridId to the instrumentGrid function.

It's important to note that all gridOptions can be supplied to the first parameter to the instrumentGrid function. This allows you to measure the performance of the grid with all the options you would normally pass to the AgGridReact component.

Example

Next, let's look at a complete example of an AG Grid implementation with Polaris instrumentation.

A few things to note:

First, the PolarisProvider is configured in the main.tsx file.
Next, the Grid component is instrumented with the instrumentGrid function.

When we first load the application, our SDK attempts to establish a connection using the API key provided. If the connection is successful, the SDK will begin sending performance data to the Polaris platform.

Conclusion

Performance matters.

While AG Grid is a high-performance grid library, it's important to measure the real-user runtime performance of your AG Grid implementation. At a minimum, our SDK measures the time to grid ready and the time to first render for all grids in your web application. We recommend using the Polaris SDK to instrument other key events in your application to ensure you are delivering the best possible user experience.