데이터 테이블 (Data table)

v-data-table 컴포넌트는 데이터를 테이블 형태로 보여줍니다. 정렬(sorting), 검색(searching), 페이지네이션(pagination), 선택(selection) 등이 가능합니다.

사용법

표준 데이터 테이블은 추가 기능 없이 데이터를 보여줍니다. The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.


API

v-data-table

예제

슬롯: no-data

no-data 슬롯(slot)은 데이터가 없을 경우 보여지는 커스텀 HTML 에 쓰입니다.


슬롯: items 과 headers

itemsheaders 슬롯엔 td/th 태그 모음이나 전체 row 를 제어하고 싶을 경우 tr 태그를 넣습니다.


슬롯: headerCell

만약 각 헤더 셀(header cells)에 공용 마크업이나 이펙트를 적용하고 싶으면 headerCell 슬롯을 사용합니다. 이 예제는 각 헤더에 툴팁을 적용합니다.


슬롯: progress

progress 슬롯은 데이터 테이블의 로딩 상태 표시를 커스터마이즈 할 수 있습니다. 기본 값은 indeterminate v-progress-linear 입니다.


슬롯: expand

expand 슬롯을 이용하여 확장 가능한 행(row)을 만들 수 있습니다. expand prop으로 다른 행(row)을 클릭했을때 확장된 행이 닫히는 것을 방지할 수 있습니다.


슬롯: page-text

page-text 슬롯으로 전체 아이템수와 표시된 범위를 나타내는 페이지 텍스트를 바꿀 수 있습니다.


선택 가능한 행 (Selectable rows)

선택 가능한 열은 특정 행이나 전체 행에 대한 액션을 실행할 수 있도록 해줍니다. (Selectable rows allow you to perform an action on specific and all rows.)


Custom icons

이전/다음 페이지네이션 아이콘과 정렬아이콘을 prev-icon, next-icon and sort-icon props으로 바꿀 수 있습니다.


외부 페이지네이션 (External pagination)

페이지네이션(Pagination)은 pagination prop을 통해 외부에서 제어될 수 있습니다. .sync 수식어(modifier)를 반드시 사용해야 합니다.


외부 정렬 (External sorting)

정렬 또한 pagenation prop을 통해 외부에서 제어될 수 있습니다. .sync 수식어(modifier)를 반드시 사용해야 한다는 것을 기억하세요. pagenation prop으로 또한 기본 정렬 열(default sorted column) 을 정할 수도 있습니다.


서버사이드 페이지네이트와 검색 (Paginate and sort server-side)

If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes. Use the loading prop to display a progress bar while fetching data.


헤더가 없는 테이블 (Headerless tables)

hide-headers prop은 헤더가 없는 테이블을 만듭니다.


인라인 편집 (Inline Editing)

v-edit-dialog 컴포넌트로 데이터 테이블 내에서의 인라인 편집이 가능합니다. *persistent prop 을 추가하여 외부를 클릭했을 때 다이얼로그가 닫히는 것을 막을 수 있습니다.


CRUD 액션

데이터 테이블에서 v-dialog 컴포넌트를 이용해 각 행을 편집하는 방식의 CRUD 액션입니다. (data-table with CRUD actions using a v-dialog component for editing each row)