ayanova/devdocs/todo.txt

@@ -10,9 +10,8 @@ MISC ITEMS THAT CAME UP
 LISTVIEW REPLACE CURRENT <----HERE not THERE ---v 
 (below this is all past for reference)
 	Header filter icon 
-		https://github.com/vuetifyjs/vuetify/issues/1548
+		make unfiltered look pale
-		https://codepen.io/aldarund/pen/yqgVgy
+		filtered look strong
-
 
 
 Customers

ayanova/src/components/data-table.vue

@@ -56,30 +56,20 @@
           class="elevation-1"
           data-cy="datatable"
         >
-          <!-- 
+          <!-- HEADER FILTERS: https://stackoverflow.com/a/58718975/8939 -->
-            How to show an icon below each header (needs alignment but is just ugly so maybe not a solution keeping for posterity)
-            <template v-slot:header="{ props }">
-            <tr>
-              <th v-for="header in props.headers" :key="header.text">
-                <v-icon small>$ayiFilter</v-icon>
-              </th>
-            </tr>
-          </template> -->
-
-          <!-- https://stackoverflow.com/a/58718975/8939 -->
           <template v-for="h in headers" v-slot:[`header.${h.value}`]>
-            <span :key="h.text">
+            <!-- <span :key="h.text">
               <v-icon @click.stop="filter(h)" class="ml-n8 mr-1"
                 >$ayiFilter</v-icon
               >
               {{ h.text }}
+            </span> -->
+            <span :key="h.text">
+              <v-btn icon @click.stop="filter(h)" class="ml-n8 mr-1"
+                ><v-icon :color="filterColor(h)">$ayiFilter</v-icon></v-btn
+              >
+              {{ h.text }}
             </span>
-            <!-- <v-tooltip bottom :key="h.text">
-              <template v-slot:activator="{ on }">
-                <span v-on="on">{{ h.text }}</span>
-              </template>
-              <span>{{ h.text }}</span>
-            </v-tooltip> -->
           </template>
 
           <template v-slot:body="{ items }">
@@ -523,6 +513,14 @@ export default {
     filter(item) {
       console.log("filter:", item);
     },
+    filterColor(item) {
+      let clr = "disabled";
+      if (item.fk == "customername") {
+        clr = "primary";
+      }
+      console.log("filter color:", { name: item.fk, clr: clr });
+      return clr;
+    },
     keyArrayFromSortByArray(sortBy) {
       return sortBy.map(sortItem => {
         let val = this.headers.find(z => z.value == sortItem);