[frontend] Add a sticky header option to the HueTable vue component
<!-- eslint-disable vue/no-v-html -->
<template>
<div class="hue-table-container">
- <table class="hue-table">
+ <table class="hue-table" :class="{ 'hue-table-sticky-header': stickyHeader }">
<caption>
<!-- Because of Web:TableWithoutCaptionCheck -->
{{
columns?: Column<T>[];
@Prop()
caption?: string;
+ @Prop({ required: false, default: false })
+ stickyHeader?: boolean;
hasCellSlot(column: Column<T>): boolean {
return !!this.$scopedSlots[this.cellSlotName(column)];
border-bottom: 1px solid $fluid-gray-300;
th {
+ background-color: $fluid-white;
color: $fluid-gray-700;
font-size: 13px;
font-weight: 500;
}
}
}
+
+ &.hue-table-sticky-header {
+ thead tr {
+ border-bottom: none;
+ }
+
+ thead th {
+ position: sticky;
+ position: -webkit-sticky;
+ top: 0;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ width: 100%;
+ bottom: 0;
+ border-bottom: 1px solid $fluid-gray-200;
+ }
+ }
+ }
}
}
</style>
