Angular7 ag-Grid 도입

오늘은 ag-Grid에 대해서 알아보겠습니다. https://www.ag-grid.com/

 

ag-Grid에는 community 버전과 enterprise 버전이 있습니다. 제가 사용할 버전은 community 버전!

 

 

(1) 모듈 설치

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

 

 

 

(2) src/app/app.module.ts 파일에 모듈 등록

import { AgGridModule } from 'ag-grid-angular';

imports: [
	...,
    AgGridModule.withComponents([]) 
]

(3) src/style.css 파일에 스타일 등록

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css"; //기본 테마
@import "~ag-grid-community/dist/styles/ag-theme-balham-dark.css"; // 블랙 테마 

* 제공되는 테마는 아래 도큐먼트에서 확인 가능
https://www.ag-grid.com/javascript-grid-themes-provided/

준비는 완료되었다.

 

(4) 사용하고싶은 component에 등록
(4-1) test/test.component.html

<ag-grid-angular #agGrid id="myGrid" 
	style="min-width: 500px; min-height: 500px;"
    [ngClass]="theme"                            //테마 설정
    [rowData]="rowData"                          //row 데이터
    [defaultColDef]="defaultColDef"              //컬럼 별 default로 설정될 값
    [columnDefs]="columnDefs"                    //컬럼별 설정
    [pagination]="true"                          //paging 기능 추가 여부
    [paginationPageSize]=50                      //1 page 당 보여줄 row 개수
    [enableBrowserTooltips]="true"               //tooltip 설정 여부
    [rowHeight]="30"                             //단위 px, default 27px
    (gridReady)="onGridReady($event)"
    (firstDataRendered)="fitColumnsSize($event)" //처음 데이터 rendering 될 떄 호출할 함수 지정
    (rowDataChanged)="fitColumnsSize($event)"    //row data가 변경될 때 호출할 함수 지정
></ag-grid-angular>

(4-2) test/test.component.ts

gridApi;
gridColumnApi;
theme = "ag-theme-balham";
rowData = [];
columnDefs = [];

constructor(private http: HttpClient) {
	let this_ = this; 
    this.defaultColDef = {
    	resizable: true, //컬럼 사이즈 조절 가능 여부 
        lockPosition: true //컬럼 드래그로 이동 방지 
    }; 
    this.columnDefs = [
    	{ 
        	headerName: '컬럼1',
        	field: 'column_1', 
            width: 80, 
            minWidth: 60, 
            maxWidth: 100, 
            tooltipField: 'column_1', 
            cellStyle: { color: 'red', textAlign: "right", backgroundColor: "white" } 
        },
        { 
        	headerName: '컬럼2', 
            field: 'column_2', 
            width: 120, 
            suppressSizeToFit: true, 
            cellRenderer: function(params) {
            	return '<img src="assets/images/' + this_.getColumnTypeValue(params.value) + '.png" height="20px" width="20px"/> '; 
            }, //cell value를 다루고 싶을 때 
            tooltipValueGetter: function(params) {
            	return params.node.data.column_1 + " / " + (params.value).toString(); 
            } //tooltip 
        },
        ...
    ];
    
    this.http.get('/getRowData').subscribe((data) => { 
    	this.rowData = data; 
    }); //data의 type은 list, element는 dict여야 합니다. ex) data = [{"column_1": "row_1", "column_2": 1, ...}, {"column_1": "row_2", "column_2": 2, ...}, ...] }
}

onGridReady(params) { 
   	this.gridApi = params.api;
  	this.gridColumnApi = params.columnApi; 
} 
    
fitColumnsSize(params) { 
   	params.api.sizeColumnsToFit(); 
} //컬럼의 데이터에 맞춰서 사이즈 조절 

(4-3) test/test.component.css
표 데이터가 안나타날 때

/deep/ .ag-root-wrapper-body.ag-layout-normal {
	height: 400px; 
} 

표 헤더를 가운데 정렬하고 싶을 때

/deep/ .ag-header-cell-label {
	justify-content: center; 
} //ag-grid header에 모두 적용 

위 스타일로 가운데 정렬을 했지만 일부는 왼쪽 정렬 및 오른쪽 정렬을 하고 싶을 때

/deep/ [col-id=column_1] .ag-header-cell-text {
	width: 100%; 
	text-align: right; //오른쪽 정렬을 위함 (default 왼쪽 정렬) 
} //.ag-header-cell-text는 header의 span class명, columnDefs에 지정해준 각 field로 column id가 지정되는데 정렬할 컬럼을 명시해주기 위함