【Vuetify】v-data-tableで複数の列を固定する方法

v-data-table使用時に、スクロールで複数列を固定したい場合はありませんか。

ヘッダーの行を固定するのはfixed-headerで簡単に可能ですが、複数列固定を行う方法は手軽な方法がなかなか見つかりません。
ここでは、CSSを使って複数列を固定する方法を紹介します。

環境

• Nuxt
  • 2.15.7
• Vuetify
  • 2.5.5

サンプルコード

template側とCSSに分けて紹介します。

template

template側は特別な対応はしていません。
次のCSS側で使うfixed-columnを指定します。

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="4">
        <v-data-table :headers="headers" :items="desserts" class="fixed-column">
        </v-data-table>
      </v-col>
    </v-row>
  </v-container>
</template>

CSS

以下は、左側の2列を固定するCSSです。

<style scoped>
.fixed-column ::v-deep td,
th {
  min-width: 100px;
}

.fixed-column ::v-deep th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: white;
  max-width: 100px;
  word-break: break-all;
}

.fixed-column ::v-deep td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
  max-width: 100px;
  word-break: break-all;
}

.fixed-column ::v-deep th:nth-child(2) {
  position: sticky;
  left: 100px;
  z-index: 2;
  background-color: white;
  max-width: 100px;
  word-break: break-all;
}

.fixed-column ::v-deep td:nth-child(2) {
  position: sticky;
  left: 100px;
  z-index: 1;
  background-color: white;
  max-width: 100px;
  word-break: break-all;
}
</style>

CSSのポイントは以下になります。

• 1列目、2列目のtd, thに対してCSSを指定
• position: stickyを使用して、スクロールした際に要素を固定
• z-indexを使用して、固定した要素が前面に現れるようにする
• widthを指定して、2列目のleftは100pxにする

まとめ

v-data-tableで複数列を固定する方法を紹介しました。

CSS側で対応する方法を紹介しましたが、個人的にv-data-table側でオプションがあれば簡単に実装できて嬉しいなとは思います。