code for aggrid integration


command
===========================================================
npm install --save ag-grid-community ag-grid-angular

Style.css
===========================================================
@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-balham.css';

appmodule.ts
=============================================================
import { AgGridModule } from 'ag-grid-angular';
AgGridModule.withComponents(null),

html
============================================================
<ag-grid-angular style="margin-top:10px;height:380px !important" class="ag-theme-balham"
[columnDefs]="customerDataHeader"
[rowData]="customerData">
</ag-grid-angular>

ts file
============================================================
customerDataHeader = [
    { headerName: 'Name', field: 'name', filter: true, minWidth: 150, cellStyle:{'font-size': '14px' }},
    { headerName: 'Mobile Number', field: 'mobile', filter: true,minWidth: 120, cellStyle:{'font-size': '14px'  }},
    { headerName: 'Email', field: 'email', filter: true ,minWidth: 181, cellStyle:{'font-size': '14px'  }},
    { headerName: 'Gap', field: 'gap', filter: true,minWidth: 441, cellStyle:{'font-size': '14px'  }},
  ];
 



customerData = [{name:'saikrishna',mobile:'7777722222',email:'nsaik@gmail.com',gap:'2222'},
{name:'Angular',mobile:'1111177777',email:'angular@gmail.com',gap:'1111'},
{name:'humayun',mobile:'1111188888',email:'asukumar@gmail.com',gap:'4444'},
{name:'vihari',mobile:'2222200000',email:'karun@gmail.com',gap:'5555'},
{name:'girivardhan',mobile:'7777799999',email:'ggiri@gmail.com',gap:'6666'}]



1.pagination
================================
[pagination]="true"
[paginationPageSize]="4"

2.Index column
==================================
valueGetter: "node.rowIndex + 1"

3.Cell Styling:
===================================
cellStyle:{'font-size': '14px'}

4.filter data
====================================
filter: true

5.editing cells
=====================================
editable: true

6.specify width
=====================================
 width: 100








Comments