ayanova/src/components/gz-data-table.vue

@@ -39,40 +39,45 @@
 */ -->
       <template v-slot:body="{ items }">
         <tbody>
-          <tr v-for="item in items" :key="item.id">
-            <template v-if="showSelect">
-              <td>
-                <v-checkbox
-                  v-model="selected"
-                  :value="item"
-                  primary
-                  hide-details
-                ></v-checkbox>
+          <template v-if="!narrowFormat">
+            <tr v-for="item in items" :key="item.id">
+              <template v-if="showSelect">
+                <td>
+                  <v-checkbox
+                    v-model="selected"
+                    :value="item"
+                    primary
+                    hide-details
+                  ></v-checkbox>
+                </td>
+              </template>
+              <td v-for="c in item.columns" :key="c.key">
+                <!-- Handle all plain text types right up to and including enums -->
+                <!--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 < 11">
+                  <template v-if="c.i">
+                    <!-- openable object with an ID -->
+                    <v-btn depressed small @click="btnClick(c.key, c.i)">{{
+                      c.v
+                    }}</v-btn>
+                  </template>
+                  <template v-else>
+                    {{ c.v }}
+                  </template>
+                </template>
+                <template v-if="c.t == 11">
+                  <a :href="'mailto:' + c.v">{{ c.v }}</a>
+                </template>
+                <template v-if="c.t == 12">
+                  <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
+                  <a :href="c.v" target="_blank">{{ c.v }}</a>
+                </template>
               </td>
-            </template>
-            <td v-for="c in item.columns" :key="c.key">
-              <!-- Handle all plain text types right up to and including enums -->
-              <!--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 < 11">
-                <template v-if="c.i">
-                  <!-- openable object with an ID -->
-                  <v-btn depressed small @click="btnClick(c.key, c.i)">{{
-                    c.v
-                  }}</v-btn>
-                </template>
-                <template v-else>
-                  {{ c.v }}
-                </template>
-              </template>
-              <template v-if="c.t == 11">
-                <a :href="'mailto:' + c.v">{{ c.v }}</a>
-              </template>
-              <template v-if="c.t == 12">
-                <!-- Expects full url with protocol etc in c.v so might need to add to record builder -->
-                <a :href="c.v" target="_blank">{{ c.v }}</a>
-              </template>
-            </td>
-          </tr>
+            </tr>
+          </template>
+          <template v-else>
+            <!-- Narrow width template -->
+          </template>
         </tbody>
       </template>
     </v-data-table>
@@ -104,7 +109,8 @@ export default {
       totalRecords: 0,
       records: [],
       rowsPerPageItems: [5, 10, 25, 50, 100],
-      selected: []
+      selected: [],
+      narrowFormat: false
     };
   },
   props: {