ショップ

企業向け

The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, and row selection.

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

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

'show-select' propは、すべての行を切り替えるヘッダーのチェック ボックスと、各行のチェック ボックスをレンダリングします。これらをそれぞれスロット 'header.data-table-select' と 'item.data-table-select' でカスタマイズできます。また、複数の選択した行を同時に許可するか、single-select propで 1 つだけ許可するかを切り替えることもできます。

group-bygroup-desc propを使用すると、アイテムのプロパティの行をグループ化することができます。show-group-by propは、デフォルトヘッダーにグループ ボタンを表示します。

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.

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 コンポーネントは内部的に使用され、ヘッダの位置合わせを考慮します。

The show-expand prop will render an expand icon on each default row. You can customize this with the item.data-table-expand slot. The position of this slot can be customized by adding a column with value: 'data-table-expand' to the headers array. 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-filterプロパティに関数を設定することにより、searchプロパティで使用されるデフォルトのフィルタリングをオーバーライドできます。特定の列のフィルタリングをカスタマイズする必要がある場合、ヘッダー項目の filterプロパティに関数を提供できます。Singnatureは (value: any, search: string | null, item: any) => booleanです。 search propが提供されていなくても、この関数は常に実行されます。したがって、フィルタを適用しない場合は、 trueの値で早期に終了することを確認する必要があります。

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

You can use the dynamic slots item.<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.calories slot.

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

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!