vuetify/v-data-tableの列固定

公開:2020/10/03
更新:2020/10/03
1 min読了の目安(約400字TECH技術記事

ヘッダーの固定は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になります。