【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする
はじめに
Vue.jsのUIフレームワークとしてVuetityを使用します。
マテリアルデザインを踏襲したボタンやダイアログなどを手早く実装できます。
データテーブルについても、v-data-tableというコンポーネントを用いて実装可能です。
HTMLのtableタグで実装するよりも効率的に、しかも見栄えよく実装可能です。
様々なプロパティを付与し、テーブルの加工ができます。
行いたいこと
テーブルのヘッダー部分と1列目の部分をスクロール時に追従させるようなデザイン。
プロパティの中に、fixed-headerという、ヘッダーを画面上部に追従できるものがあるのですが、今回の要件を満たせないため、データテーブル用のCSSを独自で作成する方針をとります。
オレンジ部分をスクロール追従させます。
ソース
<template>
<div id="list-table">
<v-data-table
:headers="dataTableHeaders"
:items="dataTableItems"
hide-default-header
hide-default-footer
dense
>
<template v-slot:header">
<thead>
<tr>ヘッダーの各行の内容を記載する</tr>
<tr>ヘッダーの各行の内容を記載する</tr>
</thead>
</template>
<template v-slot:body="{ items }">
<tbody>
<tr>表の各行の内容を記載する</tr>
<tr>表の各行の内容を記載する</tr>
</tbody>
</template>
</v-data-table>
</div>
</template>
<style scoped>
/* データテーブルのコンテンツが大きいため、scrollを設定 */
# list-table {
overflow: scroll;
}
/* データテーブルのヘッダー及び、bodyの1行目にスクロール追従を設定 */
# list-table table thead tr th,
# list-table table tbody tr th:first-child {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
left: 0;
}
</style>
上記ソースでは、スクロールの追従ができませんでした。
ちなみに、HTMLのtableタグで作成した表に関しては、上記CSSで上手くいったので、v-data-tableが原因だと予想できます。
原因
v-data-tableの仕様のようで、overflowが設定されているようでした。
こちらの記事にあるように、v-data-tableで作成されるHTMLのクラスに対して、overflowの設定をunsetすることで解決できました。
.v-data-table /deep/ .v-data-table__wrapper {
overflow: unset;
}
/deep/に関して
/deep/は、deep selectorと呼ばれるものです。
Vue.jsでは、今回のようにstyleタグにscopeをつけることで、styleをそのコンポーネントのみに適用させることができます。（反対にscopeを付けなかった場合、グローバルなstyleとなり、該当コンポーネント以外にも同名のクラスが存在する場合には、styleが適用されてしまいます）
該当コンポーネントの子コンポーネント（HTMLタグ上では子クラスと同義）にもstyleを適応させたい場合に、deep selectorを用いることで、子コンポーネントにも適用させることができます。
今回に関しては、.v-data-tableが親コンポーネント、.v-data-table__wrapperがその子コンポーネントというように見なされているのだと考えられます。
ちなみに、/deep/については
.v-data-table >>> .v-data-table__wrapper {
overflow: unset;
}
のようにも記述できます。
最後に
VuetifyはマテリアルUIを踏襲した便利なライブラリですが、
参考資料が少ない部分があるため、
躓いた内容は積極的にアウトプットしていきたいです。