Angular Data GridQuick Start

AG Grid is a high-performance Angular Data Grid library for building Angular Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Angular Data Grid quick start video tutorial thumbnail

Create a Angular Data Grid

Add AG Grid to your application in 60 seconds:

NPM Install

Install the ag-grid-angular package, which also installs ag-grid-community:

npm install ag-grid-angular

Import the Angular Data Grid

import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface

Register Modules

Register the AllCommunityModule to access all Community features:

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

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);

To minimize bundle size, only register the modules you want to use. See the Modules page for more information.

Define Rows and Columns

// Register all community features
ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgGridAngular], // Add Angular Data Grid Component
    styleUrls: ['./app.component.css'],
    template: ``
})

export class AppComponent {
    // Row Data: The data to be displayed.
    rowData = [
        { 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 the columns to be displayed.
    colDefs: ColDef[] = [
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ];
}

Angular Data Grid Component

Set Rows and Columns as ag-grid-angular component attributes:

template:
`
    <!-- The AG Grid component -->
    <ag-grid-angular
        [rowData]="rowData"
        [columnDefs]="colDefs" />
`

Example Angular Data Grid

Below is a live example of the application running. Click </> Code to see the code.

To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

Next Steps

Now that you have a basic Angular Data Grid running, choose one of the following options to continue your learning journey: