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);