🐶

vuetify/v-data-tableの列固定

1 min read 3

ヘッダーの固定はfixed-headerで簡単に設定できますが、列の固定はどうしましょうか?
答えは、CSS(deep style)より、以下のように簡単に設定できます。

一列目を固定の例:

<style scoped>
.v-data-table--fixed-header >>> th:nth-child(1) {
    position: sticky !important;
    position: -webkit-sticky !important;
    left: 0;
    z-index: 9999;
    background: white;
}
</style>

そう!ポイントはstickyです。
leftとz-indexを必要に応じて調整してください。例えば、2列目はleft=width_of_column_1になります。

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.選択した項目に対して、左寄せ固定の設定をします。

うまく説明できたかな…

ご回答ありがとうございます。
丁寧な説明で理解できました。

ログインするとコメントできます