ayanova/devdocs/todo.txt

@@ -9,7 +9,25 @@ MISC ITEMS THAT CAME UP
 
 LISTVIEW REPLACE CURRENT <----HERE not THERE ---v 
 (below this is all past for reference)
-	SortBy in mobile not translated (vuetify default)
+	Header filter icon 
+		https://github.com/vuetifyjs/vuetify/issues/1548
+		https://codepen.io/aldarund/pen/yqgVgy
+
+
+
+Customers
+Filter
+-
+{ "headers": [ { "text": "", "sortable": false, "width": "1px", "value": "data-table-select" }, 
+{ "text": "Customer name", "fk": "customername", "value": "columns.c0", "align": "start" }, 
+{ "text": "Business", "fk": "customerphone1", "value": "columns.c1" }, 
+{ "text": "Email", "fk": "customeremail", "value": "columns.c2" }, 
+{ "text": "Head Office", "fk": "customerheadoffice", "value": "columns.c3" }, 
+{ "text": "Web Address", "fk": "customerwebaddress", "value": "columns.c4" } ], 
+"options": { "page": 1, "itemsPerPage": 10, "sortBy": [ "columns.c2" ], "sortDesc": [ false ], 
+"groupBy": [], "groupDesc": [], "mustSort": false, "multiSort": true }, "mobile": false, "showGroupBy": false, 
+"someItems": false, "everyItem": false, "singleSelect": false, "disableSort": false } 
+
 .......
 
 

ayanova/src/components/data-table.vue

@@ -56,6 +56,31 @@
           class="elevation-1"
           data-cy="datatable"
         >
+          <!-- 
+            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}`]>
+            <div :key="h.text">
+              <v-icon @click.stop="filter(h)">$ayiFilter</v-icon>
+              <span>{{ h.text }}</span>
+            </div>
+            <!-- <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 }">
             <tbody>
               <tr v-for="item in items" :key="item.id">
@@ -494,6 +519,9 @@ export default {
       }
       return "";
     },
+    filter(item) {
+      console.log("filter:", item);
+    },
     keyArrayFromSortByArray(sortBy) {
       return sortBy.map(sortItem => {
         let val = this.headers.find(z => z.value == sortItem);