【Vuetify3】DataTableのItem key slotで、他の列の値を取得する方法

TL; DR

Item slotを使うと、列のスクロール固定(fixed)が効かなくなる。

したがって、Item key slotを以下のような形式で使用する。

// 'name'列の値しか取得できない
// <template #item.name="{ value }">

// rowの中に全ての列の値が入っている
<template #item.name="row">

Item slot ではダメな理由

公式ドキュメントでは<template v-slot:item.calories="{ value }">のように、カスタマイズしたい列の値を取得する方法しか載っていない。

Data table component — Vuetify

ひとつ上のセクションにある「Item slot」を使用することでも同様のことは実現できるが、
こちらは全ての列の表示を定義する必要がある上に、
<tr><td>タグレベルから上書きすることになる。

つまり、Item slot を使ってしまった場合は、本来<tr><td>タグに付与されるはずの CSS クラスが消えてしまうことになる。最悪

この結果、ヘッダーにfixedオプションで列スクロールの固定を設定していても、正常に動作しなくなる。

なんでドキュメントに Item slot なんて項目作ったん？

結論

以下のような形式で slot から値を取得することで解決した。

<template>
  <v-data-table :headers="headers" :items="items">
    <template #item.name="row">
      <NuxtLink :to="row.item.id">
        {{ row.item.name }}
      </NuxtLink>
    </template>
  </v-data-table>
</template>