Unvus Docs

Appearance

nv-grid ​

ag-grid-vue3를 기반으로 만든 Vue 3 컴포넌트로, 고급 그리드 기능과 사용자 컬럼 설정 기능을 통합하여 재사용 가능하게 만든 커스텀 그리드입니다.

props ​

이름타입기본값설명
grid-classStringag-grid에 적용할 CSS 클래스
grid-styleString'width: 100%; height:98%;'ag-grid의 style 속성
serviceObject외부 API 요청용 서비스 객체
queryObject데이터 요청 쿼리 객체
paginationObject페이징 처리 및 정렬용 객체
resizableBooleanfalse컬럼 사이즈 조정 여부
key-propString'id'고유 식별자로 사용할 row key 필드명
row-heightString | Number35ag-grid row 높이
keep-column-stateBooleanfalse컬럼 상태(정렬, 너비 등)를 유지할지 여부
enable-cell-text-selectionBooleantrue셀 텍스트 드래그 선택 가능 여부
row-dataanynull그리드에 표시할 데이터
grid-optionsObjectag-grid의 native 옵션 객체
grid-idString'grid-' + generateId('grid')grid 식별자 (event bus 및 설정 관리용)
...ag-grid-props다양ag-grid-utils에서 정의한 기본 props 포함ag-grid에 필요한 나머지 속성 자동 포함 (columnDefs, defaultColDef 등)

Emits ​

이름설명
nv-grid-ready그리드 초기화 완료 시 호출. 인자로 params 객체 전달
nv-sorted컬럼 정렬 변경 시 호출. 현재 columnState 전달
nv-selection-changedrow 선택 상태 변경 시 호출 (사용자가 row 선택 시 등)
nv-row-drag-endrow drag & drop 종료 시 호출. 전체 row data 배열 전달
nv-row-clickedrow 클릭 시 호출. 해당 row의 data 객체 전달

기본 ​

html
  <nv-grid ref="Grid"
           :rowData="list"
           :gridOptions="grid.option"
           :keepColumnState="true"
           :pagination="pagination">
    <nv-grid-col headerName="번호" field="positionIdx" :width="50" :cellStyle="grid.style.end"></nv-grid-col>
    <nv-grid-col headerName="제목" field="title" :width="150" :flex="1"></nv-grid-col>
  </nv-grid>

Row Click ​

  • @nv-row-clicked 을 이용하여 row 클릭시 데이터를 가져올 수 있습니다.
vue
<nv-grid ref="UserGrid"
         :row-data="list"
         :grid-options="grid.option"
         keep-column-state
         @nv-row-clicked="rowClicked"
>...</nv-grid>

<script setup lang="ts">
    const rowClicked = (data) => {
        alert(JSON.stringify(data));
    }
</script>

row click으로 detail 모달 열기 ​

vue
<nv-grid ref="BoardGrid"
         :row-data="list"
         :grid-options="grid.option"
         keep-column-state
         :pagination="pagination"
         @nv-row-clicked="openDetail"
>...</nv-grid>

<script setup lang="ts">
    const openDetail = (data) => {
        const {open,} = useModal({
            component: CommonDetailModal,
            attrs: {
                label: '보드',
                id: data.id,
                componentName: 'board-detail',
                comp: detailComponent
            }
        });
        open();
    }
</script>

Checkbox Select ​

  • gridRef.value.api.getSelectedRows()를 사용하여 선택한 row의 데이터를 가져올 수 있습니다.
vue
<nv-grid ref="gridRef"
         :row-data="list"
         :grid-options="grid.option"
         keep-column-state
         @nv-row-clicked="rowClicked"
>
    <nv-grid-col :width="50"
                 :header-checkbox-selection="true"
                 :header-checkbox-selection-filtered-only="true"
                 :checkbox-selection="true"/>
    ...
</nv-grid>

<script setup lang="ts">
    const gridRef = useTemplateRef('gridRef');
    
    const selectRowData = () => {
        const selected = gridRef.value.api.getSelectedRows();
        alert(JSON.stringify(selected));
    }
</script>

여러개의 grid를 한 페이지에서 사용할 때 ​

  • grid-options는 서로 다른 객체를 사용해야 합니다.
vue
<nv-grid ref="multiGird1"
         :row-data="list"
         :grid-options="gridOptions3"
         keep-column-state
>
...
</nv-grid>
<nv-grid ref="multiGird2"
         :row-data="list2"
         :grid-options="gridOptions4"
         keep-column-state
>
...
</nv-grid>

<script setup lang="ts">
    const gridOptions3 = JSON.parse(JSON.stringify(grid.option));
    const gridOptions4 = JSON.parse(JSON.stringify(grid.option));
</script>

WARNING

하나의 gridOptions 객체를 여러 그리드에 공유할 경우, 다음과 같은 문제가 발생할 수 있습니다.

  • columnApi, api, columnState 등이 겹쳐서 충돌
  • 그리드 상태(정렬, 필터, 컬럼 너비 등)가 서로 영향을 줌
  • 일부 이벤트가 한 그리드에서 발생해도 다른 그리드로 전파