Angular Data GridQuick Start

ReactAngularVueJavascript

Create a grid in 60 Seconds

At a minimum, three things are required to create a grid:

• Container: for the grids placement in your application.
• Styles: to define the grid's theme & dimensions.
• Row Data & Column Definitions: to define the data and how it should be displayed.

Install

First, install the ag-grid-angular library:

npm install ag-grid-angular

Create a Component

Then, create a new component in your application with the required dependencies:

import { Component } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular'; // Angular Grid Logic
import { ColDef } from 'ag-grid-community'; // Column Definitions Interface

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AgGridModule], // Add AG Grid Module to component
  styleUrls: ['./app.component.css'],
  template: ``
})

export class AppComponent {}

Row Data & Column Definitions

Next, add the rowData and colDefs arrays to your component to define the data and how it should be displayed:

export class AppComponent {
  // Row Data: The data to be displayed.
  rowData: [
    { mission: "Voyager", company: "NASA", location: "Cape Canaveral", date: "1977-09-05", rocket: "Titan-Centaur ", price: 86580000, successful: true },
    { mission: "Apollo 13", company: "NASA", location: "Kennedy Space Center", date: "1970-04-11", rocket: "Saturn V", price: 3750000, successful: false },
    { mission: "Falcon 9", company: "SpaceX", location: "Cape Canaveral", date: "2015-12-22", rocket: "Falcon 9", price: 9750000, successful: true }
  ];

  // Column Definitions: Defines & controls grid columns.
  colDefs: ColDef[] = [
    { field: "mission" },
    { field: "company" },
    { field: "location" },
    { field: "date" },
    { field: "price" },
    { field: "successful" },
    { field: "rocket" }
  ];
}

This is a basic example of Row Data & Column Definitions. The column definitions will access data via the provided field property, which maps directly to fields inside of the rowData objects.

Rendering the Grid

Then, add the ag-grid-angular component to the template with rowData and colDefs as props:

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

Styling the Grid

Finally, configure the theme & dimensions for the grid. First, import the required dependencies into your styles.css file:

/* Core Grid CSS */
@import 'ag-grid-community/styles/ag-grid.css';
/* Quartz Theme Specific CSS */
@import 'ag-grid-community/styles/ag-theme-quartz.css';

Then add the class and style props to the ag-grid-angular component to define the theme and dimensions for the grid:

<ag-grid-angular
  class="ag-theme-quartz"
  style="height: 500px;"
  ...
>
</ag-grid-angular>

Result

When you run your application, you should see a basic grid with three rows. To see the full code, click the </> Code button below the example.

Next Steps

• Read our Introductory Tutorial.
• Watch our Video Tutorials.