# Data tables

v-data-table コンポーネントは、表形式のデータを表示するために使用します。 v-data-tableにはソート、検索、ページネーション、コンテンツ編集、行選択などの機能が搭載されています。

# 使い方

デフォルトでは、データ テーブルのデータは単純な行の集まりとして表示されます。

# API

# サンプル

# Props

# カスタムフィルター

search prop で使用されるデフォルトのフィルタリングは、custom-filter prop に関数を指定することでオーバーライドできます。 特定の列でのみフィルタリングをカスタマイズしたい場合は、ヘッダーアイテムの filter プロパティに関数を指定します。 シグネチャは (value: any, search: string | null, item: any) => boolean です。 search prop が指定されていない場合でも、この関数は常に実行されます。 そのため、フィルタを利用しない場合は true の値で早期リターンするようにしてください。

# Dense

dense プロパティを指定すると、データテーブルのスタイルが少し変化します。

# Filterable

ヘッダー項目のプロパティの filterable を false に設定すると、テーブル行を検索する際に特定の列を除外することができます。 下の例では、Dessertの列が検索に当たらなくなります。

# グループ化

group-bygroup-desc プロパティを使用すると、itemのプロパティに沿って行をグループ化できます。 show-group-by prop を指定すると、デフォルトヘッダにグループボタンを表示します。 ヘッダー項目の groupable プロパティを使用すると、グループボタンを無効にできます。

# デフォルトのヘッダーとフッターを非表示にする

hide-default-headerhide-default-footer プロパティを指定すると、デフォルトのヘッダーとフッターを取り除くことができます。

# Loading

loading prop を指定すると、テーブル内のデータが現在ロード中であることを示すことができます。 テーブルにデータがない場合は、ローディングメッセージも表示されます。 このメッセージは、 loading-text プロパティまたは loading スロットを使用してカスタマイズできます。

# Multi sort

multi-sort プロパティを指定すると、同時に複数の列を並べ替え基準に使用することができます。 有効にすると、 sort-bysort-desc のそれぞれに単一値ではなく配列を渡すことで、プログラムからソートを制御することもできます。

# 行の選択

show-select プロパティを指定すると、デフォルトヘッダーにチェックボックスが追加され、すべての行の選択を一括で切り替えられるようになります。また、各デフォルト行にも個別のチェックボックスが追加されます。 これらはスロット header.data-table-selectitem.data-table-select を使ってカスタマイズできます。 single-select プロパティでは、複数選択を許可するか、単一の選択にするかを切り替えることができます。

# Slots

v-data-tableには、テーブルをカスタマイズするための多数のスロットが用意されています。 この例では、いくつかのスロットを取り上げ、それぞれ何ができるかを紹介します。 itembodyheaderなどの一部のスロットは、コンポーネントの内部レンダリングを完全に引き継ぐため、選択や展開などの機能を再実装する必要があることに注意してください。 いくつかのスロットは、body > item > item.<name>header/header.<name> のように、相互にオーバーライドします。

# ヘッダー

動的スロット header.<name> を使用すると、特定の列のみをカスタマイズすることができます。 <name> は、headers に伝えられる、対応するヘッダー項目のvalueプロパティの名前です。

# Item

動的スロット item.<name> を使用すると、特定の列のみをカスタマイズすることができます。 <name> は、headers に伝えられる、対応するヘッダー項目のvalueプロパティの名前です。 Calories列をカスタマイズするには、 item.calories スロットを使用します。

# 単純なチェックボックス

データテーブルのスロットテンプレート内のチェックボックスコンポーネントを使用する場合は、v-checkbox コンポーネントではなく、v-simple-checkbox コンポーネントを使用します。 v-simple-checkbox コンポーネントは内部的に使用されるもので、ヘッダーの配置が考慮されています。

# その他

# CRUD アクション

各行を編集する v-dialog コンポーネントを備えた、CRUD アクション付きの v-data-table のサンプルです。

# Edit dialog

v-edit-dialog コンポーネントを使用すると、 v-data-table 内のデータを直接編集できます。 v-edit-dialog の外側をクリックしたときに閉じないようにするためには persistent プロパティを合わせて指定します。

# 展開可能な行

show-expand prop を指定すると、各行に展開アイコンが表示されます。 これは item.data-table-expand スロットでカスタマイズできます。 スロットの位置は、ヘッダー用の配列にvalue: 'data-table-expand' カラムを追加してカスタマイズできます。 single-expand prop では、複数行の同時展開を許可するか、1行ずつ展開するかを切り替えできます。 展開された行は expanded.sync プロパティで利用できます。 展開を機能させるため、それぞれの行のアイテムには一意のキープロパティが必要です。 デフォルトは idですが、item-key プロパティを使って他の項目プロパティを指定することもできます。

# 外部ページネーション

外部ページネーションは、個々の props を使用して制御するか、options プロパティを使用して制御します。 .sync 修飾子を適用する必要があることに注意してください。

# 外部ソート

外部ソートは、個々の props を使用して制御するか、options プロパティを使用して制御します。 .sync 修飾子を適用する必要があることに注意してください。

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

バックエンドであらかじめページ分割とソートが適用されたデータをロードする場合、server-items-length プロパティを使用できます。 このプロパティを指定すると、組み込みのソートとページネーションが無効になり、それに代わり利用可能になる update:pageupdate:sortByupdate:options などのイベントを使用する必要があります。これらのイベントにより、バックエンドから新しいページを要求するタイミングを把握します。 loading プロパティを指定すると、データの取得中にプログレスバーを表示できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/17/2021, 9:17:47 AM