Browse Source

[frontend] Add a sticky header option to the HueTable vue component

Johan Ahlen 4 năm trước cách đây
mục cha
commit
0dd6dd7e77
1 tập tin đã thay đổi với 25 bổ sung1 xóa
  1. 25 1
      desktop/core/src/desktop/js/components/HueTable.vue

+ 25 - 1
desktop/core/src/desktop/js/components/HueTable.vue

@@ -19,7 +19,7 @@
 <!-- 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 -->
         {{
@@ -71,6 +71,8 @@
     columns?: Column<T>[];
     @Prop()
     caption?: string;
+    @Prop({ required: false, default: false })
+    stickyHeader?: boolean;
 
     hasCellSlot(column: Column<T>): boolean {
       return !!this.$scopedSlots[this.cellSlotName(column)];
@@ -122,6 +124,7 @@
           border-bottom: 1px solid $fluid-gray-300;
 
           th {
+            background-color: $fluid-white;
             color: $fluid-gray-700;
             font-size: 13px;
             font-weight: 500;
@@ -152,6 +155,27 @@
           }
         }
       }
+
+      &.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>