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

Usage

The standard data-table will by default render your data as simple rows.

API

예제

선택 가능한 행 (Selectable rows)

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots header.column.data-table-select and item.column.data-table-select respectively. You can also switch between allowing multiple selected rows at the same time or just one with the single-select prop.

Grouped rows

Using the group-by and group-desc props you can group rows on an item property. The show-group-by prop will show a group button in the default header.

Sort on multiple columns

Using the multi-sort prop will enable you to sort on multiple columns at the same time. When enabled, you can pass arrays to both sort-by and sort-desc to programmatically control the sorting, instead of single values.

검색과 "검색결과 없음" (no-results) 슬롯

search prop으로 데이터를 필터링 할 수 있습니다.

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

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

Loading state

You can use the loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the loading-text prop or the loading slot.

Dense

Using the dense prop you are able to give your data tables an alternate style.

Slots

The v-data-table provides a large number of slots for customizing the table. This example showcases some of these slots and what you can do withe each.

슬롯: expand

The show-expand prop will render an expand icon on each default row. You can customize this with the item.column.data-table-expand slot. You can also switch between allowing multiple expanded rows at the same time or just one with the single-expand prop. The expanded rows are available on the synced prop expanded.sync

Custom filtering

You can override the default filtering used with search prop by supplying a function to the custom-filter prop. If you need to customize the filtering of a specific column, you can supply a function to the filter property on header items. The signature is (value: any, search: string | null, item: any) => boolean. This function will always be run even if search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.

Customizing default header

You can use the dynamic slots header.column.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers.

Customizing default rows

You can use the dynamic slots item.column.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers. So to customize the calories column we're using the item.column.calories slot.

외부 페이지네이션 (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 already paginated and sorted from a backend, you can use the server-items-length prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the available events (update:page, update:sortBy, update:options, etc) to know when to request new pages from you backend. Use the loading prop to display a progress bar while fetching data.

인라인 편집 (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)

Edit this page | language on Github
Vuetify
상점For Enterprise