iflex docs

Appearance

nv-grid-col ​

nv-grid 내부에서 사용하는 컬럼 정의용 컴포넌트로, slot을 이용한 커스텀 셀 렌더링 기능을 제공합니다. 이 컴포넌트는 마운트 시 자동으로 nvGrid.columnDefs.added 이벤트를 통해 nv-grid에 컬럼 정의를 전달합니다.

props ​

이름타입기본값설명
headerNamestringag-grid 클래스 이름 지정
fieldstringag-grid 옵션 객체
widthnumber컬럼 너비
minWidthnumber컬럼 최소 너비
flexnumberFlexbox 기능 설정
cellStylestring컬럼 스타일
pinnedstring열 고정 여부('left', 'right')
sortKeystring컬럼 정렬 기능 활성화

width ​

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

:width 속성이 설정 된 경우 아래와 같이 빈 공간이 생길 수 있습니다.

html
  <nv-grid ref="UserGrid"
    :rowData="list"
    :gridOptions="grid.option"
    :keepColumnState="true">
    <nv-grid-col headerName="번호" field="positionIdx" :cellStyle="grid.style.end" width="50"></nv-grid-col>
    <nv-grid-col headerName="제목" field="title" :width="150"></nv-grid-col>
    <nv-grid-col headerName="정렬필드" field="sortField"></nv-grid-col>
    <nv-grid-col headerName="언버스" field="field1"></nv-grid-col>
  </nv-grid>

flex, minWidth ​

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

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

html
<nv-grid ref="UserGrid"
         :rowData="list"
         :gridOptions="grid.option"
         :keepColumnState="true">
    <nv-grid-col headerName="번호" field="positionIdx" :cellStyle="grid.style.end" :width="50"></nv-grid-col>
    <nv-grid-col headerName="제목" field="title" :minwidth="150" :flex="1"></nv-grid-col>
    <nv-grid-col headerName="정렬필드" field="sortField"></nv-grid-col>
    <nv-grid-col headerName="언버스" field="field1"></nv-grid-col>
</nv-grid>

TIP

하나의 그리드에 적어도 한 컬럼은 이 처럼 여분 컬럼으로 사용해야 합니다.

  • flex="1" 의 의미는 나머지 공간의 차지하는 비율을 의미합니다.

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

pinned ​

특정 컬럼을 좌, 우 기준으로 고정

html
<nv-grid ref="UserGrid"
         :rowData="list"
         :gridOptions="grid.option"
         :keepColumnState="true">
    <nv-grid-col headerName="번호" field="positionIdx" :cellStyle="grid.style.end" :width="50"></nv-grid-col>
    <nv-grid-col headerName="제목" field="title" :minWidth="50" :flex="1"></nv-grid-col>
    <nv-grid-col headerName="정렬필드" field="sortField"></nv-grid-col>
    <nv-grid-col headerName="언버스" field="field1" pinned="right"></nv-grid-col>
</nv-grid>

sortKey ​

컬럼 sort 기능 활성화

html
<nv-grid ref="UserGrid"
         :rowData="list"
         :gridOptions="grid.option"
         :keepColumnState="true">
    <nv-grid-col headerName="번호" field="positionIdx" :cellStyle="grid.style.end" :width="50"></nv-grid-col>
    <nv-grid-col headerName="제목" field="title" :minWidth="50" :flex="1"></nv-grid-col>
    <nv-grid-col headerName="정렬필드" field="sortField" sortKey="sortField"></nv-grid-col>
    <nv-grid-col headerName="언버스" field="field1"></nv-grid-col>
</nv-grid>