diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 50baf535..e2751257 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -88,6 +88,57 @@
         :no-data-text="lt('NoData')"
         class="elevation-1"
       >
+        <template v-slot:header="props">
+          <div>
+            <v-icon v-if="props.someItems" x-large>fa-square</v-icon>
+            <v-icon x-large>fa-minus-square</v-icon>
+            <v-icon x-large>fa-check-square</v-icon>
+          </div>
+          <div><v-btn @click="handleSelectAllToggle(props)">toggle</v-btn></div>
+          <!-- todo: put a checkbox icon here that is filled or not depending on select all status, also it triggers select all event -->
+          <!-- 
+            @click="props.toggleSelectAll(false)"
+            
+            it('should select all', async () => {
+    const input = jest.fn()
+    const items = [
+      { id: 'foo' },
+      { id: 'bar' },
+    ]
+    const toggleSelectAll = jest.fn()
+
+    const wrapper = mountFunction({
+      propsData: {
+        items,
+      },
+      listeners: {
+        input,
+        'toggle-select-all': toggleSelectAll,
+      },
+      scopedSlots: {
+        header (props) {
+          return this.$createElement('div', {
+            attrs: {
+              id: 'header',
+            },
+            on: {
+              click: () => props.toggleSelectAll(true),
+            },
+          })
+        },
+      },
+    })
+
+    const header = wrapper.find('#header')
+    header.element.click()
+
+    await wrapper.vm.$nextTick()
+
+    expect(input).toHaveBeenCalledWith(items)
+    expect(toggleSelectAll).toHaveBeenCalledWith({ value: true })
+  }) -->
+        </template>
+
         <template v-slot:default="{ items }">
           <v-row>
             <v-col
@@ -98,13 +149,23 @@
               md="4"
               lg="3"
             >
-              <v-card tile>
+              <v-card elevation="4" tile>
                 <!-- <v-card-title class="subheading font-weight-bold">{{
                   item.columns.c1.v
                 }}</v-card-title>
 
                 <v-divider></v-divider> -->
-
+                <template v-if="showSelect">
+                  <v-card-title class="subheading font-weight-bold">
+                    <v-checkbox
+                      v-model="selected"
+                      :value="item"
+                      primary
+                      hide-details
+                    ></v-checkbox>
+                  </v-card-title>
+                  <v-divider></v-divider>
+                </template>
                 <v-list dense>
                   <v-list-item two-line v-for="c in item.columns" :key="c.key">
                     <v-list-item-content>
@@ -145,11 +206,11 @@
         </template>
       </v-data-iterator>
     </template>
-    <!--   <hr />
-    <div>Records: {{ records }}</div>
-    <div>Selected: {{ selected }}</div>
-    <div>Headers: {{ headers }}</div>
+    <hr />
 
+    <div>Selected: {{ selected }}</div>
+    <!--  <div>Headers: {{ headers }}</div>
+ <div>Records: {{ records }}</div>
       <div>TotalRecords: {{ totalRecords }}</div>
      <div>caption: {{ caption }}</div>
     <div>apiBaseUrl: {{ apiBaseUrl }}</div>
@@ -214,31 +275,9 @@ export default {
     },
     "$vuetify.breakpoint.xs": function(value) {
       this.narrowFormat = value;
-    },
-    "$vuetify.breakpoint.width": function(value) {
-      this.calculateNarrowWidthColumns(value);
     }
   },
   methods: {
-    calculateNarrowWidthColumns() {
-      //only need to do this if xs sized narrow format
-      if (this.$vuetify.breakpoint.xs) {
-        var width = this.$vuetify.breakpoint.width;
-        //   <!-- at 360 to 388px cols above sb 7, at 389 and above sb 8, at 419 sb9  -->
-        if (width < 389) {
-          this.narrowDataCellColumns = 7;
-          this.narrowHeaderCellColumns = 3;
-        } else if (width < 419) {
-          this.narrowDataCellColumns = 8;
-          this.narrowHeaderCellColumns = 3;
-        } else {
-          this.narrowDataCellColumns = 8;
-          this.narrowHeaderCellColumns = 4;
-        }
-        //this.narrowHeaderCellColumns = 12 - this.narrowDataCellColumns;
-        console.log("narrowDataCellColumns=" + this.narrowDataCellColumns);
-      }
-    },
     //Used by narrow view to get the "header" text for a column based on the column key
     getHeaderText(key) {
       //key format is row-column e.g."500-2"
@@ -260,6 +299,15 @@ export default {
       //could be more efficient if it just sends the ID's instead:
       this.$emit("update:selected", window.$gz._.map(this.selected, "id"));
     },
+    handleSelectAllToggle(vv) {
+      // debugger;
+      vv.toggleSelectAll(!vv.everyItem);
+      // if (vv.everyItem) {
+      //   vv.toggleSelectAll(false);
+      // } else if (vv.someItems) {
+      //   vv.toggleSelectAll(true);
+      // }
+    },
     btnClick(key, i) {
       //translate key to actual object type from header data
       //key format is row-column e.g."500-2"
@@ -310,8 +358,7 @@ export default {
       // }
 
       that.loading = true;
-      //this is here because my theory is it's set to loading so this won't trigger a re-draw here
-      that.calculateNarrowWidthColumns();
+
       var listUrl =
         that.apiBaseUrl + "?" + window.$gz.api.buildQuery(listOptions);
       window.$gz.api.get(listUrl).then(res => {