v-data-table コンポーネントは表形式のデータを表示するために使われます。ソート、検索、ページネーション、インライン編集、行の選択 などの機能を含んでいます。
以下に、簡単な例から複雑な例まで示します。
'show-select' propは、すべての行を切り替えるヘッダーのチェック ボックスと、各行のチェック ボックスをレンダリングします。これらをそれぞれスロット 'header.data-table-select' と 'item.data-table-select' でカスタマイズできます。また、複数の選択した行を同時に許可するか、single-select propで 1 つだけ許可するかを切り替えることもできます。
group-by と group-desc propを使用すると、アイテムのプロパティの行をグループ化することができます。show-group-by propは、デフォルトヘッダーにグループ ボタンを表示します。
multi-sort propを使うと、複数のカラムを同時にソートすることができます。これを有効にすると、sort-by と sort-desc の両方に配列を渡して、単一の値ではなくプログラムでソートを制御することができます。
Data table ではデータをフィルタリングするために search prop が用意されています
テーブルのデータが現在読みこまれている途中であることを示すために、loading propを使用できます。テーブルにデータがない場合は、読み込み中のメッセージも表示されます。このメッセージは、 loading-text prop または loading slotを使用してカスタマイズできます。
dense propを使用することで、データテーブルの各行が低くなった代替スタイルを与えることもできます。
ヘッダー項目でプロパティ filterable をfalseに設定することで、テーブルの行を検索するときに特定の列が含まれないように簡単に無効にできます。以下の例では、デザート名の列は検索できなくなりました。
v-data-table は、テーブルをカスタマイズするための slot を数多く用意しています。 この例では、いくつかの slot について紹介します。注意点として、コンポーネントの内部レンダリングを完全に引き継いで selection や expansion などの機能を再実装しなければならない slot (例：item / body / header) や、 body > item > item.<name> and header/header.<name> のように上書きしてしまう slot があります。
データテーブルのスロットテンプレート内でチェックボックスコンポーネントを使用する場合は v-checkbox コンポーネントではなく v-simple-checkbox コンポーネントを使用します。 v-simple-checkbox コンポーネントは内部的に使用され、ヘッダの位置合わせを考慮します。
show-expand prop はデフォルトの各行に展開アイコンを表示します。これは item.data-table-expand スロットでカスタマイズすることができます。このスロットの位置は、ヘッダ配列に value: 'data-table-expand' のカラムを追加することでカスタマイズできます。また、single-expand propで複数の展開された行を同時に許可するか、1つだけ許可するかを切り替えることもできます。拡張された行は同期されたprop expanded.sync で利用できます。
custom-filterプロパティに関数を設定することにより、searchプロパティで使用されるデフォルトのフィルタリングをオーバーライドできます。特定の列のフィルタリングをカスタマイズする必要がある場合、ヘッダー項目の filterプロパティに関数を提供できます。Singnatureは (value: any, search: string | null, item: any) => booleanです。 search propが提供されていなくても、この関数は常に実行されます。したがって、フィルタを適用しない場合は、 trueの値で早期に終了することを確認する必要があります。
動的スロット header.<name> を使用して、特定の列のみをカスタマイズできます。 <name>は、 headersに送信される対応するヘッダーアイテムのvalueプロパティの名前です。
動的スロット item.<name>を使用して、特定の列のみをカスタマイズできます。 <name>は、 headersに送信される対応するヘッダーアイテムのvalueプロパティの名前です。したがって、カロリー列をカスタマイズするには、 item.caloriesスロットを使用します。
pagination prop を使用することで外部からページネーションを制御できます。 使用するには .sync modifier を適用する必要があります。
pagination prop を使用することで外部からソートも制御できます。 使用するには .sync modifier を適用する必要があります。 prop でデフォルトでソートに使用するカラムを設定することもできます。
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 your backend. Use the loading prop to display a progress bar while fetching data.
v-edit-dialog コンポーネントは、 v-data-table 内でデータを直接編集するために使用できます。persistent propを追加することで、外側をクリックしたときに v-edit-dialog が閉じるのをブロックできます。
各行を編集するために v-dialog コンポーネントを使用した、CRUD アクション付き Data table のサンプルです。