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

Usage

The standard data-table will by default render your data as simple rows.

API

Examples

選択可能な行

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

Grouped rows

Using the group-by and group-desc props you can group rows on an item property. The show-group-by prop will show a group button in the default header.

Sort on multiple columns

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.

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

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

ヘッダー無しテーブル

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

Loading state

You can use the loading prop to indicate that data in the table is currently loading. If there is no data in the table, a loading message will also be displayed. This message can be customized using the loading-text prop or the loading slot.

Dense

Using the dense prop you are able to give your data tables an alternate style.

Slots

The v-data-table provides a large number of slots for customizing the table. This example showcases some of these slots and what you can do withe each.

スロット: expand

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

Custom filtering

You can override the default filtering used with search prop by supplying a function to the custom-filter prop. If you need to customize the filtering of a specific column, you can supply a function to the filter property on header items. The signature is (value: any, search: string | null, item: any) => boolean. This function will always be run even if search prop has not been provided. Thus you need to make sure to exit early with a value of true if filter should not be applied.

Customizing default header

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

Customizing default rows

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

外部ページネーション

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

外部ソート

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

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

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

Inline Editing

The v-edit-dialog component is used for inline-editing within data tables. You can block closing the dialog when clicked outside by adding the persistent prop.

CRUD アクション

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

Edit this page | language on Github
Vuetify
StoreFor Enterprise