ショップ

企業向け

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

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

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

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

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each default row. You can customize these with the slots header.data-table-select and item.data-table-select respectively. You can also switch between allowing multiple selected rows at the same time or just one with the single-select prop.

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.

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.

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.

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

You can easily disable specific columns from being included when searching through table rows by setting the property filterable to false on the header item(s). In the example below the dessert name column is no longer searchable.

v-data-table は、テーブルをカスタマイズするための slot を数多く用意しています。 この例では、いくつかの slot について紹介します。注意点として、コンポーネントの内部レンダリングを完全に引き継いで selection や expansion などの機能を再実装しなければならない slot (例:item / body / header) や、 body > item > item.<name> and header/header.<name> のように上書きしてしまう slot があります。

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

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.

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 コンポーネントは Data table 内部でインライン編集する際に使用します。

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

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

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