Merge branch 'main' into pr/248

HC200ok · Mar 14, 2023 · 1c9d703 · 1c9d703
2 parents bc8d77f + 9aaa64f
commit 1c9d703
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -24,8 +24,12 @@
             :style="getColStyle(header)"
           />
         </colgroup>
+        <slot
+          v-if="slots['customize-headers']"
+          name="customize-headers"
+        />
         <thead
-          v-if="headersForRender.length && !hideHeader"
+          v-else-if="headersForRender.length && !hideHeader"
           class="vue3-easy-data-table__header"
           :class="[headerClassName]"
         >
@@ -65,6 +69,11 @@
                   :name="`header-${header.value.toLowerCase()}`"
                   v-bind="header"
                 />
+                <slot
+                  v-else-if="slots['header']"
+                  name="header"
+                  v-bind="header"
+                />   
                 <span
                   v-else
                   class="header-text"
@@ -124,6 +133,7 @@
                 clickRowToExpand && updateExpandingItemIndexList(index + prevPageEndIndex, item, $event);
               }"
               @dblclick="($event) => {clickRow(item, 'double', $event)}"
+              @contextmenu.prevent="($event) => {emits('contextmenuRow', item, $event)}"
             >
               <td
                 v-for="(column, i) in headerColumns"
@@ -227,7 +237,9 @@
         v-if="!pageItems.length && !loading"
         class="vue3-easy-data-table__message"
       >
-        {{ emptyMessage }}
+        <slot name="empty-message">
+          {{ emptyMessage }}
+        </slot>
       </div>
     </div>
     <div
@@ -389,6 +401,7 @@ onMounted(() => {
 
 const emits = defineEmits([
   'clickRow',
+  'contextmenuRow',
   'selectRow',
   'deselectRow',
   'expandRow',

diff --git a/src/modes/Client.vue b/src/modes/Client.vue
@@ -46,6 +46,25 @@
       @update-total-items="updateTotalItems"
       show-index-symbol="$"
     >
+     <template #customize-headers>
+        <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
@@ -345,4 +364,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>
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
@@ -17,7 +17,7 @@ export type FilterOption = {
   comparison: '>' | '>=' | '<' | '<='
   criteria: number
 } | {
-  field: string
+  field: number | string
   comparison: 'in'
   criteria: number[] | string[]
 }| {

diff --git a/types/main.d.ts b/types/main.d.ts
@@ -1,6 +1,6 @@
 export type SortType = 'asc' | 'desc'
 
-export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between';
+export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between'| 'in';
 
 export type Item = Record<string, any>
 
@@ -16,6 +16,10 @@ export type FilterOption = {
   field: string
   comparison: '>' | '>=' | '<' | '<='
   criteria: number
+} | {
+  field: number | string
+  comparison: 'in'
+  criteria: number[] | string[]
 } | {
   field: string
   comparison: (value: any, criteria: string) => boolean