nv-grid

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

props

이름	타입	기본값	설명
row-data	List	array	`Grid에 표시될 데이터 리스트
grid-options	Object	width: 100%; height: 98%;	ag-grid 옵션 객체
keep-column-state	boolean	false	컬럼 상태 저장 여부
pagination	Object		페이지네이션 관련 설정

예제

  <nv-grid ref="UserGrid"
           :rowData="list"
           :gridOptions="grid.option"
           :keepColumnState="true"
           :pagination="pagination">
  </nv-grid>
    <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-pagination

서버 기반의 부트스트랩 스타일 페이지네이션 컴포넌트로, REST API와 함께 사용하여 페이지 이동, 총 카운트 관리, 정렬, 커스텀 콜백 등을 제공합니다. 부모 컴포넌트의 그리드 컴포넌트와 연동하여 사용합니다.

이름	타입	기본값	설명
service	Object		API를 호출할 서비스 객체 (.list() method 필요)
query	Object	{}	API 요청 시 기본으로 넘길 쿼리 파라미터
paginated			페이지 이동 후 결과 emit, 응답 데이터 전달

예제

  <nv-pagination ref="pagination" class="float-left" :service="service" :query="query" @paginated="paginated"></nv-pagination>