데이터 테이블 (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
커스텀 검색 필터
커스컴 정렬 필터
다크 테마를 적용
초기 랜더링에서 기본 정렬을 비활성화
테이블이 확장 가능한 행(row)를 가지도록 지정
아이템을 필터링하는데 사용되는 함수
Components.DataTables.
오브젝트를 사용할 경우 헤더의 텍스트 값
각 헤더 컬럼을 정의하는 오브젝트의 배열(array). 모든 속성(propertiy)의 정의는 아래 예제를 참조하세요.
{
text: string",
value: string",
align: 'left' | 'center' | 'right'",
sortable: boolean",
class: string[] | string",
width: string"
}Components.DataTables.
테이블 액션을 감춤
테이블 헤더를 숨김
유일한 키로 지정된 아이템 객체의 필드
테이블 행(row) 배열
라이트 테마를 적용
선형 프로그레스바를 표시. 프로그레스바의 색을 나타내는 문자열(마테리얼 이나 테마 색상 - primary, secondary, success, info, warning, error)이나 부울값(boolean) 이 가능. 부울값의 경우 컴포넌트 색상(컴포넌트가 지원할 경우 color prop으로 지정된 값)이나 primary 색상이 사용됨
sorted ascending / sorted descending / unsorted 상태를 바꾸는(toggle) 대신 적어도 한 열(column)이 항상 정열되도록 함.
컴포넌트 뒤에 아이콘을 덧붙임. v-icon과 같은 문법을 사용
데이터가 없을때 보여지는 문자열
필터링 결과가 없을때 보여주는 문자열
데이터 테이블 외부에서 페이지네이션과 정렬을 제어하는데 사용됨. 기본 정렬 열(column)을 지정하는데도 사용됨
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}컴포넌트 앞에 아이콘을 추가. v-icon과 같은 문법을 사용
row-per-page 드롭다운에 사용되는 기본값
페이지 텍스트의 기본 행
필터링 결과를 위한 검색 모델
모든 체크박스를 선택할 수 있는 헤더-행을 추가. 버튼의 색깔을 나타내는 문자열이나 불린(boolean) 이 가능. 불린의 경우 기본 색이 쓰임.
커스텀 정렬 아이콘. v-icon과 같은 문법
수동으로 행(row) 아이템의 총 개수를 설정. 내장 정렬과 페이지네이션은 비활성화 됨. 서버사이드 정렬과 페이지네이션을 위해 pagination prop과 함께 사용가능
선택된 행
예제
슬롯: no-data
no-data 슬롯(slot)은 데이터가 없을 경우 보여지는 커스텀 HTML 에 쓰입니다.
슬롯: items 과 headers
items 과 headers 슬롯엔 td/th 태그 모음이나 전체 row 를 제어하고 싶을 경우 tr 태그를 넣습니다.
슬롯: headerCell
만약 각 헤더 셀(header cells)에 공용 마크업이나 이펙트를 적용하고 싶으면 headerCell 슬롯을 사용합니다. 이 예제는 각 헤더에 툴팁을 적용합니다.
슬롯: progress
progress 슬롯은 데이터 테이블의 로딩 상태 표시를 커스터마이즈 할 수 있습니다.
기본 값은 indeterminate v-progress-linear 입니다.
슬롯: footer
footer 슬롯으로 테이블에 별도의 기능을 추가할 수 있습니다. 예) 컬럼 필터링이나 검색
슬롯: 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.)
검색과 "검색결과 없음" (no-results) 슬롯
search prop으로 데이터를 필터링 할 수 있습니다.
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)