Ag Grid Angular

 

Creating a Basic Grid

An introduction to the key concepts of AG Grid.

Overview 

In this tutorial you will:

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

Once complete, you'll have an interactive grid, with custom components and formatted data - Try it out for yourself by sorting, filtering, resizing, selecting, or editing data in the grid:

Create a Basic Grid 

Complete our Quick Start (or open the example below in CodeSandbox / Plunker) 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

import { Component } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";

import type { ColDef } from "ag-grid-community";

import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface

interface IRow {

  make: string;

  model: string;

  price: number;

  electric: boolean;

}

@Component({

  standalone: true,

  imports: [AgGridAngular],

  selector: "my-app",

  template: `

    <div class="content">

      <!-- The AG Grid component, with Dimensions, CSS Theme, Row Data, and Column Definition -->

      <ag-grid-angular

        style="width: 100%; height: 350px;"

        [rowData]="rowData"

        [columnDefs]="colDefs"

      />

    </div>

  `,

})

export class AppComponent {

  // Row Data: The data to be displayed.

  rowData: IRow[] = [

    { make: "Tesla", model: "Model Y", price: 64950, electric: true },

    { make: "Ford", model: "F-Series", price: 33850, electric: false },

    { make: "Toyota", model: "Corolla", price: 29600, electric: false },

  ];

  // Column Definitions: Defines & controls grid columns.

  colDefs: ColDef<IRow>[] = [

    { field: "make" },

    { field: "model" },

    { field: "price" },

    { field: "electric" },

  ];

}

Configure The Grid 

So far we've covered creating a grid, updating the data within the grid, and configuring columns. This section introduces Grid Options, which control functionality that extends across both rows & columns, such as Pagination and Row Selection.

Grid Options are passed to the grid via attributes on the ag-grid-angular component. Let's enable pagination by adding [pagination]="true":

<!-- The AG Grid component, with various Grid Option properties --> <ag-grid-angular ... [pagination]="true" />

Format Cell Values 

The data supplied to the grid usually requires some degree of formatting. For basic text formatting we can use Value Formatters.

Value Formatters are basic functions which take the value of the cell, apply some basic formatting, and return a new value to be displayed by the grid. Let's try this by adding the valueFormatter property to our 'price' column and returning the formatted value:

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

Custom Cell Components 

Value Formatters are useful for basic formatting, but for more advanced use-cases we can use Cell Renderers instead.

Cell Renderers allow you to use your own components within cells. To use a custom component, add the cellRenderer prop to a column and set the value to the name of your component.

Let's try this by creating a new component to display the company logo in the 'company' column:

// Custom Cell Renderer Component @Component({ selector: 'app-company-logo-renderer', standalone: true, imports: [CommonModule], 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>`, styles: ["img {display: block; width: 25px; height: auto; max-height: 50%; margin-right: 12px; filter: brightness(1.2);} span {display: flex; height: 100%; width: 100%; align-items: center} p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap }"] }) export class CompanyLogoRenderer implements ICellRendererAngularComp { // Init Cell Value public value!: string; agInit(params: ICellRendererParams): void { this.value = params.value; } // Return Cell Value refresh(params: ICellRendererParams): boolean { this.value = params.value; return true; } }