ViewV2 page

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -37,13 +37,19 @@
           <EditTablePopover {table} />
         {/if}
       </NavItem>
-      {#each [...Object.keys(table.views || {})].sort() as viewName, idx (idx)}
+      {#each [...Object.entries(table.views || {})].sort() as [viewName, view], idx (idx)}
         <NavItem
           indentLevel={2}
           icon="Remove"
           text={viewName}
           selected={$isActive("./view") && $views.selected?.name === viewName}
-          on:click={() => $goto(`./view/${encodeURIComponent(viewName)}`)}
+          on:click={() => {
+            if (view.version === 2) {
+              $goto(`./view/v2/${encodeURIComponent(viewName)}`)
+            } else {
+              $goto(`./view/${encodeURIComponent(viewName)}`)
+            }
+          }}
           selectedBy={$userSelectedResourceMap[viewName]}
         >
           <EditViewPopover

packages/builder/src/pages/builder/app/[application]/data/view/v2/[viewName].svelte

@@ -0,0 +1,22 @@
+<script>
+  import { views } from "stores/backend"
+  import { Grid } from "@budibase/frontend-core"
+  import { API } from "api"
+
+  $: tableId = $views.selected?.id
+</script>
+
+<div class="wrapper">
+  <Grid {API} {tableId} datasourceType="view" showAvatars={false} />
+</div>
+
+<style>
+  .wrapper {
+    flex: 1 1 auto;
+    margin: -28px -40px -40px -40px;
+    display: flex;
+    flex-direction: column;
+    background: var(--background);
+    overflow: hidden;
+  }
+</style>