Data table

v-data-table コンポーネントは表形式のデータを表示するために使われます。ソート、検索、ページネーション、インライン編集、ヘッダーツールチップ、行の選択 などの機能を含んでいます。

Usage

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
Name
custom-filter
Default
(items: object[], search: string, filter: Filter): object[]
Type
function

Components.DataTables.

Name
custom-sort
Default
(items: object[], index: number, isDescending: boolean): object[]
Type
function

Components.DataTables.

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disable-initial-sort
Default
false
Type
boolean

Components.DataTables.

Name
expand
Default
false
Type
boolean

Components.DataTables.

Name
filter
Default
(val: object, search: string): boolean
Type
function

Components.DataTables.

Name
header-key New in — v1.2
Default
undefined
Type
string

Components.DataTables.

Name
header-text
Default
'text'
Type
string

ヘッダーとなるテキストを設定します。

Name
headers
Default
[]
Type
array

ヘッダーのカラムとなる配列のオブジェクトを設定します。 全プロパティの定義については下記の例を参照してください。

{
  text: string",
  value: string",
  align: 'left' | 'center' | 'right'",
  sortable: boolean",
  class: string[] | string",
  width: string"
}
Name
headers-length
Default
undefined
Type
number

Components.DataTables.

Name
hide-actions
Default
false
Type
boolean

Components.DataTables.

Name
hide-headers
Default
false
Type
boolean

ヘッダーを非表示にします。

Name
item-key
Default
'id'
Type
string

Components.DataTables.

Name
items
Default
[]
Type
array

Components.DataTables.

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
loading
Default
false
Type
boolean | string

Components.DataTables.

Name
must-sort
Default
false
Type
boolean

Components.DataTables.

Name
next-icon
Default
'$vuetify.icons.next'
Type
string

Components.DataTables.

Name
no-data-text
Default
'$vuetify.noDataText'
Type
string

Components.DataTables.

Name
no-results-text
Default
'$vuetify.dataIterator.noResultsText'
Type
string

Components.DataTables.

Name
pagination.sync
Default
Type
object

Components.DataTables.

{
  descending: boolean",
  page: number",
  rowsPerPage: number // -1 for All",
  sortBy: string",
  totalItems: number"
}
Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string

Components.DataTables.

Name
rows-per-page-items
Default
[5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}]
Type
array

Components.DataTables.

Name
rows-per-page-text
Default
'$vuetify.dataTable.rowsPerPageText'
Type
string

Components.DataTables.

Name
search
Default
undefined
Type
any

Components.DataTables.

Name
select-all
Default
undefined
Type
boolean | string

Components.DataTables.

Name
sort-icon
Default
'$vuetify.icons.sort'
Type
string

Components.DataTables.

Name
total-items
Default
undefined
Type
number

Components.DataTables.

Name
value
Default
[]
Type
array

Components.DataTables.

Examples

スロット: no-data

no-data スロットはデータが無い場合に表示する HTML を設定することができます。

スロット: items と headers

itemsheaders スロットは td/th タグを受け付けることができます。行の全体を制御したい場合は、 tr を受け付けることができます。

スロット: headerCell

ヘッダーのセルごとに共通のマークアップやエフェクトを適用したい場合は、headerCell スロットを使用することができます。この例では Tooltip をヘッダーごとに適用しています。

スロット: progress

progress スロットは、Data Table のローディング状態の表示をカスタマイズする際に使用します。デフォルトでは indeterminate が設定された v-progress-linear が使用されます。

スロット: footer

footer スロットは、例えばカラムのフィルタや検索など、テーブルに拡張機能を持たせたい場合に使用します。

スロット: expand

v-data-table コンポーネントは expand スロットを使用して行の折りたたみを可能にします。expand prop を使用して他の行をクリックした際に行を閉じる動作を止めることができます。

スロット: page-text

page-text スロットを利用すると、ページネーションに使用されるテキストを変更することができます。

選択可能な行

選択可能な行を使用することで、特定の行及びすべての行に対してアクションを実行することができます。

no-results スロットを使用した検索

Data table ではデータをフィルタリングするために search prop が用意されています

Custom icons

Previous/next pagination icons and sort icon can be customized with prev-icon, next-icon and sort-icon props.

外部ページネーション

pagination prop を使用することで外部からページネーションを制御できます。 使用するには .sync modifier を適用する必要があります。

外部ソート

pagination prop を使用することで外部からソートも制御できます。 使用するには .sync modifier を適用する必要があります。 prop でデフォルトでソートに使用するカラムを設定することもできます。

サーバーサイドでのページネーションとソート

バックエンドから情報を読み込んでおり、結果を表示する前にページネーションとソートを適用する必要がある場合には、 total-items prop を使用することができます。 この prop を使用すると、標準のページネーションとソートは無効化されるため、変化を検知するには代わりに pagination prop を使用する必要があります。 loading prop を使用するとデータを取得している間にプログレスバーを表示することができます。

ヘッダー無しテーブル

hide-headers prop を設定するとヘッダーなしのテーブルを作成することができます。

インライン編集

v-edit-dialog コンポーネントは Data table 内部でインライン編集する際に使用します。

CRUD アクション

各行を編集するために v-dialog コンポーネントを使用した、CRUD アクション付き Data table のサンプルです。

Edit this page | language on Github