Data table

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

Usage

基本的な Data table は付加的な機能を含まないデータを格納します。 hide-actions prop を使用することで、ページネーションを制御するテーブルアクションの表示を外すことができます。


API

v-data-table
Name
custom-filter
Default
(items: object[], search: string, filter: Filter): object[]
Type
function
Name
custom-sort
Default
(items: object[], index: number, isDescending: boolean): object[]
Type
function
Name
dark
Default
false
Type
boolean
Name
disable-initial-sort
Default
false
Type
boolean
Name
expand
Default
false
Type
boolean
Name
filter
Default
(val: object, search: string): boolean
Type
function
Name
header-key
Default
undefined
Type
string
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
Name
hide-actions
Default
false
Type
boolean
Name
hide-headers
Default
false
Type
boolean

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

Name
item-key
Default
'id'
Type
string
Name
items
Default
[]
Type
array
Name
light
Default
false
Type
boolean
Name
loading
Default
false
Type
boolean | string
Name
must-sort
Default
false
Type
boolean
Name
next-icon
Default
'$vuetify.icons.next'
Type
string
Name
no-data-text
Default
'$vuetify.noDataText'
Type
string
Name
no-results-text
Default
'$vuetify.dataIterator.noResultsText'
Type
string
Name
pagination.sync
Default
Type
object
{
  descending: boolean
  page: number
  rowsPerPage: number // -1 for All
  sortBy: string
  totalItems: number
}
Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string
Name
rows-per-page-items
Default
[ 5, 10, 25, { "text": "$vuetify.dataIterator.rowsPerPageAll", "value": -1 } ]
Type
array
Name
rows-per-page-text
Default
'$vuetify.dataTable.rowsPerPageText'
Type
string
Name
search
Default
undefined
Type
any
Name
select-all
Default
undefined
Type
boolean | string
Name
sort-icon
Default
'$vuetify.icons.sort'
Type
string
Name
total-items
Default
undefined
Type
number
Name
value
Default
[]
Type
array

Examples

スロット: no-data

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


スロット: items と headers

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


スロット: headerCell

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


スロット: progress

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


スロット: expand

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


スロット: page-text

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


選択可能な行

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


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 のサンプルです。