AG Grid

데이터 허브 관련 UI를 작업하던 도중, 처음 접해보는 라이브러리를 발견했습니다.

그것은 바로 AG Grid인데요. 이것이 무엇인지 알아봅시다!

 

---

1. AG Grid

AG Grid란?

(AG Grid 공식 홈페이지 바로가기)

 

고성능의 JavaScript 데이터 그리드 라이브러리로, 다양한 기능과 유연성을 제공하여 웹 애플리케이션에서 복잡한 테이블과 데이터를 효과적으로 관리하고 표시할 수 있게 지원합니다.

 

---

2. AG Grid 설치

그럼 바로 AG Grid를 설치해 봅시다!(저는 Vue를 사용했어요,) 설치 공식 문서

 

1) NPM 설치

다음과 같이 입력하여, 라이브러리를 설치해 줍니다.

npm install ag-grid-vue3

 

2) Vue 데이터 그리드 가져오기

그럼 이제 데이터 그리드를 가져와야겠죠?

AG Grid를 사용할 파일에 다음과 같이 입력해 줍시다.

App.vue

<template></template>

<script>
import { ref } from 'vue';
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the Data Grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the Data Grid
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

export default {
 name: "App",
 components: {
   AgGridVue, // Add Vue Data Grid component
 },
 setup() {},
};
</script>

 

3) 행과 열 정의

가져오는 단계가 끝났다면, setup( ) 함수 안에 다음과 같이 입력해 줍시다.

setup() {
 // Row Data: The data to be displayed.
 const rowData = ref([
   { make: "Tesla", model: "Model Y", price: 64950, electric: true },
   { make: "Ford", model: "F-Series", price: 33850, electric: false },
   { make: "Toyota", model: "Corolla", price: 29600, electric: false },
 ]);

 // Column Definitions: Defines the columns to be displayed.
 const colDefs = ref([
   { field: "make" },
   { field: "model" },
   { field: "price" },
   { field: "electric" }
 ]);

 return {
   rowData,
   colDefs,
 };
},

colDefs라는 열 데이터 안에 make, model, price, electric이라는 필드를 정의해 주었고, rowData라는 행 데이터 안에 방금 코드같이 각각 정의해 주었습니다.

 

4) Vue 데이터 그리드 구성요소

<template> 태그 안에 다음과 같이 입력해 줍시다.

<template>
 <!-- The AG Grid component -->
 <ag-grid-vue
   :rowData="rowData"
   :columnDefs="colDefs"
   style="height: 500px"
   class="ag-theme-quartz"
 >
 </ag-grid-vue>
</template>

행과 열은 ag-grid-vue 구성 요소 속성으로 설정됩니다.

스타일은 class 및 style 속성을 통해 적용됩니다.

 

5) 결과 확인

그럼 어떻게 나왔는지 확인해 볼까요?

Vue를 실행해 줍시다.

정상적으로 나왔네요!

 

---

3. AG Grid 칼럼 정의

AG Grid에 사용하는 주요 칼럼 속성들에 대해 알아봅시다.

※ ( )안은 속성 값(Value)입니다.

 

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

 

---

4. 정리하며

지금까지 AG Grid에 대해 알아보았습니다.
이를 활용하여, 데이터 그리드를 더욱 쉽게 표현할 수 있을 것 같아요!

 

참고
AG Grid 공식 홈페이지
이수빈 님의 AG GRID 기본 사용법
까오기 님의 AG-GRID 소개
까오기 님의 AG-GRID 칼럼 정의