diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index f280f851..ce6f4a84 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -40,6 +40,7 @@
           <tr v-for="item in items" :key="item.name">
             <td v-for="c in item.columns" :key="c.key">
               <!-- Handle all plain text types -->
+              <!--TODO when get to coloured stuff will need to add that as a prop to column data but leaving out for now-->
               <template v-if="c.t < 9">
                 {{ c.v }}
               </template>
@@ -288,11 +289,19 @@ function buildRecords(listData, columndefinitions, filters) {
         default:
         //do nothing, allow it to stay as is
       }
-      o.columns["c" + iColumn.toString()] = {
+      //build the row column object that will be used by the datatable
+      var columnObject = {
         v: display,
         t: dataType,
         key: iRow + "-" + iColumn
       };
+      //is the source dtalist field openable?  If so it will have an i property set for it's ID and we already know the types to open from the column headers data
+      //so between the two we can make a clickable button in the grid that triggers a function with the column index and the id and that in turn will bubble up the event to open that 
+      //object
+      if (column.i) {
+        columnObject["i"] = column.i;
+      }
+      o.columns["c" + iColumn.toString()] = columnObject;
       //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, "