Vuetify 3 になって、VDataTable が Vuetify 2 から変更点があります。
長くVuetify 3でLabs状態だった機能が去年正式にリリースされました。
しかし、新しい VDataTableは、 Vuetify 2 と、Vuetify 3 で変更点が多く書き換えが多く発生している状態です。
この記事では、Vuetify 2 から Vuetify 3 の VDataTable のアップデート周りの参考になればと思っています。
その点を含めて、Vuetify 2と Vuetify 3 の VDataTable のアップデートの参考としてまとめました。
Vuetify 2 から Vuetify 3 の VDataTable の変更点
-
hide-defalut-footer が削除 => フッターが不要の場合は v-data-table-virtual のコンポーネントを利用
- VDataTable をそのまま使う場合は、
<template #bottom />で空を渡すことで非表示は可能（https://stackoverflow.com/questions/76211136/cant-remove-footer-pagination-from-v-data-table-in-vue-3-2）
- VDataTable をそのまま使う場合は、
- server-items-lengthが削除 => APIを利用した形のデータ表示の場合は v-data-table-server のコンポーネントを利用
- headersの
textがtitleに変更 - headersの
keyが追加された key and value は一つ必要は必ずどちらか必要（識別用のkeyとして追加された） -
item-keyがitem-valueに変更 -
hide-default-header が 削除 =>
<template #headers />を渡して非表示にする - 行クリックで expand する場合、 expand-on-click を利用する
Coposition API の利用
Vuetify 3 からは Vue3 になったことで Composition API が利用できるようになりました。
VDataTable は Composition API を利用して、データの取得や、データの操作を行うことができます。
本記事では、Composition API を利用して、VDataTable を利用する方法を紹介します。
headersのプロパティ変更
Vuetify 2のコードをそのままVuetify 3に移行すると、headers のプロパティが変更されているため、ヘッダーのテキストが表示されません。
textをtitleに変更することで表示されます。
const headers = [
{
title: '名前',
align: 'start',
key: 'name',
sortable: true
}
]
テーブルのヘッダーを非表示
hide-default-header で Vuetify 2 では非表示になりました。
Vuetify 3 では、<template #headers /> を渡して非表示にすることができます。
サンプルコードでは、props.isHideHeader が true の場合は、ヘッダーを非表示にしています。
<script setup lang="ts">
const props = defineProps<{
isHideHeader: boolean
}>()
const headers = [
{
title: '名前',
align: 'start',
key: 'name',
sortable: true
},
{
title: 'Key',
align: 'start',
key: 'key',
sortable: true
}
]
const items = [
{
name: 'Frozen Yogurt',
key: 1
},
...
]
</script>
<template>
<v-data-table
:headers="headers"
:items="items"
>
<template v-if="props.isHideHeader" #headers />
</v-data-table>
</template>
テーブルのフッターを非表示
ページネーションなどを非表示するために、Vuetify 2では、hide-defalut-footer が利用されていました。
Vuetify 3 では、<template #bottom /> を渡して非表示にすることができます。
@click:row から expand-on-click
Vuetify 2 では、@click:row で行をクリックすると、行が展開されて関数を定義することでクリックした部分をexpandしたりすることができました。
Vuetify 3 でも @click:row は引き続き利用可能ですが、 expand-on-click で行の展開をすることができるようになりました。
expand-on-click を利用する場合、 itemsにidを設定することで、クリックした行を識別して展開します。
idがない場合は、itemsにデータを渡す前に加工して idを渡すように実装上はしています。
const itemsExpanded = [
{
name: 'Frozen Yogurt',
id: 1, // idを識別して展開できる
children: [
{
name: 'Frozen Yogurt'
},
{
name: 'Frozen Yogurt'
}
]
},
{
name: 'Ice cream sandwich',
id: 2,
children: [
{
name: 'Frozen Yogurt2'
},
{
name: 'Frozen Yogurt2'
}
]
}
]
実際に加工しているコードは以下のようになります。
const items = computed(() => props.items.map(({ key: id, ...others }) => ({ ...others, id })))
show-expandのプロパティを渡すと、開閉アイコンが表示されます。
expand-on-clickを渡すことで、行をクリックすると展開されるようになります。
<template>
<v-data-table
expand-on-click
show-expand
/>
</template>
また、Vuetify3からUIが変わったことで、いままで expandしたコンテンツの表示でドロップシャドウがついてました。
こちらは、既存のアップデートで遜色なく見た目を維持するためにグローバルにCSSをあててます。
.expanded-row {
box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.5) inset;
}
まとめ
Vuetify 3 になって、VDataTable は、まだまだ変更点があります。
fetchしたデータを展開する場合は、 v-data-table-server を利用します。
まだまだ変更点ありますが、引き続き知見をこの記事でまとめていきたいと思います。
今回のサンプルコード
Discussion