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

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <!-- WIDE TABLE VIEW -->
     <template v-if="!narrowFormat">
       <v-data-table
         :headers="headers"
@@ -65,22 +66,72 @@
     </template>
     <!-- MOBILE TABLE VIEW -->
     <template v-else>
-      MOBILE VIEW HERE
-    </template>
-  </div>
-  <!-- End of large template -->
+      <v-data-iterator
+        :headers="headers"
+        :items="records"
+        v-model="selected"
+        :options.sync="dataTablePagingOptions"
+        :server-items-length="totalRecords"
+        :loading="loading"
+        :disable-sort="true"
+        :show-select="showSelect"
+        :single-select="singleSelect"
+        :hide-default-header="narrowFormat"
+        :footer-props="{
+          showCurrentPage: true,
+          showFirstLastPage: true,
+          itemsPerPageOptions: rowsPerPageItems,
+          itemsPerPageText: lt('RowsPerPage'),
+          pageText: lt('PageOfPageText')
+        }"
+        :loading-text="lt('Loading')"
+        :no-data-text="lt('NoData')"
+        class="elevation-1"
+      >
+        <template v-slot:default="{ items }">
+          <v-row>
+            <v-col
+              v-for="item in items"
+              :key="item.id"
+              cols="12"
+              sm="6"
+              md="4"
+              lg="3"
+            >
+              <v-card>
+                <v-card-title class="subheading font-weight-bold">{{
+                  item.columns.c1.v
+                }}</v-card-title>
 
-  <!--  <hr />
-    <div>Selected: {{ selected }}</div>
-      <div>Headers: {{ headers }}</div>
+                <v-divider></v-divider>
+
+                <v-list dense>
+                  <v-list-item>
+                    <v-list-item-content>Calories:</v-list-item-content>
+                    <v-list-item-content class="align-end">{{
+                      item.calories
+                    }}</v-list-item-content>
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-col>
+          </v-row>
+        </template>
+      </v-data-iterator>
+    </template>
+    <hr />
     <div>Records: {{ records }}</div>
-     <div>TotalRecords: {{ totalRecords }}</div>
+    <div>Selected: {{ selected }}</div>
+    <div>Headers: {{ headers }}</div>
+
+    <!--  <div>TotalRecords: {{ totalRecords }}</div>
      <div>caption: {{ caption }}</div>
     <div>apiBaseUrl: {{ apiBaseUrl }}</div>
     <div>formKey: {{ formKey }}</div>
     <div>dataListKey: {{ dataListKey }}</div>
     <div>dataFilterId: {{ dataFilterId }}</div>
     <div>viewPort is XS: {{ mini }}</div> -->
+  </div>
 </template>
 
 <script>