AG-GRID 칼럼 정의

1. Column Definitions 

자주 사용하면서 필수 값에 대해 설명합니다. 

예제)

var columnDefs = [
    {headerName:"Athlete", 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},
    {headerName:"Country", field: "country", width: 120},
    {headerName:"Year", field: "year", width: 90},
    {headerName:"Date", field: "date", width: 110},
    {headerName:"Sport", field: "sport", width: 110},
    {headerName:"Gold Medal", field: "gold", width: 100},
    {headerName:"Silver Medal", field: "silver", width: 100},
    {headerName:"Bronze Medal", field: "bronze", width: 100},
    {headerName:"Total", field: "total", width: 100}
];

주요 속성 

Attribute	value	description
headerName	Title	그리드 헤더에 보여주는 title
field	data field	json data에 선언이 되어 있는 field와 바인딩된다.
width	칼럼 길이	칼럼 가로 사이즈, 자동 맞춤으로 하는 경우 무시된다.
minWidth	최소 칼럼 길이	최소 칼럼 사이즈로 자동 맞춤을 하더라도 유지되는 최소 값이다.
pinned	left | right	칼럼 고정시 이용, 칼럼 고정이 되면 왼쪽 또는 오른쪽에 고정이 되고 스크롤에서 제외된다.   칼럼을 자동 맞춤으로 하는 경우는 의미가 없다.
suppressSizeToFit	true | false	자동 맞춤 강제여부
suppressMenu	true | false	헤더에 메뉴 노출 여부, true인 경우 칼럼 메뉴가 사라진다.
suppressSorting	true | false	정렬 기능 강제여부, true인 경우 정렬이 고정이 된다.
sort	asc | desc	정렬 순서 정의
hide	true | false	hide가 true인 경우 감춰진다.
editable	true | false	수정 여부, true인 경우 데이터를 수정할 수 있다.
cellEditor	true | false	편집 컴포넌트 지정. agSelectCellEditor, datePicker, agLargeTextCellEditor
cellStyle	스타일지정	cell 스타일 지정 e.g. {"textAlign":"center", "backgroundColor":"#f4f4f4"}
cellRenderer	renderer	cell renderer, e.g. 값을 M | F로 받고 보여 주는 것은 남성 | 여성 또는 그래프나 아이콘으로 보여 주고 싶을 때 cellRenderer를 이용해서 구현하면 쉽게 표현 할 수 있습니다.
cellClass	클래스명	cell의 클래스명 지정

기타 cellEditorParams, valueFormatter, valueParser 등을 사용합니다. 

참고 

https://www.ag-grid.com/javascript-grid-column-definitions/