Ag Grid

컬럼 너비

width

컬럼의 너비는 :width 속성에 숫자로 조정합니다.

<nv-grid-col headerName="상품 유형" field="type" :width="200">

flex 와 minWidth

모든 컬럼들이 고정 너비(width)를 가지게 되면, 다음과 같이 빈 공간이 생길 수 있습니다.

만약 특정 컬럼이 전체 그리드 너비의 나머지 여유분을 차지하게 하고 싶으면

:flex="1" 과 :minWidth 속성의 조합으로 구성합니다.

<nv-grid-col headerName="상품명" field="title" :flex="1" :minWidth="200"></nv-grid-col>

• flex="1" 의 의미는 나머지 공간의 차지하는 비율을 의미합니다.
  만약 하나 이상의 컬럼이 flex 속성을 가지고 각각 1 과 2 라는 값을 가진다면 그 비율만큼 나머지 공간을 분할해서 차지하게 됩니다.

컬럼 사용자 정의

컬럼 너비와 순서, 그리고 컬럼 사용 여부를 사용자가 직접 선택 할 수 있습니다.
해당 기능은 nv-grid.vue 콤포넌트에 담겨 있으며, 설정 버튼 노출은 nv-list-body.vue 에서 담당하게 됩니다.

그리고 해당 기능은 기본적으로 off 되어 있으며 이를 활성화 하려면 keepColumnState 속성을 true 로 설정합니다.

<nv-grid ref="prodGrid"
         :rowData="list"
         :gridOptions="grid.option"
         :keepColumnState="true"
         :pagination="$refs.pagination">