데이터 테이블 (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
이름
custom-filter
디폴트
(items: object[], search: string, filter: Filter): object[]
타입
function

커스텀 검색 필터

이름
custom-sort
디폴트
(items: object[], index: number, isDescending: boolean): object[]
타입
function

커스컴 정렬 필터

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
disable-initial-sort
디폴트
false
타입
boolean

초기 랜더링에서 기본 정렬을 비활성화

이름
expand
디폴트
false
타입
boolean

테이블이 확장 가능한 행(row)를 가지도록 지정

이름
filter
디폴트
(val: object, search: string): boolean
타입
function

아이템을 필터링하는데 사용되는 함수

이름
header-key
디폴트
undefined
타입
string
이름
header-text
디폴트
'text'
타입
string

오브젝트를 사용할 경우 헤더의 텍스트 값

이름
headers
디폴트
[]
타입
array

각 헤더 컬럼을 정의하는 오브젝트의 배열(array). 모든 속성(propertiy)의 정의는 아래 예제를 참조하세요.

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}
이름
headers-length
디폴트
undefined
타입
number
이름
hide-actions
디폴트
false
타입
boolean

테이블 액션을 감춤

이름
hide-headers
디폴트
false
타입
boolean

테이블 헤더를 숨김

이름
item-key
디폴트
'id'
타입
string

유일한 키로 지정된 아이템 객체의 필드

이름
items
디폴트
[]
타입
array

테이블 행(row) 배열

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
loading
디폴트
false
타입
boolean | string

선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨

이름
must-sort
디폴트
false
타입
boolean

sorted ascending / sorted descending / unsorted 상태를 바꾸는(toggle) 대신 적어도 한 열(column)이 항상 정열되도록 함.

이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

컴포넌트 뒤에 아이콘을 덧붙임. v-icon과 같은 문법을 사용

이름
no-data-text
디폴트
'$vuetify.noDataText'
타입
string

데이터가 없을때 보여지는 문자열

이름
no-results-text
디폴트
'$vuetify.dataIterator.noResultsText'
타입
string

필터링 결과가 없을때 보여주는 문자열

이름
pagination.sync
디폴트
타입
object

데이터 테이블 외부에서 페이지네이션과 정렬을 제어하는데 사용됨. 기본 정렬 열(column)을 지정하는데도 사용됨

{
  descending: boolean
  page: number
  rowsPerPage: number // -1 for All
  sortBy: string
  totalItems: number
}
이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

컴포넌트 앞에 아이콘을 추가. v-icon과 같은 문법을 사용

이름
rows-per-page-items
디폴트
[ 5, 10, 25, { "text": "$vuetify.dataIterator.rowsPerPageAll", "value": -1 } ]
타입
array

row-per-page 드롭다운에 사용되는 기본값

이름
rows-per-page-text
디폴트
'$vuetify.dataTable.rowsPerPageText'
타입
string

페이지 텍스트의 기본 행

이름
search
디폴트
undefined
타입
any

필터링 결과를 위한 검색 모델

이름
select-all
디폴트
undefined
타입
boolean | string

모든 체크박스를 선택할 수 있는 헤더-행을 추가. 버튼의 색깔을 나타내는 문자열이나 불린(boolean) 이 가능. 불린의 경우 기본 색이 쓰임.

이름
sort-icon
디폴트
'$vuetify.icons.sort'
타입
string

커스텀 정렬 아이콘. v-icon과 같은 문법

이름
total-items
디폴트
undefined
타입
number

수동으로 행(row) 아이템의 총 개수를 설정. 내장 정렬과 페이지네이션은 비활성화 됨. 서버사이드 정렬과 페이지네이션을 위해 pagination prop과 함께 사용가능

이름
value
디폴트
[]
타입
array

선택된 행

예제

슬롯: 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)