Merge pull request #242 from yamachan/feature/static-table-header

Add an optional "header-static" slot to replace the DataTable's heade…

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.34",
+  "version": "1.5.35",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -24,8 +24,12 @@
             :style="getColStyle(header)"
           />
         </colgroup>
+        <slot
+          v-if="slots['customize-header']"
+          name="customize-header"
+        />
         <thead
-          v-if="headersForRender.length && !hideHeader"
+          v-else-if="headersForRender.length && !hideHeader"
           class="vue3-easy-data-table__header"
           :class="[headerClassName]"
         >

src/modes/Client.vue

@@ -46,6 +46,25 @@
       @update-total-items="updateTotalItems"
       show-index-symbol="$"
     >
+     <template #customize-header>
+        <thead class="my-static-header">
+          <tr>
+            <th colspan="3" rowspan="2"></th>
+            <th colspan="4">member info</th>
+            <th colspan="4">indicator</th>
+          </tr>
+          <tr>
+            <th>name</th>
+            <th>team</th>
+            <th>number</th>
+            <th>position</th>
+            <th>height</th>
+            <th>weight</th>
+            <th>lastAttended</th>
+            <th>country</th>
+          </tr>
+        </thead>
+      </template>
       <template #expand="item">
         <div style="padding: 15px">
           {{ item.name }} won championships
@@ -343,4 +362,10 @@ const updateRowsPerPageSelect = (e: Event) => {
   --easy-table-loading-mask-background-color: #2d3a4f;
 }
 
+.my-static-header th {
+  color: white;
+  border-right: 1px solid #445269;
+  border-bottom: 1px solid #445269;
+}
+
 </style>