[Vue][AG-Grid] Column Properties

cjh951114·2021년 10월 4일
0

AG-Grid

목록 보기
7/9
post-thumbnail

📖 Column Properties

column ColDef 및 column group ColGroupDef에 대한 properties들을 사용할 수있다.

🌏 Column

이름설명
fieldcell data를 가져올 행의 필드
colIdcolumn에 부여할 고유 ID (선택사항)
누락된 경우 field로 설정됨.
typecolumn의 템플릿으로 사용할 수 있는 쉼표로 구분된 문자열 또는 columnType키가 포함된 문자열 배열.
checkboxSelectionboolean or checkboxSelection 콜백.
열에서 선택확인란을 렌더링하려면 true로 설정.
기본 : false
suppress ~~true로 설정되면 suppress 뒤의 동작을 억제함.
ex) suppressKeyboardEvent : 그리드 셀에서 특정 키보드 이벤트를 억제.

🌏 Column : Display

이름설명
editabletrue면 이열을 편집할 수 있게 설정.
기본값 : false
cellEditor이 column(해당 column)에 사용될 cellEditor
cellEditorPopuptrue설정 시 셀 편집기가 팝업으로 표시됨.

🌏 Column : Events

이름설명
onCellValueChanged편집 또는 응용 프로그램 호출로 인해 셀 값이 변경된 후 의 콜백
onCellClicked / onCellDoubleClickedcell을 클릭 / 더블클릭시 호출되는 콜백
onCellContextMenu셀을 마우스 오른쪽 버튼으로 클릭하면 콜백이 호출됨.

🌏 Column : Filter

이름설명
Filter이 열에 사용될 필터 구성 요소.

🌏 Column : Header

이름설명
headerNameColumn Header에 보여줄 Title 이름.
suppressMenutrue면 header에 대해 메뉴가 표시되지 않아야 하는 경우로 설정.
header에 메뉴 노출 여부, true인 경우 칼럼 메뉴가 사라진다.

🌏 Column : pinned

이름설명
pinned열을 한쪽에 고정
right | left

🌏 Column : Rendering & Styling

이름설명
cellStyle특정 셀에대한 css값의 object를 반환하는 함수
cellClass셀에 사용할 클래스
autoHeight그리드가 열의 내용을 기반으로 행의 높이를 계산

🌏 Column : Sort

이름설명
sortable해당 column에 대해 정렬 할 수 있는지에 대해
default : false
sort정렬에 대한 설정
asc | desc

🌏 Column : Width

이름설명
width셀의 초기 너비
minWidth / maxWidth최소 / 최대 너비
resizabletrue면 열의 크기를 조정할 수 있다.
suppressSizeToFit작업중에 크기에 맞게 column의 너비를 고정하려면 true로 설정
suppressAutoSizetrue면 열의 가장자리를 두번 클릭하여 이 열의 크기를 자동으로 조정하게 설정.

📘 참고

https://www.ag-grid.com/vue-data-grid/column-properties/

profile
깃허브 : github.com/JuneHyung

0개의 댓글