[AG Grid] AG Grid 가이드 - Grid 및 관련 Options

 

이번 글은 AG Grid 공식 가이드 문서에서 제공하고 있는 글에서 Grid 및 관련 Option에 관한 글을 기록한다. AG-Grid를 적용하려니 모르는게 투성이다. 그래서 이렇게 기록한다.

---

1. Grid 생성 방법

그리드 인스턴스는 새 agGrid를 사용하여 생성됩니다.그리드()가 DOM 요소에 전달되어 그리드 및 그리드 옵션을 호스팅합니다.

 

1) 문법

new agGrid.Grid를 사용할 때 파라미터는 AG Grid를 적용시킬 <div> 태그의 ID인 div ID와 AG Grid의 옵션인 gridOptions 파라미터를 넣어주면 된다. 아래와 같이 사용하면 된다.

new agGrid.Grid(div ID, gridOptions);

 

2) 예시

document.addEventListener('DOMContentLoaded', function() {
	// div id 설정
	var gridDiv = document.querySelector('#myGrid'); 
	
	// ag-grid 생성     
	new agGrid.Grid(gridDiv, gridOptions); 
});

 

2. Grid 컬럼 정의 방법

아래와 같이, headerName에 변수를 넣어도 적용이 된다.

<script type="text/javascript">
	// 컬럼 정의
	let test = "이거 맞냐?"
	let columnDefs = [
		{headerName:test, field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
		{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'left', suppressMenu: true, suppressSorting : true},
	];
</script>

 

위의 코드를 실행해서 화면을 띄우면 아래와 같이 나온다.

 

3. AG Grid에 데이터 가져와서 뿌리기

2022.12.23 - [IT/AG Grid] - [AG Grid] AG Grid 데이터 가져오는 방법

[AG Grid] AG Grid 데이터 가져오는 방법

 

AG Grid에 데이터 뿌리는 방법은 위의 링크에서 확인하면 된다.

 

3. Grid Options

Grid Options Object를 사용하여 그리드에 옵션을 제공합니다.

 

1) pinned

- pinned 속성은 컬럼을 어느 방향에 고정을 할까에 대한 옵션을 준다.

- 즉, pinned 속성은 컬럼을 고정하여 좌우로 이동을 해도 컬럼이 고정되어 그 컬럼의 값을 지속적으로 보여준다.

 

 아래를 보자.

{headerName:test, field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'right', suppressMenu: true, suppressSorting : true},

 

test 컬럼은 pinned를 left, Age 컬럼은 pinned를 right로 줬다. 그랬더니 아래와 같이, 컬럼이 고정이 된다.

 

pinned에 대한 적용 순서는 left와 right가 다르다. 컬럼을 정의할 때, pinned를 left로 적용하면 순서대로 왼쪽에서부터 채워지지만, right를 하게 되면, 제일 먼저 정의된 것이 왼쪽으로 밀린다.

 

i) left 적용

아래의 순서로 left를 적용했다.

{headerName:test, field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'right', suppressMenu: true, suppressSorting : true},
{headerName:"Country", pinned:'left', field: "country", width: 120},
{headerName:"Year", pinned:'left', field: "year", width: 90},
{headerName:"Date", pinned:'left', field: "date", width: 110},
{headerName:"Sport", pinned:'left', field: "sport", width: 110},

 

제일 나중에 pinned를 left 적용한 것이 가장 오른쪽에 나온다.

 

ii) right 적용

{headerName:test, field: "athlete", width: 150, minWidth:120, pinned:'left', suppressSizeToFit: true, suppressMenu: true, sort: 'asc'},
{headerName:"Age", field: "age", width: 90, minWidth: 50, maxWidth: 100, pinned:'right', suppressMenu: true, suppressSorting : true},
{headerName:"Country", pinned:'right', field: "country", width: 120},
{headerName:"Year", pinned:'right', field: "year", width: 90},
{headerName:"Date", pinned:'right', field: "date", width: 110},
{headerName:"Sport", pinned:'right', field: "sport", width: 110},

 

위의 순서대로 pinned를 right로 적용하면 제일 먼저 적용한 Age 컬럼이 가장 왼쪽에 배치가 된다.

---

참고자료

https://www.ag-grid.com/javascript-data-grid/grid-interface/