diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 6e0cd02a..92f1e827 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -47,42 +47,17 @@ CURRENT TODOs
 
 SHELL / NAV / MENUS / LAYOUT
 
-
+TODO: Grid is leaving space for side nav on it's right side when in medium width or if make nav go away in full screen
+	- It appears it thinks it needs to leave room for nav even when not there
+	- Maybe it's a breakpoint issue somewhere that I overrode and has since changed or something
+	
 TODO: toolbar above grid for filters, refresh etc (make it a standard component?)
 TODO: main.js filters need to be finished
-TODO: Grid is leaving space for side nav on it's right side when in medium width or if make nav go away in full screen
-
-
-TODO: GRIDS
-	- MAKE GRID AS GENERIC VUE COMPONENT
-		- See gz-data-table.vue notes in component comments for it's own todo's
-		- See test-widgets.vue for parent container that hosts control and get devving!!
-
-		- MUST HANDLE HIDDEN FIELDS AND NOT DISPLAY (this is also a server issue)
-		- Grid does *NOT* have sort indicators or controls, that's behind the grid in the filter UI, this is necessary for reasons I forget 
-		- Max 100 rows in grid at a time with paging
-		
-
-	- AFTER working mocked grid
-		- DISPLAY FORMAT TEMPLATES			
-			- Speccd in core-display-format-template-system.txt
-			- Requires server work and client work
-		
-		- MODIFY WIDGET GRID DATA LIST at server to work with templates properly
-		- SEARCH UI (need to be able to search from the grid for that type of object)
-		- FILTER UI
-		- Show the total quantity of records so it's clear the user is seeing a subset, i.e. "Showing 100 records of 30,124 (filtered)" or something to that effect.
-			- For efficiency this might need to be a fuzzy number gathered periodically at the server as part of a job and put on a route?
-			- Don't want to count them every time the list is fetched....or do I?  Maybe it's pretty efficient in Postgres?
-			- Doesn't it already count them for paging purposes and even sends that value to the client already?
-		- Show current filter summary or text name of filter at top of filter
-			- going to need filter name and also a summarized fragment of text showing criteria for reporting so also could purpose that list to show current filter?
-			- Filter picklist will show name for the current filter and sb at top of filter right up front
-			- 
-		- Needs to remember last settings (stored centrally) like filter used, number of rows etc
-			- When user opens up AyaNova it should always look the same in each area as last time they were there
-		- Modify the grid to no longer use mock values but real ones instead and test
-
+TODO: SEARCH UI
+TODO: FILTER UI
+	- Show current filter summary or text name of filter at top of filter
+				- going to need filter name and also a summarized fragment of text showing criteria for reporting so also could purpose that list to show current filter?
+				- Filter picklist will show name for the current filter and sb at top of filter right up front
 
 
 
diff --git a/ayanova/src/App.vue b/ayanova/src/App.vue
index 2bb91baa..42a0186b 100644
--- a/ayanova/src/App.vue
+++ b/ayanova/src/App.vue
@@ -9,7 +9,6 @@
       app
       width="350"
     >
-      <!-- <v-card class="mx-auto" width="300"> -->
       <v-list>
         <template v-for="item in navItems">
           <!-- TOP LEVEL can be holders or actions -->
@@ -190,12 +189,10 @@
       </v-toolbar-items>
     </v-app-bar>
     <v-content>
-      <v-container fluid fill-height>
-        <v-row justify-center>
-          <transition name="fade" mode="out-in" @after-leave="afterLeave">
-            <router-view class="view"></router-view>
-          </transition>
-        </v-row>
+      <v-container fluid>
+        <transition name="fade" mode="out-in" @after-leave="afterLeave">
+          <router-view class="view"></router-view>
+        </transition>
       </v-container>
     </v-content>
     <v-footer color="primary" padless v-if="!isAuthenticated">
diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue
index e238432f..0b65f3f9 100644
--- a/ayanova/src/components/gz-data-table.vue
+++ b/ayanova/src/components/gz-data-table.vue
@@ -1,57 +1,97 @@
 <template>
-  <div>
-    <v-data-table
-      :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"
-    >
-      <!-- /*From server: UiDataTypes
- NoType = 0,v-on:item-selected="handleSelect"
-        DateTime = 1,
-        Date = 2,
-        Time = 3,
-        Text = 4,
-        Integer = 5,
-        Bool = 6,
-        Decimal = 7,
-        Currency = 8,
-        Tags = 9,
-        Enum = 10,
-        EmailAddress = 11,
-        HTTP = 12
-*/ -->
-      <template v-slot:body="{ items }">
-        <tbody>
-          <template v-if="!narrowFormat">
-            <tr v-for="item in items" :key="item.id">
-              <template v-if="showSelect">
-                <td>
+  <v-data-table
+    :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:body="{ items }">
+      <tbody>
+        <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>
+          </tr>
+        </template>
+        <template v-else>
+          <!-- Narrow width template -->
+          <tr
+            class="v-data-table__mobile-table-row"
+            v-for="item in items"
+            :key="item.id"
+          >
+            <!-- HEADER TO THE LEFT -->
+
+            <!-- FIELD VALUE TO THE RIGHT -->
+            <template v-if="showSelect">
+              <td class="v-data-table__mobile-row">
+                <div class="v-data-table__mobile-row__header"></div>
+                <div class="v-data-table__mobile-row__cell">
                   <v-checkbox
                     v-model="selected"
                     :value="item"
                     primary
                     hide-details
                   ></v-checkbox>
-                </td>
-              </template>
-              <td v-for="c in item.columns" :key="c.key">
+                </div>
+              </td>
+            </template>
+
+            <td
+              class="v-data-table__mobile-row"
+              v-for="c in item.columns"
+              :key="c.key"
+            >
+              <div class="v-data-table__mobile-row__header">
+                {{ getHeaderText(c.key) }}
+              </div>
+              <div class="v-data-table__mobile-row__cell">
                 <!-- 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">
@@ -72,70 +112,14 @@
                   <!-- 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>
-          </template>
-          <template v-else>
-            <!-- Narrow width template -->
-            <tr
-              class="v-data-table__mobile-table-row"
-              v-for="item in items"
-              :key="item.id"
-            >
-              <!-- HEADER TO THE LEFT -->
-
-              <!-- FIELD VALUE TO THE RIGHT -->
-              <template v-if="showSelect">
-                <td class="v-data-table__mobile-row">
-                  <div class="v-data-table__mobile-row__header"></div>
-                  <div class="v-data-table__mobile-row__cell">
-                    <v-checkbox
-                      v-model="selected"
-                      :value="item"
-                      primary
-                      hide-details
-                    ></v-checkbox>
-                  </div>
-                </td>
-              </template>
-
-              <td
-                class="v-data-table__mobile-row"
-                v-for="c in item.columns"
-                :key="c.key"
-              >
-                <div class="v-data-table__mobile-row__header">
-                  {{ getHeaderText(c.key) }}
-                </div>
-                <div class="v-data-table__mobile-row__cell">
-                  <!-- 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>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </template>
-    </v-data-table>
-    <!--  <hr />
+              </div>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </template>
+  </v-data-table>
+  <!--  <hr />
     <div>Selected: {{ selected }}</div>
       <div>Headers: {{ headers }}</div>
     <div>Records: {{ records }}</div>
@@ -146,7 +130,6 @@
     <div>dataListKey: {{ dataListKey }}</div>
     <div>dataFilterId: {{ dataFilterId }}</div>
     <div>viewPort is XS: {{ mini }}</div> -->
-  </div>
 </template>
 
 <script>
diff --git a/ayanova/src/views/test-widgets.vue b/ayanova/src/views/test-widgets.vue
index c20c5c2b..7999d073 100644
--- a/ayanova/src/views/test-widgets.vue
+++ b/ayanova/src/views/test-widgets.vue
@@ -1,15 +1,13 @@
 <template>
-  <v-container style="position:absolute;top:0px">
-    <gz-data-table
-      formKey="test-widgets"
-      dataListKey="TestWidgetDataList"
-      :dataFilterId="currentDataFilterId"
-      :showSelect="true"
-      :singleSelect="false"
-      v-on:update:selected="handleSelected"
-    >
-    </gz-data-table>
-  </v-container>
+  <gz-data-table
+    formKey="test-widgets"
+    dataListKey="TestWidgetDataList"
+    :dataFilterId="currentDataFilterId"
+    :showSelect="true"
+    :singleSelect="false"
+    v-on:update:selected="handleSelected"
+  >
+  </gz-data-table>
 </template>
 
 <script>
diff --git a/ayanova/src/views/vendors.vue b/ayanova/src/views/vendors.vue
index 6681a6ca..a1db7dec 100644
--- a/ayanova/src/views/vendors.vue
+++ b/ayanova/src/views/vendors.vue
@@ -1,13 +1,119 @@
 <template>
-  <UnderConstruction />
+  <!-- <v-container fluid> -->
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      :items-per-page="5"
+      class="elevation-1"
+    ></v-data-table>
+  <!-- </v-container> -->
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
+//import UnderConstruction from "../components/underconstruction.vue";
 
 export default {
+  data() {
+    return {
+      headers: [
+        {
+          text: "Dessert (100g serving)",
+          align: "left",
+          sortable: false,
+          value: "name"
+        },
+        { text: "Calories", value: "calories" },
+        { text: "Fat (g)", value: "fat" },
+        { text: "Carbs (g)", value: "carbs" },
+        { text: "Protein (g)", value: "protein" },
+        { text: "Iron (%)", value: "iron" }
+      ],
+      desserts: [
+        {
+          name: "Frozen Yogurt",
+          calories: 159,
+          fat: 6.0,
+          carbs: 24,
+          protein: 4.0,
+          iron: "1%"
+        },
+        {
+          name: "Ice cream sandwich",
+          calories: 237,
+          fat: 9.0,
+          carbs: 37,
+          protein: 4.3,
+          iron: "1%"
+        },
+        {
+          name: "Eclair",
+          calories: 262,
+          fat: 16.0,
+          carbs: 23,
+          protein: 6.0,
+          iron: "7%"
+        },
+        {
+          name: "Cupcake",
+          calories: 305,
+          fat: 3.7,
+          carbs: 67,
+          protein: 4.3,
+          iron: "8%"
+        },
+        {
+          name: "Gingerbread",
+          calories: 356,
+          fat: 16.0,
+          carbs: 49,
+          protein: 3.9,
+          iron: "16%"
+        },
+        {
+          name: "Jelly bean",
+          calories: 375,
+          fat: 0.0,
+          carbs: 94,
+          protein: 0.0,
+          iron: "0%"
+        },
+        {
+          name: "Lollipop",
+          calories: 392,
+          fat: 0.2,
+          carbs: 98,
+          protein: 0,
+          iron: "2%"
+        },
+        {
+          name: "Honeycomb",
+          calories: 408,
+          fat: 3.2,
+          carbs: 87,
+          protein: 6.5,
+          iron: "45%"
+        },
+        {
+          name: "Donut",
+          calories: 452,
+          fat: 25.0,
+          carbs: 51,
+          protein: 4.9,
+          iron: "22%"
+        },
+        {
+          name: "KitKat",
+          calories: 518,
+          fat: 26.0,
+          carbs: 65,
+          protein: 7,
+          iron: "6%"
+        }
+      ]
+    };
+  },
   components: {
-    UnderConstruction
+    //UnderConstruction
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {