🐶
vuetify/v-data-tableの列固定
ヘッダーの固定はfixed-headerで簡単に設定できますが、列の固定はどうしましょうか?
答えは、CSS(deep style)より、以下のように簡単に設定できます。
一列目を固定の例:
CSSより選択のために、classをmy-tableにする
<v-data-table
...
class="my-table"
...
></v-data-table>
CSSの設定
<style scoped>
// ヘッダ(th)の固定
.my-table >>> th:nth-child(1) {
position: sticky !important;
position: -webkit-sticky !important;
left: 0;
z-index: 9999;
}
// 行(td)の固定
.my-table >>> tr td:nth-child(1) {
position: sticky !important;
position: -webkit-sticky !important;
left: 0;
z-index: 9999;
}
</style>
そう!ポイントはstickyです。
leftとz-indexを必要に応じて調整してください。例えば、2列目はleft={一列目の幅}になります。
※ 2023/2/4: 前のバージョン、ヘッダ固定の前提でCSSでdata-table--fixed-headerの利用が分かりにくいため、my-tableに変更しました。
Discussion
貴重なコードありがとうございます。このコードのおかげで、大変助かりました。
無知で申し訳ございませんが、コードの解説をお願いできませんでしょうか。
「>>>」やv-data-table--fixed-headerの--が理解できていません。
説明不足で、申し訳ございません。
1.まず、テーブルにfixed-headerを適用したら、ヘッダーが固定され、そして、css:
v-data-table--fixed-header
適用されます。厳密に言うとテーブルにじゃあなくて、その上のdivに。このselectorで設定したいテーブル(近くの項目…)を選択します。ヘッダー固定しない場合、別のselecterに入れ替えてください。この目標達成できれば、他でも構いません。2.
th:nth-child(1)
より1で選択した項目の下の全てのthの一列目(子供の一番目)を選択します。3.選択した項目に対して、左寄せ固定の設定をします。
うまく説明できたかな…
ご回答ありがとうございます。
丁寧な説明で理解できました。
vuetifyで列固定に苦戦していたので非常に助かりました。
一つ教えていただきたいのですが2列目も固定したい場合は1列目を固定幅にしておくしか方法はないでしょうか?
自分の分かる範囲では、CSSで変数(別列の幅)の値を動的に参照するのはできないと思っていますが、vuejs3の場合、これが使えるかもしれません:https://vuejs.org/api/sfc-css-features.html#v-bind-in-css