In my opinion (and Google Software Engineer’s too) ag-Grid community edition is the best free data Grid available so far, I’ve tested it, examined its performance, and concluded that it’s the simplest and the best in terms of implementation, customization and performance. Here are some numbers that speak about it :

• 600 K monthly downloads
• 50% of the 500 Fortune use ag-Grid Entreprise Edition
• Zero dependencies
• Works With All Major JS Frameworks like Vue Angular React and Polymer

Setup with Angular

Add ag-Grid to Your Project

npm install -g @angular/cli
ng new my-app --style scss --routing false
cd my-app
ng serve

Add the ag-Grid NPM packages. run the following command in my-app (you may need a new instance of the terminal):

npm install --save ag-grid-community ag-grid-angular
npm install # in certain circumstances npm will perform an "auto prune". This step ensures all expected dependencies are present

add the ag-Grid Angular module to our app module (src/app/app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

add the ag-Grid styles – replace the content of styles.csswith the following code:

@import "../node_modules/ag-grid-community/src/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/src/styles/ag-theme-material/css/ag-theme-material-mixin.css";

declare the basic grid configuration. Edit src/app.component.ts:

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'app';

    columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
}

Finally, let’s add the component definition to our template. Edit app/app.component.html and remove the scaffold code:

<ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>