diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index 84db7cb0..ac58b202 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -19,11 +19,21 @@
       :loading-text="lt('Loading')"
       :no-data-text="lt('NoData')"
       class="elevation-1"
-    ></v-data-table>
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.name">
+            <td v-for="col in item.columns" :key="col.key">
+              {{ col.v }}
+            </td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
     <hr />
     <div>Headers: {{ headers }}</div>
     <div>Records: {{ records }}</div>
-    <!-- <div>TotalRecords: {{ totalRecords }}</div>
+    <!--  <div>TotalRecords: {{ totalRecords }}</div>
      <div>caption: {{ caption }}</div>
     <div>apiBaseUrl: {{ apiBaseUrl }}</div>
     <div>formKey: {{ formKey }}</div>
@@ -48,7 +58,8 @@ export default {
       headers: [],
       totalRecords: 0,
       records: [],
-      rowsPerPageItems: [5, 10, 25, 50, 100]
+      rowsPerPageItems: [5, 10, 25, 50, 100],
+      someKey: 0
     };
   },
   props: {
@@ -81,6 +92,19 @@ export default {
     }
   },
   methods: {
+    test(item) {
+      console.log(item);
+      /*
+       <tr v-for="item in items" :key="item.name">
+            <td>{{ test(item) }}</td>
+            <td>CONTENT</td>
+            <td>CONTENT</td>
+            <td>CONTENT</td>
+            <td>CONTENT</td>
+            <td>CONTENT</td>
+          </tr> */
+      debugger;
+    },
     lt(ltKey) {
       return window.$gz.locale.get(ltKey);
     },
@@ -174,7 +198,7 @@ function buildHeaders(columnData) {
     var cm = columnData[i];
     var h = {};
     h.text = window.$gz.locale.get(cm.cm);
-    h.value = "c" + i.toString();
+    h.value = "columns.c" + i.toString(); //+".v";
     ret.push(h);
   }
   /*
@@ -208,43 +232,49 @@ function buildRecords(listData, columndefinitions, filters) {
     var row = listData[iRow];
     //iterate row and build object representing row data keyed to index
     //first column is the default column which sets the id for the row
-    var o = {};
-    for (var iColumn = 0; iColumn < row.length; iColumn++) {
+    var o = { id: row[0].v, columns: {} };
+    for (var iColumn = 1; iColumn < row.length; iColumn++) {
       var column = row[iColumn];
-      if (iColumn == 0) {
-        console.log(column.v);
-        //set the id from the df column
-        o["id"] = column.v;
-      } else {
-        var dataType = columndefinitions[iColumn].dt;
-        var display = column.v;
-        switch (dataType) {
-          case 1: //datetime format to shortdatetime
-            display = filters.shortdatelocalized(display);
-            break;
-          case 2: //date only
-            display = filters.shortdateonlylocalized(display);
-            break;
-          case 3: //time only
-            display = filters.shorttimeonlylocalized(display);
-            break;
-          case 6: //bool
-            display = filters.boolastext(display);
-            break;
-          case 7: //decimal
-            display = filters.decimal(display);
-            break;
-          case 8: //currency
-            display = filters.currency(display);
-            break;
-          case 10: //enum
-            display = filters.enum(display, columndefinitions[iColumn].et);
-            break;
-          default:
-          //do nothing, allow it to stay as is
-        }
-        o["c" + iColumn.toString()] = display;
+
+      var dataType = columndefinitions[iColumn].dt;
+      var display = column.v;
+      switch (dataType) {
+        case 1: //datetime format to shortdatetime
+          display = filters.shortdatelocalized(display);
+          break;
+        case 2: //date only
+          display = filters.shortdateonlylocalized(display);
+          break;
+        case 3: //time only
+          display = filters.shorttimeonlylocalized(display);
+          break;
+        case 6: //bool
+          display = filters.boolastext(display);
+          break;
+        case 7: //decimal
+          display = filters.decimal(display);
+          break;
+        case 8: //currency
+          display = filters.currency(display);
+          break;
+        case 10: //enum
+          display = filters.enum(display, columndefinitions[iColumn].et);
+          break;
+        default:
+        //do nothing, allow it to stay as is
       }
+      o.columns["c" + iColumn.toString()] = {
+        v: display,
+        t: dataType,
+        key: iRow + "-" + iColumn
+      };
+      //Is:
+      //Headers: [ { "text": "Name", "value": "c1" }, { "text": "Serial #", "value": "c2" },
+      //Records: [ { "id": 1, "c1": "Incredible Metal Fish 76", "c2": 1, "c3": "$877.8", "c4": "AuthorizationRoles.65536", "c5": "2020-01-30 01:53:57 AM", "c6": "Yup", "c7": "Virgil Strosin 74" }, { "id": 2, "c1": "Practical Plastic Bike 77", "c2": 2, "
+      //CHANGE TO:
+      //Headers: [ { "text": "Name", "value": "c1.v" }, { "text": "Serial #", "value": "c2" },
+      //Records: [ { "id": 1,columns: {"c1": {v:"Incredible Metal Fish 76",t:THETYPE,key:ROWID-COLUMNID e.g. 1-1,1-2,2-1 etc}, "c2": 1, "c3": "$877.8", "c4": "AuthorizationRoles.65536", "c5": "2020-01-30 01:53:57 AM", "c6": "Yup", "c7": "Virgil Strosin 74" }, { "id": 2, "c1": "Practical Plastic Bike 77", "c2": 2, "
+      //THis way can have v-if for each column that changes based on type and then has it's shit figured out
     }
     ret.push(o);
   }