Vue ag-Grid : 컬럼 서식 정의

이전에 Vue에서 ag-Grid를 설치 사용하는 법에 대해 간략하게 적어보았습니다.

https://dong-queue.tistory.com/57

Vue에서 ag-Grid 사용하기

오늘은 컬럼 정의에 추가 가능한 다양한 옵션에 대해 설명하겠습니다.

 

우선 이전 글의 예제의 데이터를 조금 변형해 보겠습니다.

<template>
  <input type="text" @keyup="onQuickFilterChanged"/>
  <ag-grid-vue 
    style="width: 100%; height: 70vh; min-height: 300px" // 그리드 가로 , 세로 사이즈 설정
    class="ag-theme-balham" // 그리드 테마 설정
    :gridOptions="gridOptions" // 그리드 옵션
    :columnDefs="columnDefs" // 헤더 및 컬럼 속성 정의
    :rowData="rowData" // 데이터 값
    :gridReady="gridSizeFit" // 그리드 로드 완료시 event
    :gridSizeChanged="gridSizeFit" // 그리드 사이즈 변경시 event
  />
</template>

<script>
  import {AgGridVue} from 'ag-grid-vue'
  export default {
    components: {
      AgGridVue
    },
    data () {
      return {
      gridOptions: null,
      rowData: []
    },
    computed: {
      // 그리드 header명과, 매핑되는 data attribute, column type과 width, column id 등을 지정 가능합니다.
      // computed에 선언하지 않고 data에서도 선언 가능합니다.
      columnDefs () {
        return [
          {headerName: 'Make', field: 'make'},
          {headerName: 'Model', field: 'model'},
          {headerName: 'Grade', field: 'grade'},
          {headerName: 'Price', field: 'price'},
          {headerName: 'Stock', field: 'qty'}
        ]
      }
    },
    beforeMount () {
      // 그리드에 적용가능한 여러가지 옵션 사항을 설정합니다.
      this.gridOptions = {
         enableColResize: true,
         enableSorting: true,
         enableFilter: true,
         animateRows: false
      }
    },
    created () {
      makeData ()
    },
    methods: {
      makeData () {
        this.rowData = [
          {make: '현대', model: '아반떼', grade: '준중형', price: 2000, qty: 1},
          {make: '현대', model: '산타페', grade: '중형', price: 3500, qty: 1},
          {make: '현대', model: '소나타', grade: '중형', price: 3000, qty: 2},
          {make: '현대', model: '그랜저', grade: '준대형', price: 4000, qty: 3},
          {make: '기아', model: 'K3', grade: '준중형',price: 2000, qty: 2},
          {make: '기아', model: 'K5', grade: '중형', price: 3000, qty: 3},
          {make: '기아', model: 'K7', grade: '준대형', price: 4000, qty: 2}
        ]
      },
      gridSizeFit (params) {
        // 모니터나 브라우저 크기에 따라 반응하여 그리드 컬럼 사이즈를 조정합니다.
        if ( window.innerWidth > 800 ) // 화면 가로가 800 px 이 넘을 경우
		  params.api.sizeColumnsToFit() // 가로 스크롤바가 생기지 않도록 컬럼 사이즈를 그리드에 꼭 맞게 조정합니다.
        } else {
          // 컬럼의 데이터값이 잘리지 않도록 조정합니다.
          let allColumnIds = []
          this.gridOptions.columnApi.getAllColumns().forEach(function (column) {
            allColumnIds.push(column.colId)
          })
          this.gridOptions.columnApi.autoSizeColumns(allColumnIds)
        }
      },
      onQuickFilterChanged (event) {
        this.gridOptions.api.setQuickFilter(event.target.value)
      }
    }
  }
</script>

위와 같이 작성하면 대략 아래와 같은 형태로 그리드가 표시될 겁니다.

Make	Model	Grade	Price	Stock
현대	아반떼	준중형	2000	1
현대	산타페	중형	3500	1
현대	소나타	중형	3000	2
현대	그랜저	준대형	4000	3
기아	K3	준중형	2000	2
기아	K5	중형	3000	3
기아	K7	준대형	4000	2

1. 컬럼 정렬 및 서식 정의

가격과 재고수량은 우측 정렬을 하고 천단위 구분을 하는 것이 보기 좋을 것 같습니다.

columnDefs 부분을 아래와 같이 수정해 보겠습니다.

columnDefs () {
  return [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Grade', field: 'grade'},
    {headerName: 'Price', field: 'price', cellClass: 'cell-right', valueFormatter: (params) => {return Number(params.value).toLocaleString()} },
    {headerName: 'Stock', field: 'qty', cellClass: 'cell-right', valueFormatter: (params) => {return Number(params.value).toLocaleString()} }
  ]
}

컬럼 정의 부분에 cellClass와 valueFormatter 를 추가해서 아래와 같이 숫자 정렬 및 구분자를 추가 할 수 있게 되었습니다.

Make	Model	Grade	Price	Stock
현대	아반떼	준중형	2,000	1
현대	산타페	중형	3,500	1
현대	소나타	중형	3,000	2
현대	그랜저	준대형	4,000	3
기아	K3	준중형	2,000	2
기아	K5	중형	3,000	3
기아	K7	준대형	4,000	2

그런데 위 코드를 아래처럼 줄일 수도 있습니다.

beforeMount () {
  this.gridOptions = {
    columnTypes: {
      numberType: {cellClass: 'cell-right', valueFormatter: (params) => {return Number(params.value).toLocaleString()} }
    }
    ....... 나머지 동일
  }
  ....... 나머지 동일
},
computed: {
  columnDefs () {
    return [
      {headerName: 'Make', field: 'make'},
      {headerName: 'Model', field: 'model'},
      {headerName: 'Grade', field: 'grade'},
      {headerName: 'Price', field: 'price', type: 'numberType' },
      {headerName: 'Stock', field: 'qty', type: 'numberType' }
    ]
  }
}

위 처럼 grid option에 clumnType을 미리 지정하고 컬럼 정의에서는 type만 지정하면 동일한 효과를 얻을 수 있습니다.

 

2. 특정 조건에서 색상 바꾸기

수량이 3개 이상인 재고에 대해 색상을 변경해 보겠습니다.

아래와 같이 미리 class를 선언한 뒤 grid option에 rowClassRule을 추가하여 특정 조건이 만족하면 해당 class가 활성화 되도록 할 수 있습니다.

<script>
.......
beforeMount () {
  this.gridOptions = {
    rowClassRules: {
      'light-green': (params) => { return Number(params.data.qty) >= 3 } 
    }
    ....... 나머지 동일
  }
}
......
</script>
<style scope>
.light-green {
  background-color: rgba(0,255,0,0.1);
}
</style>

3. 행번호 붙이기

valueGetter를 이용하여 원래 데이터에는 없는 그리드 node의 index를 읽어 엑셀 처럼 행 번호가 붙도록 추가해 보겠습니다.

computed: {
  columnDefs () {
    return [
      {headerName: 'Seq', colId: 0, valueGetter: (params) => { return params.node.rowIndex + 1 } },
      {headerName: 'Make', field: 'make'},
      {headerName: 'Model', field: 'model'},
      {headerName: 'Grade', field: 'grade'},
      {headerName: 'Price', field: 'price', type: 'numberType' },
      {headerName: 'Stock', field: 'qty', type: 'numberType' }
    ]
  }
}

4. 그외

특정행만 edit 활성화, tooltip, min/max width, sort/filter enable, disable 등등

beforeMounted () {
  this.gridOptions = {
    .......
    enableSorting: false,
    enableFilter: false
  }
},
computed: {
  columnDefs () {
    return [
      {headerName: 'Seq', colId: 0, valueGetter: (params) => { return params.node.rowIndex + 1 }, sortable: true },
      {headerName: 'Make', field: 'make', editable: true },
      {headerName: 'Model', field: 'model', tooltip: true, tolltipField: 'remark'},
      {headerName: 'Grade', field: 'grade', maxWidth: 100, filter: true },
      {headerName: 'Price', field: 'price', type: 'numberType', minWidth: 100 },
      {headerName: 'Stock', field: 'qty', type: 'numberType' }
    ]
  }
}

위의 case 에서 말하고 싶은것은 gridOption에서는 전체 grid에 적용되는 option을, columnDef에서는 컬럼의 정의및 개별 컬럼 option을 정의한다는 것입니다. 단, 컬럼 정의가 grid option에 우선하여 적용됩니다.

gridOption에서 sorting을 사용하지 않는다고 해도 컬럼정의에서 sortable을 true로 한다면 해당 컬럼은 sorting 기능을 사용할 수 있게 됩니다.

적용가능한 grid option은 다음 링크에서

https://www.ag-grid.com/javascript-grid-properties/

ag-Grid

column property는 다음 링크에서 확인 부탁드립니다.

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

ag-Grid

 

다음에는 합계 표시에 대해 설명드리겠습니다.

https://dong-queue.tistory.com/69

vue ag Grid 합계 지정 하기

 

감사합니다.