Angular Data GridQuick Start
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>
Other included themes can be found on the Themes page.
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.
To live-edit the code, open the example in CodeSandbox or Plunkr using the buttons to the lower-right.
Next Steps
- Read our Introductory Tutorial.
- Watch our Video Tutorials.