Getting Started

Overview

Learn how to create and configure an AG Grid instance from scratch. This guide introduces the essential concepts required to build an interactive grid, including setting up row data, defining columns, applying grid options, formatting cell values, and adding custom components.

Step-by-step Tutorial

In this tutorial you will:

  1. Create a basic grid
  2. Load external data into the grid
  3. Configure columns
  4. Configure grid features
  5. Format cell values
  6. Add custom components to cells
  7. Hook into grid events

Create a Basic Grid

Complete our Quick Start to start with a basic grid, comprised of:

  1. Row Data: The data to be displayed.
  2. Column Definition: Defines & controls grid columns.
  3. Grid Component: The ag-grid-angular component, with Dimensions, Row Data, and Column Definition attributes.

Load New Data

As rowData is a managed property, any updates to its value will be reflected in the grid. Let's test this by fetching some data from an external server with Angular's HttpClient and updating rowData with the response.

First we need to hook into the gridReady event:

<ag-grid-angular
 style="width: 100%; height: 550px;"
 [rowData]="rowData"
 [columnDefs]="colDefs"
 (gridReady)="onGridReady($event)"
/>

Now load data into the grid when ready:

// Load data into grid when ready
onGridReady(params: GridReadyEvent) {
 this.http
 .get<any[]>("https://www.ag-grid.com/example-assets/space-mission-data.json")
 .subscribe(data => this.rowData = data);
}

Configure Columns

Now that we have a basic grid, we can start to configure the grid with Column Properties. Add the filter: true property to enable filtering:

colDefs: ColDef[] = [
 { field: "mission", filter: true },
 // ...
];

Configure The Grid

Grid Options control functionality that extends across both rows & columns, such as Pagination and Row Selection. Enable pagination:

<ag-grid-angular
 ...
 [pagination]="true"
/>

Format Cell Values

Value Formatters are basic functions which take the value of the cell, apply some formatting, and return a new value to be displayed:

colDefs: ColDef[] = [
 {
 field: "price",
 valueFormatter: params => { return '£' + params.value.toLocaleString(); }
 },
 // ...
];

Custom Cell Components

For more advanced use-cases we can use Cell Renderers. Create a custom component:

@Component({
 selector: 'app-company-logo-renderer',
 template: `<span>@if(value){<img [alt]="value" [src]="'https://www.ag-grid.com/example-assets/space-company-logos/' + value.toLowerCase() + '.png'" /> <p>{{ value }}</p>}</span>` 
})
export class CompanyLogoRenderer implements ICellRendererAngularComp {
 public value!: string;
 agInit(params: ICellRendererParams): void {
 this.value = params.value;
}
}

Then use the custom component in your column definition:

colDefs: ColDef[] = [
 {
 field: "company",
 cellRenderer: CompanyLogoRenderer
 }
];

Handle Grid Events

To be notified of when an event is raised by the grid add the relevant event name attribute:

// Handle cell editing event
onCellValueChanged = (event: CellValueChangedEvent) => {
 console.log(`New Cell Value: ${event.value}`)
}

Summary

Congratulations! You've completed the tutorial and built your first grid. You should be familiar with the key concepts of AG Grid:

  • Row Data: Your data, in JSON format, that you want the grid to display.
  • Column Definitions: Define your columns and control column-specific functionality, like sorting and filtering.
  • Grid Options: Configure functionality which extends across the entire grid.
  • Grid Events: Events raised by the grid, typically as a result of user interaction.