From f8184c947c87aa009c88ab4192723d44e903c03f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 20 Apr 2023 17:47:56 +0100
Subject: [PATCH] Revert "Grid UI in data section (#10329)" (#10364)

This reverts commit 55ce83c444de7026f8a41a1cd35b92ffbfa37f1f.
---
 packages/bbui/package.json                    |   2 +-
 .../bbui/src/ActionButton/ActionButton.svelte |   2 +-
 packages/bbui/src/Actions/click_outside.js    |   4 -
 packages/bbui/src/Form/Core/Dropzone.svelte   |  23 +-
 .../bbui/src/Form/Core/Multiselect.svelte     |   9 +-
 packages/bbui/src/Form/Dropzone.svelte        |   2 -
 packages/bbui/src/Popover/Popover.svelte      |   3 +-
 packages/bbui/src/Table/ArrayRenderer.svelte  |   5 +-
 packages/bbui/src/Table/Table.svelte          |   2 +-
 packages/bbui/src/bbui.css                    |  20 +-
 .../backend/DataTable/DataTable.svelte        | 324 +++++++++--
 .../components/backend/DataTable/Table.svelte |  95 +++-
 .../backend/DataTable/ViewDataTable.svelte    |   1 +
 .../DataTable/buttons/CalculateButton.svelte  |   1 +
 .../buttons/CreateColumnButton.svelte         |  24 +
 .../DataTable/buttons/CreateRowButton.svelte  |  26 +
 .../DataTable/buttons/CreateViewButton.svelte |  21 +
 .../DataTable/buttons/DeleteRowsButton.svelte |   2 +-
 .../DataTable/buttons/EditRolesButton.svelte  |  10 +-
 .../buttons/ExistingRelationshipButton.svelte |  24 +-
 .../DataTable/buttons/ExportButton.svelte     |   8 +-
 .../DataTable/buttons/GroupByButton.svelte    |   1 +
 .../buttons/HideAutocolumnButton.svelte       |   1 +
 .../DataTable/buttons/ImportButton.svelte     |   2 +-
 .../buttons/ManageAccessButton.svelte         |   3 +-
 .../buttons/TableFilterButton.svelte          |   3 +-
 .../DataTable/buttons/ViewFilterButton.svelte |   1 +
 .../buttons/grid/GridCreateViewButton.svelte  |  18 -
 .../buttons/grid/GridExportButton.svelte      |  21 -
 .../buttons/grid/GridFilterButton.svelte      |  20 -
 .../buttons/grid/GridImportButton.svelte      |  14 -
 .../grid/GridManageAccessButton.svelte        |   8 -
 .../grid/GridRelationshipButton.svelte        |  13 -
 .../DataTable/modals/CreateEditColumn.svelte  |   8 +-
 .../DataTable/modals/CreateEditRow.svelte     |   4 +-
 .../DataTable/modals/CreateEditUser.svelte    |   4 +-
 .../modals/grid/GridCreateColumnModal.svelte  |  15 -
 .../modals/grid/GridCreateEditRowModal.svelte |  28 -
 .../modals/grid/GridEditColumnModal.svelte    |  24 -
 .../modals/grid/GridEditUserModal.svelte      |  25 -
 .../TableNavigator/TableNavigator.svelte      |   9 +-
 .../commandPalette/CommandPalette.svelte      |   5 +
 .../src/components/start/AppRow.svelte        |   4 +-
 packages/builder/src/global.css               |   1 +
 .../new/_components/componentStructure.json   |   1 -
 packages/builder/src/stores/backend/tables.js |  19 -
 packages/client/manifest.json                 |  31 --
 .../client/src/components/ClientApp.svelte    |   2 +-
 packages/client/src/sdk.js                    |   2 -
 packages/client/src/utils/domDebounce.js      |  12 +-
 packages/frontend-core/package.json           |   2 -
 .../grid/cells/AttachmentCell.svelte          | 153 ------
 .../components/grid/cells/BooleanCell.svelte  |  44 --
 .../src/components/grid/cells/DataCell.svelte |  86 ---
 .../src/components/grid/cells/DateCell.svelte |  77 ---
 .../components/grid/cells/FormulaCell.svelte  |   5 -
 .../src/components/grid/cells/GridCell.svelte | 159 ------
 .../components/grid/cells/HeaderCell.svelte   | 237 ---------
 .../src/components/grid/cells/JSONCell.svelte |  36 --
 .../components/grid/cells/LongFormCell.svelte | 117 ----
 .../grid/cells/MultiSelectCell.svelte         |   7 -
 .../components/grid/cells/NumberCell.svelte   |   7 -
 .../components/grid/cells/OptionsCell.svelte  | 239 ---------
 .../grid/cells/RelationshipCell.svelte        | 503 ------------------
 .../src/components/grid/cells/TextCell.svelte | 110 ----
 .../grid/controls/AddColumnButton.svelte      |  16 -
 .../grid/controls/AddRowButton.svelte         |  18 -
 .../grid/controls/BetaButton.svelte           |  46 --
 .../grid/controls/DeleteButton.svelte         |  72 ---
 .../grid/controls/HideColumnsButton.svelte    |  91 ----
 .../grid/controls/RowHeightButton.svelte      |  70 ---
 .../grid/controls/SortButton.svelte           | 107 ----
 .../src/components/grid/index.js              |   1 -
 .../src/components/grid/layout/Avatar.svelte  |  24 -
 .../src/components/grid/layout/Grid.svelte    | 250 ---------
 .../components/grid/layout/GridBody.svelte    |  38 --
 .../src/components/grid/layout/GridRow.svelte |  57 --
 .../grid/layout/GridScrollWrapper.svelte      |  84 ---
 .../components/grid/layout/HeaderRow.svelte   |  30 --
 .../components/grid/layout/NewRowTop.svelte   | 247 ---------
 .../components/grid/layout/RowCount.svelte    |   9 -
 .../grid/layout/StickyColumn.svelte           | 245 ---------
 .../components/grid/layout/UserAvatars.svelte |  20 -
 .../src/components/grid/lib/constants.js      |  11 -
 .../src/components/grid/lib/events.js         |  29 -
 .../src/components/grid/lib/renderers.js      |  29 -
 .../src/components/grid/lib/utils.js          |  26 -
 .../src/components/grid/lib/websocket.js      |  63 ---
 .../grid/overlays/KeyboardManager.svelte      | 180 -------
 .../grid/overlays/MenuOverlay.svelte          |  95 ----
 .../grid/overlays/ReorderOverlay.svelte       |  63 ---
 .../grid/overlays/ResizeOverlay.svelte        |  70 ---
 .../grid/overlays/ScrollOverlay.svelte        | 121 -----
 .../src/components/grid/stores/bounds.js      |  16 -
 .../src/components/grid/stores/clipboard.js   |  34 --
 .../src/components/grid/stores/columns.js     | 206 -------
 .../src/components/grid/stores/index.js       |  48 --
 .../src/components/grid/stores/menu.js        |  49 --
 .../src/components/grid/stores/pagination.js  |  24 -
 .../src/components/grid/stores/reorder.js     | 155 ------
 .../src/components/grid/stores/resize.js      | 124 -----
 .../src/components/grid/stores/rows.js        | 462 ----------------
 .../src/components/grid/stores/scroll.js      | 201 -------
 .../src/components/grid/stores/ui.js          | 168 ------
 .../src/components/grid/stores/users.js       | 115 ----
 .../src/components/grid/stores/validation.js  |  45 --
 .../src/components/grid/stores/viewport.js    | 141 -----
 .../frontend-core/src/components/index.js     |   1 -
 packages/frontend-core/src/fetch/DataFetch.js |  48 +-
 .../frontend-core/src/fetch/QueryFetch.js     |   2 +-
 .../frontend-core/src/themes/midnight.css     |   3 -
 packages/frontend-core/src/themes/nord.css    |   3 -
 packages/frontend-core/src/utils/utils.js     |  20 -
 packages/server/package.json                  |   3 +-
 .../src/api/controllers/plugin/index.ts       |   4 +-
 .../server/src/api/controllers/table/utils.ts |   3 +-
 packages/server/src/app.ts                    |   4 +-
 packages/server/src/sdk/plugins/plugins.ts    |   4 +-
 packages/server/src/websocket.ts              |  26 +
 packages/server/src/websockets/client.ts      |  11 -
 packages/server/src/websockets/grid.ts        |  55 --
 packages/server/src/websockets/index.ts       |  14 -
 packages/server/src/websockets/websocket.ts   |  83 ---
 packages/types/src/documents/app/table.ts     |   3 -
 yarn.lock                                     |  10 +-
 125 files changed, 562 insertions(+), 6324 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte
 delete mode 100644 packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/DataCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/DateCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/FormulaCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/GridCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/JSONCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/MultiSelectCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/NumberCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/cells/TextCell.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/BetaButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/SortButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/index.js
 delete mode 100644 packages/frontend-core/src/components/grid/layout/Avatar.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/Grid.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/GridBody.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/GridRow.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/RowCount.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/lib/constants.js
 delete mode 100644 packages/frontend-core/src/components/grid/lib/events.js
 delete mode 100644 packages/frontend-core/src/components/grid/lib/renderers.js
 delete mode 100644 packages/frontend-core/src/components/grid/lib/utils.js
 delete mode 100644 packages/frontend-core/src/components/grid/lib/websocket.js
 delete mode 100644 packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/stores/bounds.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/clipboard.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/columns.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/index.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/menu.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/pagination.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/reorder.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/resize.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/rows.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/scroll.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/ui.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/users.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/validation.js
 delete mode 100644 packages/frontend-core/src/components/grid/stores/viewport.js
 create mode 100644 packages/server/src/websocket.ts
 delete mode 100644 packages/server/src/websockets/client.ts
 delete mode 100644 packages/server/src/websockets/grid.ts
 delete mode 100644 packages/server/src/websockets/index.ts
 delete mode 100644 packages/server/src/websockets/websocket.ts

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 1b814be96d..99535e6b33 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -84,7 +84,7 @@
     "@spectrum-css/vars": "3.0.1",
     "dayjs": "^1.10.4",
     "easymde": "^2.16.1",
-    "svelte-flatpickr": "^3.3.2",
+    "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index e9eb3b3471..60c8bec80b 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -71,7 +71,7 @@
     {/if}
     {#if icon}
       <svg
-        class="spectrum-Icon spectrum-Icon--sizeS"
+        class="spectrum-Icon spectrum-Icon--size{size}"
         focusable="false"
         aria-hidden="true"
         aria-label={icon}
diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js
index 5b7a059493..bdcbaa5d88 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -6,9 +6,6 @@ let clickHandlers = []
  */
 const handleClick = event => {
   // Ignore click if this is an ignored class
-  if (event.target.closest('[data-ignore-click-outside="true"]')) {
-    return
-  }
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -32,7 +29,6 @@ const handleClick = event => {
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
-document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 64d851b1e4..e2ef4e65ce 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -138,7 +138,7 @@
   }
 </script>
 
-<div class="container" class:compact>
+<div class="container">
   {#if selectedImage}
     {#if gallery}
       <div class="gallery">
@@ -355,9 +355,6 @@
   input[type="file"] {
     display: none;
   }
-  .compact .spectrum-Dropzone {
-    padding: 6px 0 !important;
-  }
 
   .gallery {
     display: flex;
@@ -382,17 +379,6 @@
     object-fit: contain;
     margin: 20px 30px;
   }
-  .compact .placeholder,
-  .compact img {
-    margin: 10px 16px;
-  }
-  .compact img {
-    height: 90px;
-  }
-  .compact .gallery {
-    padding: 6px 10px;
-    margin-bottom: 8px;
-  }
   .title {
     display: flex;
     flex-direction: row;
@@ -461,13 +447,6 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
-  .compact .spectrum-Dropzone {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-  .compact .spectrum-IllustratedMessage-description {
-    margin: 0;
-  }
 
   .tags {
     margin-top: 20px;
diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte
index ea9b5858f5..1d04c210f4 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -20,13 +20,12 @@
 
   const dispatch = createEventDispatcher()
 
-  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
-  $: selectedLookupMap = getSelectedLookupMap(arrayValue)
+  $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
 
-  $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
@@ -85,7 +84,7 @@
   {readonly}
   {fieldText}
   {options}
-  isPlaceholder={!arrayValue.length}
+  isPlaceholder={!value?.length}
   {autocomplete}
   bind:fetchTerm
   {useFetch}
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index 2a6fa1c57b..5b82c0ebea 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -16,7 +16,6 @@
   export let gallery = true
   export let fileTags = []
   export let maximum = undefined
-  export let compact = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -38,7 +37,6 @@
     {gallery}
     {fileTags}
     {maximum}
-    {compact}
     on:change={onChange}
   />
 </Field>
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 9f951a6a7e..6ba67ca0f5 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -20,7 +20,6 @@
   export let dismissible = true
   export let offset = 5
   export let customHeight
-  export let animate = true
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -79,7 +78,7 @@
       class="spectrum-Popover is-open"
       role="presentation"
       style="height: {customHeight}"
-      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />
     </div>
diff --git a/packages/bbui/src/Table/ArrayRenderer.svelte b/packages/bbui/src/Table/ArrayRenderer.svelte
index 637454dbca..3755850666 100644
--- a/packages/bbui/src/Table/ArrayRenderer.svelte
+++ b/packages/bbui/src/Table/ArrayRenderer.svelte
@@ -5,9 +5,8 @@
 
   const displayLimit = 5
 
-  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
-  $: badges = arrayValue.slice(0, displayLimit)
-  $: leftover = arrayValue.length - badges.length
+  $: badges = Array.isArray(value) ? value.slice(0, displayLimit) : []
+  $: leftover = (value?.length ?? 0) - badges.length
 </script>
 
 {#each badges as badge}
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 5bb4ed4523..19d361c8b1 100644
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@@ -143,7 +143,7 @@
     }
     fields?.forEach(field => {
       const fieldSchema = schema[field]
-      if (fieldSchema.width && typeof fieldSchema.width === "string") {
+      if (fieldSchema.width) {
         style += ` ${fieldSchema.width}`
       } else {
         style += " minmax(auto, 1fr)"
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index 343aa77b27..ef3483d3df 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -97,22 +97,4 @@
 
 a {
   text-decoration: none;
-}
-
-/* Custom theme additions */
-.spectrum--darkest {
-  --drop-shadow: rgba(0, 0, 0, 0.6);
-  --spectrum-global-color-blue-100: rgb(28, 33, 43);
-}
-.spectrum--dark {
-  --drop-shadow: rgba(0, 0, 0, 0.3);
-  --spectrum-global-color-blue-100: rgb(42, 47, 57);
-}
-.spectrum--light {
-  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
-}
-.spectrum--lightest {
-  --drop-shadow: rgba(0, 0, 0, 0.05);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index acb3dacf93..0c5adfc18c 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -1,74 +1,286 @@
 <script>
+  import { fade } from "svelte/transition"
   import { tables } from "stores/backend"
+  import CreateRowButton from "./buttons/CreateRowButton.svelte"
+  import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
+  import CreateViewButton from "./buttons/CreateViewButton.svelte"
+  import ExistingRelationshipButton from "./buttons/ExistingRelationshipButton.svelte"
+  import ExportButton from "./buttons/ExportButton.svelte"
+  import ImportButton from "./buttons/ImportButton.svelte"
   import EditRolesButton from "./buttons/EditRolesButton.svelte"
+  import ManageAccessButton from "./buttons/ManageAccessButton.svelte"
+  import HideAutocolumnButton from "./buttons/HideAutocolumnButton.svelte"
+  import TableFilterButton from "./buttons/TableFilterButton.svelte"
+  import Table from "./Table.svelte"
   import { TableNames } from "constants"
-  import { Grid } from "@budibase/frontend-core"
+  import CreateEditRow from "./modals/CreateEditRow.svelte"
+  import {
+    Pagination,
+    Heading,
+    Body,
+    Layout,
+    notifications,
+  } from "@budibase/bbui"
+  import { fetchData } from "@budibase/frontend-core"
   import { API } from "api"
-  import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
-  import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
-  import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
-  import GridCreateViewButton from "components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte"
-  import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte"
-  import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte"
-  import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte"
-  import GridManageAccessButton from "components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte"
-  import GridRelationshipButton from "components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte"
-  import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
 
-  const userSchemaOverrides = {
-    firstName: { name: "First name", disabled: true },
-    lastName: { name: "Last name", disabled: true },
-    email: { name: "Email", disabled: true },
-    roleId: { name: "Role", disabled: true },
-    status: { name: "Status", disabled: true },
+  let hideAutocolumns = true
+  let filters
+
+  $: isUsersTable = $tables.selected?._id === TableNames.USERS
+  $: type = $tables.selected?.type
+  $: isInternal = type !== "external"
+  $: schema = $tables.selected?.schema
+  $: enrichedSchema = enrichSchema($tables.selected?.schema)
+  $: id = $tables.selected?._id
+  $: fetch = createFetch(id)
+  $: hasCols = checkHasCols(schema)
+  $: hasRows = !!$fetch.rows?.length
+  $: showError($fetch.error)
+  $: id, (filters = null)
+
+  let appliedFilter
+  let rawFilter
+  let appliedSort
+  let selectedRows = []
+
+  $: enrichedSchema,
+    () => {
+      appliedFilter = null
+      rawFilter = null
+      appliedSort = null
+      selectedRows = []
+    }
+
+  $: if (Number.isInteger($fetch.pageNumber)) {
+    selectedRows = []
   }
 
-  $: id = $tables.selected?._id
-  $: isUsersTable = id === TableNames.USERS
-  $: isInternal = $tables.selected?.type !== "external"
+  const showError = error => {
+    if (error) {
+      notifications.error(error?.message || "Unable to fetch data.")
+    }
+  }
+
+  const enrichSchema = schema => {
+    let tempSchema = { ...schema }
+    tempSchema._id = {
+      type: "internal",
+      editable: false,
+      displayName: "ID",
+      autocolumn: true,
+    }
+    if (isInternal) {
+      tempSchema._rev = {
+        type: "internal",
+        editable: false,
+        displayName: "Revision",
+        autocolumn: true,
+      }
+    }
+
+    return tempSchema
+  }
+
+  const checkHasCols = schema => {
+    if (!schema || Object.keys(schema).length === 0) {
+      return false
+    }
+    let fields = Object.values(schema)
+    for (let field of fields) {
+      if (!field.autocolumn) {
+        return true
+      }
+    }
+    return false
+  }
+
+  // Fetches new data whenever the table changes
+  const createFetch = tableId => {
+    return fetchData({
+      API,
+      datasource: {
+        tableId,
+        type: "table",
+      },
+      options: {
+        schema,
+        limit: 10,
+        paginate: true,
+      },
+    })
+  }
+
+  // Fetch data whenever sorting option changes
+  const onSort = async e => {
+    const sort = {
+      sortColumn: e.detail.column,
+      sortOrder: e.detail.order,
+    }
+    await fetch.update(sort)
+    appliedSort = { ...sort }
+    appliedSort.sortOrder = appliedSort.sortOrder.toLowerCase()
+    selectedRows = []
+  }
+
+  // Fetch data whenever filters change
+  const onFilter = e => {
+    filters = e.detail
+    fetch.update({
+      filter: filters,
+    })
+    appliedFilter = e.detail
+  }
+
+  // Fetch data whenever schema changes
+  const onUpdateColumns = () => {
+    selectedRows = []
+    fetch.refresh()
+    tables.fetchTable(id)
+  }
+
+  // Fetch data whenever rows are modified. Unfortunately we have to lose
+  // our pagination place, as our bookmarks will have shifted.
+  const onUpdateRows = () => {
+    selectedRows = []
+    fetch.refresh()
+  }
+
+  // When importing new rows it is better to reinitialise request/paging data.
+  // Not doing so causes inconsistency in paging behaviour and content.
+  const onImportData = () => {
+    fetch.getInitialData()
+  }
 </script>
 
-<div class="wrapper">
-  <Grid
-    {API}
+<div>
+  <Table
+    title={$tables.selected?.name}
+    schema={enrichedSchema}
+    {type}
     tableId={id}
-    allowAddRows={!isUsersTable}
-    allowDeleteRows={!isUsersTable}
-    schemaOverrides={isUsersTable ? userSchemaOverrides : null}
-    on:updatetable={e => tables.updateTable(e.detail)}
+    data={$fetch.rows}
+    bind:hideAutocolumns
+    loading={!$fetch.loaded}
+    on:sort={onSort}
+    allowEditing
+    disableSorting
+    on:updatecolumns={onUpdateColumns}
+    on:updaterows={onUpdateRows}
+    on:selectionUpdated={e => {
+      selectedRows = e.detail
+    }}
+    customPlaceholder
   >
-    <svelte:fragment slot="controls">
-      {#if isInternal}
-        <GridCreateViewButton />
-      {/if}
-      <GridManageAccessButton />
-      {#if isUsersTable}
-        <EditRolesButton />
-      {/if}
-      {#if !isInternal}
-        <GridRelationshipButton />
-      {/if}
-      <GridImportButton disabled={isUsersTable} />
-      <GridExportButton />
-      <GridFilterButton />
-      <GridAddColumnModal />
-      <GridEditColumnModal />
-      {#if isUsersTable}
-        <GridEditUserModal />
-      {:else}
-        <GridCreateEditRowModal />
-      {/if}
-    </svelte:fragment>
-  </Grid>
+    <div class="buttons">
+      <div class="left-buttons">
+        <CreateColumnButton
+          highlighted={$fetch.loaded && (!hasCols || !hasRows)}
+          on:updatecolumns={onUpdateColumns}
+        />
+        {#if !isUsersTable}
+          <CreateRowButton
+            on:updaterows={onUpdateRows}
+            title={"Create row"}
+            modalContentComponent={CreateEditRow}
+            disabled={!hasCols}
+            highlighted={$fetch.loaded && hasCols && !hasRows}
+          />
+        {/if}
+        {#if isInternal}
+          <CreateViewButton disabled={!hasCols || !hasRows} />
+        {/if}
+      </div>
+      <div class="right-buttons">
+        <ManageAccessButton resourceId={$tables.selected?._id} />
+        {#if isUsersTable}
+          <EditRolesButton />
+        {/if}
+        {#if !isInternal}
+          <ExistingRelationshipButton
+            table={$tables.selected}
+            on:updatecolumns={onUpdateColumns}
+          />
+        {/if}
+        <HideAutocolumnButton bind:hideAutocolumns />
+        <ImportButton
+          disabled={$tables.selected?._id === "ta_users"}
+          tableId={$tables.selected?._id}
+          on:importrows={onImportData}
+        />
+        <ExportButton
+          disabled={!hasRows || !hasCols}
+          view={$tables.selected?._id}
+          filters={appliedFilter}
+          sorting={appliedSort}
+          {selectedRows}
+        />
+        {#key id}
+          <TableFilterButton
+            {schema}
+            {filters}
+            on:change={onFilter}
+            disabled={!hasCols}
+            tableId={id}
+          />
+        {/key}
+      </div>
+    </div>
+    <div slot="placeholder">
+      <Layout gap="S">
+        {#if !hasCols}
+          <Heading>Let's create some columns</Heading>
+          <Body>
+            Start building out your table structure<br />
+            by adding some columns
+          </Body>
+        {:else}
+          <Heading>Now let's add a row</Heading>
+          <Body>
+            Add some data to your table<br />
+            by adding some rows
+          </Body>
+        {/if}
+      </Layout>
+    </div>
+  </Table>
+  {#key id}
+    <div in:fade={{ delay: 200, duration: 100 }}>
+      <div class="pagination">
+        <Pagination
+          page={$fetch.pageNumber + 1}
+          hasPrevPage={$fetch.hasPrevPage}
+          hasNextPage={$fetch.hasNextPage}
+          goToPrevPage={$fetch.loading ? null : fetch.prevPage}
+          goToNextPage={$fetch.loading ? null : fetch.nextPage}
+        />
+      </div>
+    </div>
+  {/key}
 </div>
 
 <style>
-  .wrapper {
-    flex: 1 1 auto;
-    margin: -28px -40px -40px -40px;
+  .pagination {
     display: flex;
-    flex-direction: column;
-    background: var(--background);
-    overflow: hidden;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: var(--spacing-xl);
+  }
+  .buttons {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .left-buttons,
+  .right-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 4df6e9a306..a0e777c331 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,10 +1,15 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import { Table, Heading, Layout } from "@budibase/bbui"
+  import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
+  import { API } from "api"
   import Spinner from "components/common/Spinner.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
   import CreateEditRow from "./modals/CreateEditRow.svelte"
   import CreateEditUser from "./modals/CreateEditUser.svelte"
+  import CreateEditColumn from "./modals/CreateEditColumn.svelte"
+  import { cloneDeep } from "lodash/fp"
   import {
     TableNames,
     UNEDITABLE_USER_FIELDS,
@@ -17,6 +22,7 @@
   export let data = []
   export let tableId
   export let title
+  export let allowEditing = false
   export let loading = false
   export let hideAutocolumns
   export let rowCount
@@ -26,7 +32,12 @@
   const dispatch = createEventDispatcher()
 
   let selectedRows = []
+  let editableColumn
+  let editableRow
+  let editRowModal
+  let editColumnModal
   let customRenderers = []
+  let confirmDelete
 
   $: selectedRows, dispatch("selectionUpdated", selectedRows)
   $: isUsersTable = tableId === TableNames.USERS
@@ -81,6 +92,36 @@
       `/builder/app/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
     )
   }
+
+  const deleteRows = async targetRows => {
+    try {
+      await API.deleteRows({
+        tableId,
+        rows: targetRows,
+      })
+
+      const deletedRowIds = targetRows.map(row => row._id)
+      data = data.filter(row => deletedRowIds.indexOf(row._id))
+
+      notifications.success(`Successfully deleted ${targetRows.length} rows`)
+    } catch (error) {
+      notifications.error("Error deleting rows")
+    }
+  }
+
+  const editRow = row => {
+    editableRow = row
+    if (row) {
+      editRowModal.show()
+    }
+  }
+
+  const editColumn = field => {
+    editableColumn = cloneDeep(schema?.[field])
+    if (editableColumn) {
+      editColumnModal.show()
+    }
+  }
 </script>
 
 <Layout noPadding gap="S">
@@ -97,6 +138,16 @@
     {/if}
     <div class="popovers">
       <slot />
+      {#if !isUsersTable && selectedRows.length > 0}
+        <DeleteRowsButton
+          on:updaterows
+          {selectedRows}
+          deleteRows={async rows => {
+            await deleteRows(rows)
+            resetSelectedRows()
+          }}
+        />
+      {/if}
     </div>
   </Layout>
   {#key tableId}
@@ -109,7 +160,13 @@
         {rowCount}
         {disableSorting}
         {customPlaceholder}
+        bind:selectedRows
+        allowSelectRows={allowEditing && !isUsersTable}
+        allowEditRows={allowEditing}
+        allowEditColumns={allowEditing}
         showAutoColumns={!hideAutocolumns}
+        on:editcolumn={e => editColumn(e.detail)}
+        on:editrow={e => editRow(e.detail)}
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
       >
@@ -119,6 +176,42 @@
   {/key}
 </Layout>
 
+<Modal bind:this={editRowModal}>
+  <svelte:component
+    this={editRowComponent}
+    on:updaterows
+    on:deleteRows={() => {
+      confirmDelete.show()
+    }}
+    row={editableRow}
+  />
+</Modal>
+
+<ConfirmDialog
+  bind:this={confirmDelete}
+  okText="Delete"
+  onOk={async () => {
+    if (editableRow) {
+      await deleteRows([editableRow])
+    }
+    editableRow = undefined
+  }}
+  onCancel={async () => {
+    editRow(editableRow)
+  }}
+  title="Confirm Deletion"
+>
+  Are you sure you want to delete this row?
+</ConfirmDialog>
+
+<Modal bind:this={editColumnModal}>
+  <CreateEditColumn
+    field={editableColumn}
+    on:updatecolumns
+    onClosed={editColumnModal.hide}
+  />
+</Modal>
+
 <style>
   .table-title {
     height: 24px;
diff --git a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
index 056bc33994..cf525f3ef3 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -57,6 +57,7 @@
   {data}
   {loading}
   {type}
+  allowEditing={false}
   rowCount={10}
   bind:hideAutocolumns
 >
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
index 48d8f0ebab..7145171ee1 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -9,6 +9,7 @@
 
 <ActionButton
   icon="Calculator"
+  size="S"
   quiet
   on:click={modal.show}
   active={view.field && view.calculation}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
new file mode 100644
index 0000000000..8644ee86da
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { ActionButton, Modal } from "@budibase/bbui"
+  import CreateEditColumn from "../modals/CreateEditColumn.svelte"
+
+  export let highlighted = false
+  export let disabled = false
+
+  let modal
+</script>
+
+<ActionButton
+  {disabled}
+  selected={highlighted}
+  emphasized={highlighted}
+  icon="TableColumnAddRight"
+  quiet
+  size="S"
+  on:click={modal.show}
+>
+  Create column
+</ActionButton>
+<Modal bind:this={modal}>
+  <CreateEditColumn on:updatecolumns />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
new file mode 100644
index 0000000000..1676a5b23c
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { ActionButton, Modal } from "@budibase/bbui"
+  import CreateEditRow from "../modals/CreateEditRow.svelte"
+
+  export let modalContentComponent = CreateEditRow
+  export let title = "Create row"
+  export let disabled = false
+  export let highlighted = false
+
+  let modal
+</script>
+
+<ActionButton
+  {disabled}
+  emphasized={highlighted}
+  selected={highlighted}
+  icon="TableRowAddBottom"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
+  {title}
+</ActionButton>
+<Modal bind:this={modal}>
+  <svelte:component this={modalContentComponent} on:updaterows />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
new file mode 100644
index 0000000000..0133b5bd79
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Modal, ActionButton } from "@budibase/bbui"
+  import CreateViewModal from "../modals/CreateViewModal.svelte"
+
+  export let disabled = false
+
+  let modal
+</script>
+
+<ActionButton
+  {disabled}
+  icon="CollectionAdd"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
+  Create view
+</ActionButton>
+<Modal bind:this={modal}>
+  <CreateViewModal />
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
index 6c718d79ae..4241013d89 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
@@ -19,7 +19,7 @@
   $: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
 </script>
 
-<Button icon="Delete" warning quiet on:click={modal.show}>
+<Button icon="Delete" size="s" warning quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   {text}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
index 87ca2fa142..ad6a685d34 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -1,13 +1,15 @@
 <script>
-  import { ActionButton, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
-<ActionButton icon="UsersLock" quiet on:click={modal.show}>
-  Edit roles
-</ActionButton>
+<div>
+  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
+    Edit roles
+  </Button>
+</div>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
index 3d837a54f0..e188783f7d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
@@ -7,23 +7,15 @@
   export let table
   const dispatch = createEventDispatcher()
 
-  $: datasource = findDatasource(table?._id)
   $: plusTables = datasource?.plus
     ? Object.values(datasource?.entities || {})
     : []
+  $: datasource = $datasources.list.find(
+    source => source._id === table?.sourceId
+  )
 
   let modal
 
-  const findDatasource = tableId => {
-    return $datasources.list.find(datasource => {
-      return (
-        Object.values(datasource.entities || {}).find(entity => {
-          return entity._id === tableId
-        }) != null
-      )
-    })
-  }
-
   async function saveRelationship() {
     try {
       // Create datasource
@@ -36,9 +28,15 @@
   }
 </script>
 
-{#if datasource}
+{#if table.sourceId}
   <div>
-    <ActionButton icon="DataCorrelated" primary quiet on:click={modal.show}>
+    <ActionButton
+      icon="DataCorrelated"
+      primary
+      size="S"
+      quiet
+      on:click={modal.show}
+    >
       Define existing relationship
     </ActionButton>
   </div>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
index fd0d64f6cd..d3ad45dde4 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -11,7 +11,13 @@
   let modal
 </script>
 
-<ActionButton {disabled} icon="DataDownload" quiet on:click={modal.show}>
+<ActionButton
+  {disabled}
+  icon="DataDownload"
+  size="S"
+  quiet
+  on:click={modal.show}
+>
   Export
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
index 79dbea4b6b..8b313e8f9b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -10,6 +10,7 @@
 <Button
   icon="Group"
   primary
+  size="S"
   quiet
   active={!!view.groupBy}
   on:click={modal.show}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
index 819ebcec3b..e9b042a653 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -11,6 +11,7 @@
 <ActionButton
   icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
   primary
+  size="S"
   quiet
   on:click={hideOrUnhide}
 >
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
index 88ef30210a..4497ec3508 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
@@ -8,7 +8,7 @@
   let modal
 </script>
 
-<ActionButton icon="DataUpload" quiet on:click={modal.show} {disabled}>
+<ActionButton icon="DataUpload" size="S" quiet on:click={modal.show} {disabled}>
   Import
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index 4d5faca4c6..7a9e582c2d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -4,7 +4,6 @@
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
   export let resourceId
-  export let disabled = false
 
   let modal
   let resourcePermissions
@@ -15,7 +14,7 @@
   }
 </script>
 
-<ActionButton icon="LockClosed" quiet on:click={openDropdown} {disabled}>
+<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
   Manage access
 </ActionButton>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index 5af8d1bac8..5db4eb5288 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -18,10 +18,11 @@
 
 <ActionButton
   icon="Filter"
+  size="S"
   quiet
   {disabled}
   on:click={modal.show}
-  selected={tempValue?.length > 0}
+  active={tempValue?.length > 0}
 >
   Filter
 </ActionButton>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
index bad3982b9b..2e2026baed 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
@@ -9,6 +9,7 @@
 
 <ActionButton
   icon="Filter"
+  size="S"
   quiet
   on:click={modal.show}
   active={view.filters?.length}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
deleted file mode 100644
index 1c11211570..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { Modal, ActionButton } from "@budibase/bbui"
-  import CreateViewModal from "../../modals/CreateViewModal.svelte"
-
-  const { rows, columns } = getContext("grid")
-
-  let modal
-
-  $: disabled = !$columns.length || !$rows.length
-</script>
-
-<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
-  Create view
-</ActionButton>
-<Modal bind:this={modal}>
-  <CreateViewModal />
-</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
deleted file mode 100644
index 1661808e9d..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import ExportButton from "../ExportButton.svelte"
-  import { getContext } from "svelte"
-
-  const { rows, columns, tableId, sort, selectedRows, filter } =
-    getContext("grid")
-
-  $: disabled = !$rows.length || !$columns.length
-  $: selectedRowArray = Object.keys($selectedRows).map(id => ({ _id: id }))
-</script>
-
-<ExportButton
-  {disabled}
-  view={$tableId}
-  filters={$filter}
-  sorting={{
-    sortColumn: $sort.column,
-    sortOrder: $sort.order,
-  }}
-  selectedRows={selectedRowArray}
-/>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
deleted file mode 100644
index aff98deaaf..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import TableFilterButton from "../TableFilterButton.svelte"
-  import { getContext } from "svelte"
-
-  const { columns, config, filter, table } = getContext("grid")
-
-  const onFilter = e => {
-    filter.set(e.detail || [])
-  }
-</script>
-
-{#key $config.tableId}
-  <TableFilterButton
-    schema={$table?.schema}
-    filters={$filter}
-    on:change={onFilter}
-    disabled={!$columns.length}
-    tableId={$config.tableId}
-  />
-{/key}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
deleted file mode 100644
index 5aa530b028..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import ImportButton from "../ImportButton.svelte"
-  import { getContext } from "svelte"
-
-  export let disabled = false
-
-  const { rows, tableId } = getContext("grid")
-</script>
-
-<ImportButton
-  {disabled}
-  tableId={$tableId}
-  on:importrows={rows.actions.refreshData}
-/>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
deleted file mode 100644
index d41d0a1a25..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  import ManageAccessButton from "../ManageAccessButton.svelte"
-  import { getContext } from "svelte"
-
-  const { config } = getContext("grid")
-</script>
-
-<ManageAccessButton resourceId={$config.tableId} />
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
deleted file mode 100644
index 460391366f..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import ExistingRelationshipButton from "../ExistingRelationshipButton.svelte"
-  import { getContext } from "svelte"
-
-  const { table, rows } = getContext("grid")
-</script>
-
-{#if $table}
-  <ExistingRelationshipButton
-    table={$table}
-    on:updatecolumns={() => rows.actions.refreshData()}
-  />
-{/if}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 8a4a6d3012..b4293a2a0a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -182,12 +182,8 @@
         indexes,
       })
       dispatch("updatecolumns")
-      if (originalName) {
-        notifications.success("Column updated successfully")
-      } else {
-        notifications.success("Column created successfully")
-      }
     } catch (err) {
+      console.log(err)
       notifications.error(`Error saving column: ${err.message}`)
     }
   }
@@ -203,7 +199,7 @@
         notifications.error("You cannot delete the display column")
       } else {
         await tables.deleteField(editableColumn)
-        notifications.success(`Column ${editableColumn.name} deleted`)
+        notifications.success(`Column ${editableColumn.name} deleted.`)
         confirmDeleteDialog.hide()
         hide()
         deletion = false
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
index ebff97e0fc..2bca6474d2 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
@@ -23,9 +23,9 @@
   async function saveRow() {
     errors = []
     try {
-      const res = await API.saveRow({ ...row, tableId: table._id })
+      await API.saveRow({ ...row, tableId: table._id })
       notifications.success("Row saved successfully")
-      dispatch("updaterows", res._id)
+      dispatch("updaterows")
     } catch (error) {
       const response = error.json
       if (error.handled && response?.errors) {
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
index 4c069402a7..d39740b892 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte
@@ -55,9 +55,9 @@
     }
 
     try {
-      const res = await API.saveRow({ ...row, tableId: table._id })
+      await API.saveRow({ ...row, tableId: table._id })
       notifications.success("User saved successfully")
-      dispatch("updaterows", res.id)
+      dispatch("updaterows")
     } catch (error) {
       if (error.handled) {
         const response = error.json
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
deleted file mode 100644
index 9e386ae140..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import { getContext, onMount } from "svelte"
-  import { Modal } from "@budibase/bbui"
-  import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
-
-  const { rows, subscribe } = getContext("grid")
-
-  let modal
-
-  onMount(() => subscribe("add-column", modal.show))
-</script>
-
-<Modal bind:this={modal}>
-  <CreateEditColumn on:updatecolumns={rows.actions.refreshTableDefinition} />
-</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte
deleted file mode 100644
index e45ffc586e..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script>
-  import CreateEditRow from "../../modals/CreateEditRow.svelte"
-  import { getContext, onMount } from "svelte"
-  import { Modal } from "@budibase/bbui"
-  import { cloneDeep } from "lodash/fp"
-
-  const { subscribe, rows } = getContext("grid")
-
-  let modal
-  let row
-
-  onMount(() =>
-    subscribe("add-row", () => {
-      row = {}
-      modal.show()
-    })
-  )
-  onMount(() =>
-    subscribe("edit-row", rowToEdit => {
-      row = cloneDeep(rowToEdit)
-      modal.show()
-    })
-  )
-</script>
-
-<Modal bind:this={modal}>
-  <CreateEditRow {row} on:updaterows={e => rows.actions.refreshRow(e.detail)} />
-</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte
deleted file mode 100644
index 3297037265..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  import { getContext, onMount } from "svelte"
-  import { Modal } from "@budibase/bbui"
-  import CreateEditColumn from "../CreateEditColumn.svelte"
-
-  const { rows, subscribe } = getContext("grid")
-
-  let editableColumn
-  let editColumnModal
-
-  const editColumn = column => {
-    editableColumn = column
-    editColumnModal.show()
-  }
-
-  onMount(() => subscribe("edit-column", editColumn))
-</script>
-
-<Modal bind:this={editColumnModal}>
-  <CreateEditColumn
-    field={editableColumn}
-    on:updatecolumns={rows.actions.refreshData}
-  />
-</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte b/packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte
deleted file mode 100644
index 34a255e0f6..0000000000
--- a/packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import CreateEditUser from "../../modals/CreateEditUser.svelte"
-  import { getContext, onMount } from "svelte"
-  import { Modal } from "@budibase/bbui"
-  import { cloneDeep } from "lodash/fp"
-
-  const { subscribe, rows } = getContext("grid")
-
-  let modal
-  let row
-
-  onMount(() =>
-    subscribe("edit-row", rowToEdit => {
-      row = cloneDeep(rowToEdit)
-      modal.show()
-    })
-  )
-</script>
-
-<Modal bind:this={modal}>
-  <CreateEditUser
-    {row}
-    on:updaterows={e => rows.actions.refreshRow(e.detail)}
-  />
-</Modal>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 94b9020203..182ac49314 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -13,13 +13,6 @@
   $: sortedTables = $tables.list
     .filter(table => table.sourceId === sourceId)
     .sort(alphabetical)
-
-  const selectTable = tableId => {
-    tables.select(tableId)
-    if (!$isActive("./table/:tableId")) {
-      $goto(`./table/${tableId}`)
-    }
-  }
 </script>
 
 {#if $database?._id}
@@ -32,7 +25,7 @@
         text={table.name}
         selected={$isActive("./table/:tableId") &&
           $tables.selected?._id === table._id}
-        on:click={() => selectTable(table._id)}
+        on:click={() => $goto(`./table/${table._id}`)}
       >
         {#if table._id !== TableNames.USERS}
           <EditTablePopover {table} />
diff --git a/packages/builder/src/components/commandPalette/CommandPalette.svelte b/packages/builder/src/components/commandPalette/CommandPalette.svelte
index ae946dc10c..cf976a799e 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -325,4 +325,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  footer {
+    display: flex;
+    justify-content: center;
+  }
 </style>
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 34d083a096..96c0e2154a 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -59,7 +59,9 @@
   <div class="app-row-actions">
     <AppLockModal {app} buttonSize="M" />
     <Button size="S" secondary on:click={goToOverview}>Manage</Button>
-    <Button size="S" primary on:click={goToBuilder}>Edit</Button>
+    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
+      Edit
+    </Button>
   </div>
 </div>
 
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index bc1f55d9d3..5e9a35706e 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -70,6 +70,7 @@ a {
   background: var(--spectrum-alias-background-color-default);
 }
 html * {
+  scrollbar-width: thin;
   scrollbar-color: var(--spectrum-global-color-gray-400)
     var(--spectrum-alias-background-color-default);
 }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
index d35e7cd515..5da16d2b50 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
@@ -28,7 +28,6 @@
       "dataprovider",
       "repeater",
       "table",
-      "spreadsheet",
       "dynamicfilter",
       "daterangepicker"
     ]
diff --git a/packages/builder/src/stores/backend/tables.js b/packages/builder/src/stores/backend/tables.js
index 75679532f3..3b7ce35dde 100644
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@@ -135,24 +135,6 @@ export function createTablesStore() {
     await save(draft)
   }
 
-  const updateTable = table => {
-    const index = get(store).list.findIndex(x => x._id === table._id)
-    if (index === -1) {
-      return
-    }
-
-    // This function has to merge state as there discrepancies with the table
-    // API endpoints. The table list endpoint and get table endpoint use the
-    // "type" property to mean different things.
-    store.update(state => {
-      state.list[index] = {
-        ...table,
-        type: state.list[index].type,
-      }
-      return state
-    })
-  }
-
   return {
     subscribe: derivedStore.subscribe,
     fetch,
@@ -163,7 +145,6 @@ export function createTablesStore() {
     delete: deleteTable,
     saveField,
     deleteField,
-    updateTable,
   }
 }
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index f27d090617..c4408b9202 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5161,36 +5161,5 @@
       "type": "schema",
       "suffix": "repeater"
     }
-  },
-  "spreadsheet": {
-    "name": "Spreadsheet",
-    "icon": "ViewGrid",
-    "settings": [
-      {
-        "key": "table",
-        "type": "table",
-        "label": "Table"
-      },
-      {
-        "type": "filter",
-        "label": "Filtering",
-        "key": "filter"
-      },
-      {
-        "type": "field/sortable",
-        "label": "Sort Column",
-        "key": "sortColumn"
-      },
-      {
-        "type": "select",
-        "label": "Sort Order",
-        "key": "sortOrder",
-        "options": [
-          "Ascending",
-          "Descending"
-        ],
-        "defaultValue": "Ascending"
-      }
-    ]
   }
 }
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index ce8722bb9b..d69170702c 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -95,7 +95,7 @@
 
 <svelte:head>
   {#if $builderStore.usedPlugins?.length}
-    {#each $builderStore.usedPlugins as plugin (plugin.hash)}
+    {#each $builderStore.usedPlugins as plugin}
       <script src={`${plugin.jsUrl}`}></script>
     {/each}
   {/if}
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index c9ff1eba36..264cc85626 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -12,7 +12,6 @@ import {
   environmentStore,
   sidePanelStore,
   dndIsDragging,
-  confirmationStore,
 } from "stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
@@ -36,7 +35,6 @@ export default {
   sidePanelStore,
   dndIsDragging,
   currentRole,
-  confirmationStore,
   styleable,
   linkable,
   getAction,
diff --git a/packages/client/src/utils/domDebounce.js b/packages/client/src/utils/domDebounce.js
index b15d2698b4..b7fc017247 100644
--- a/packages/client/src/utils/domDebounce.js
+++ b/packages/client/src/utils/domDebounce.js
@@ -1,14 +1,12 @@
-export const domDebounce = (callback, extractParams = x => x) => {
+export const domDebounce = callback => {
   let active = false
-  let lastParams
-  return (...params) => {
-    lastParams = extractParams(...params)
+  return e => {
     if (!active) {
-      active = true
-      requestAnimationFrame(() => {
-        callback(lastParams)
+      window.requestAnimationFrame(() => {
+        callback(e)
         active = false
       })
+      active = true
     }
   }
 }
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 48161defb8..4f1cc2930d 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -8,9 +8,7 @@
   "dependencies": {
     "@budibase/bbui": "2.5.6-alpha.6",
     "@budibase/shared-core": "2.5.6-alpha.6",
-    "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "socket.io-client": "^4.6.1",
     "svelte": "^3.46.2"
   }
 }
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
deleted file mode 100644
index 2eb191e113..0000000000
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { getContext } from "svelte"
-  import { Dropzone, notifications } from "@budibase/bbui"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let readonly = false
-  export let api
-  export let invertX = false
-  export let invertY = false
-
-  const { API } = getContext("grid")
-  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
-
-  let isOpen = false
-
-  $: editable = focused && !readonly
-  $: {
-    if (!focused) {
-      close()
-    }
-  }
-
-  const onKeyDown = () => {
-    return isOpen
-  }
-
-  const open = () => {
-    isOpen = true
-  }
-
-  const close = () => {
-    isOpen = false
-  }
-
-  const isImage = extension => {
-    return imageExtensions.includes(extension?.toLowerCase())
-  }
-
-  const handleFileTooLarge = fileSizeLimit => {
-    notifications.error(
-      `Files cannot exceed ${
-        fileSizeLimit / 1000000
-      }MB. Please try again with smaller files.`
-    )
-  }
-
-  const processFiles = async fileList => {
-    let data = new FormData()
-    for (let i = 0; i < fileList.length; i++) {
-      data.append("file", fileList[i])
-    }
-    try {
-      return await API.uploadBuilderAttachment(data)
-    } catch (error) {
-      notifications.error("Failed to upload attachment")
-      return []
-    }
-  }
-
-  const deleteAttachments = async fileList => {
-    try {
-      return await API.deleteBuilderAttachments(fileList)
-    } catch (error) {
-      return []
-    }
-  }
-
-  onMount(() => {
-    api = {
-      focus: () => open(),
-      blur: () => close(),
-      onKeyDown,
-    }
-  })
-</script>
-
-<div class="attachment-cell" class:editable on:click={editable ? open : null}>
-  {#each value || [] as attachment}
-    {#if isImage(attachment.extension)}
-      <img src={attachment.url} alt={attachment.extension} />
-    {:else}
-      <div class="file" title={attachment.name}>
-        {attachment.extension}
-      </div>
-    {/if}
-  {/each}
-</div>
-
-{#if isOpen}
-  <div class="dropzone" class:invertX class:invertY>
-    <Dropzone
-      {value}
-      compact
-      on:change={e => onChange(e.detail)}
-      {processFiles}
-      {deleteAttachments}
-      {handleFileTooLarge}
-    />
-  </div>
-{/if}
-
-<style>
-  .attachment-cell {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding: var(--cell-padding);
-    flex-wrap: nowrap;
-    gap: var(--cell-spacing);
-    align-self: stretch;
-    overflow: hidden;
-    user-select: none;
-  }
-  .attachment-cell.editable:hover {
-    cursor: pointer;
-  }
-  .file {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 10px;
-    color: var(--spectrum-global-color-gray-700);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 12px;
-    user-select: none;
-  }
-  .dropzone {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 320px;
-    background: var(--background);
-    border: var(--cell-border);
-    padding: var(--cell-padding);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-  }
-  .dropzone.invertX {
-    left: auto;
-    right: 0;
-  }
-  .dropzone.invertY {
-    transform: translateY(-100%);
-    top: 0;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
deleted file mode 100644
index 52aecb07a7..0000000000
--- a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { Checkbox } from "@budibase/bbui"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let readonly = false
-  export let api
-
-  $: editable = focused && !readonly
-
-  const handleChange = e => {
-    onChange(e.detail)
-  }
-
-  const onKeyDown = e => {
-    if (e.key === "Enter") {
-      onChange(!value)
-      return true
-    }
-    return false
-  }
-
-  onMount(() => {
-    api = {
-      onKeyDown,
-    }
-  })
-</script>
-
-<div class="boolean-cell" class:editable>
-  <Checkbox {value} on:change={handleChange} />
-</div>
-
-<style>
-  .boolean-cell {
-    padding: 2px var(--cell-padding);
-    pointer-events: none;
-  }
-  .boolean-cell.editable {
-    pointer-events: all;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
deleted file mode 100644
index d97edabc01..0000000000
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import GridCell from "./GridCell.svelte"
-  import { getCellRenderer } from "../lib/renderers"
-  import { derived, writable } from "svelte/store"
-
-  const { rows, focusedCellId, focusedCellAPI, menu, config, validation } =
-    getContext("grid")
-
-  export let highlighted
-  export let selected
-  export let rowFocused
-  export let rowIdx
-  export let focused
-  export let selectedUser
-  export let column
-  export let row
-  export let cellId
-  export let updateValue = rows.actions.updateValue
-  export let invertX = false
-  export let invertY = false
-
-  const emptyError = writable(null)
-
-  let api
-
-  // Get the error for this cell if the row is focused
-  $: error = getErrorStore(rowFocused, cellId)
-
-  // Determine if the cell is editable
-  $: readonly =
-    column.schema.autocolumn ||
-    column.schema.disabled ||
-    (!$config.allowEditRows && row._id)
-
-  // Register this cell API if the row is focused
-  $: {
-    if (focused) {
-      focusedCellAPI.set(cellAPI)
-    }
-  }
-
-  const getErrorStore = (selected, cellId) => {
-    if (!selected) {
-      return emptyError
-    }
-    return derived(validation, $validation => $validation[cellId])
-  }
-
-  const cellAPI = {
-    focus: () => api?.focus(),
-    blur: () => api?.blur(),
-    onKeyDown: (...params) => api?.onKeyDown(...params),
-    isReadonly: () => readonly,
-    getType: () => column.schema.type,
-    getValue: () => row[column.name],
-    setValue: value => {
-      validation.actions.setError(cellId, null)
-      updateValue(row._id, column.name, value)
-    },
-  }
-</script>
-
-<GridCell
-  {highlighted}
-  {selected}
-  {rowIdx}
-  {focused}
-  {selectedUser}
-  error={$error}
-  on:click={() => focusedCellId.set(cellId)}
-  on:contextmenu={e => menu.actions.open(cellId, e)}
-  width={column.width}
->
-  <svelte:component
-    this={getCellRenderer(column)}
-    bind:api
-    value={row[column.name]}
-    schema={column.schema}
-    onChange={cellAPI.setValue}
-    {focused}
-    {readonly}
-    {invertY}
-    {invertX}
-  />
-</GridCell>
diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
deleted file mode 100644
index 0112bcda15..0000000000
--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-  import dayjs from "dayjs"
-  import { CoreDatePicker, Icon } from "@budibase/bbui"
-
-  export let value
-  export let schema
-  export let onChange
-  export let focused = false
-  export let readonly = false
-
-  // adding the 0- will turn a string like 00:00:00 into a valid ISO
-  // date, but will make actual ISO dates invalid
-  $: time = new Date(`0-${value}`)
-  $: timeOnly = !isNaN(time) || schema?.timeOnly
-  $: dateOnly = schema?.dateOnly
-  $: format = timeOnly
-    ? "HH:mm:ss"
-    : dateOnly
-    ? "MMM D YYYY"
-    : "MMM D YYYY, HH:mm"
-  $: editable = focused && !readonly
-</script>
-
-<div class="container">
-  <div class="value">
-    {#if value}
-      {dayjs(timeOnly ? time : value).format(format)}
-    {/if}
-  </div>
-  {#if editable}
-    <Icon name="Calendar" />
-  {/if}
-</div>
-
-{#if editable}
-  <div class="picker">
-    <CoreDatePicker
-      {value}
-      on:change={e => onChange(e.detail)}
-      appendTo={document.documentElement}
-      enableTime={!dateOnly}
-      {timeOnly}
-      time24hr
-      ignoreTimezones={schema.ignoreTimezones}
-    />
-  </div>
-{/if}
-
-<style>
-  .container {
-    padding: var(--cell-padding);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 1 auto;
-    gap: var(--cell-spacing);
-  }
-  .value {
-    flex: 1 1 auto;
-    width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 20px;
-  }
-  .picker {
-    position: absolute;
-    opacity: 0;
-  }
-  .picker :global(.flatpickr) {
-    min-width: 0;
-  }
-  .picker :global(.spectrum-Textfield-input) {
-    width: 100%;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/FormulaCell.svelte b/packages/frontend-core/src/components/grid/cells/FormulaCell.svelte
deleted file mode 100644
index b4db795e44..0000000000
--- a/packages/frontend-core/src/components/grid/cells/FormulaCell.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  import TextCell from "./TextCell.svelte"
-</script>
-
-<TextCell {...$$props} readonly />
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
deleted file mode 100644
index 52dbed641c..0000000000
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ /dev/null
@@ -1,159 +0,0 @@
-<script>
-  export let focused = false
-  export let selected = false
-  export let highlighted = false
-  export let width = ""
-  export let selectedUser = null
-  export let error = null
-  export let rowIdx
-  export let defaultHeight = false
-  export let center = false
-
-  $: style = getStyle(width, selectedUser)
-
-  const getStyle = (width, selectedUser) => {
-    let style = `flex: 0 0 ${width}px;`
-    if (selectedUser) {
-      style += `--cell-color:${selectedUser.color};`
-    }
-    return style
-  }
-</script>
-
-<div
-  class="cell"
-  class:selected
-  class:highlighted
-  class:focused
-  class:error
-  class:center
-  class:default-height={defaultHeight}
-  class:selected-other={selectedUser != null}
-  on:focus
-  on:mousedown
-  on:mouseup
-  on:click
-  on:contextmenu
-  {style}
-  data-row={rowIdx}
->
-  {#if error}
-    <div class="label">
-      {error}
-    </div>
-  {/if}
-  <slot />
-  {#if selectedUser && !focused}
-    <div class="label">
-      {selectedUser.label}
-    </div>
-  {/if}
-</div>
-
-<style>
-  /* Cells */
-  .cell {
-    height: var(--row-height);
-    border-bottom: var(--cell-border);
-    border-right: var(--cell-border);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-    color: var(--spectrum-global-color-gray-800);
-    font-size: var(--cell-font-size);
-    gap: var(--cell-spacing);
-    background: var(--cell-background);
-    position: relative;
-    width: 0;
-    --cell-color: transparent;
-  }
-  .cell.default-height {
-    height: var(--default-row-height);
-  }
-  .cell.center {
-    align-items: center;
-  }
-
-  /* Cell border */
-  .cell.focused:after,
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
-    content: " ";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    border: 2px solid var(--cell-color);
-    pointer-events: none;
-    border-radius: 2px;
-    box-sizing: border-box;
-  }
-
-  /* Cell border for cells with labels */
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
-    border-radius: 0 2px 2px 2px;
-  }
-  .cell[data-row="0"].error:after,
-  .cell[data-row="0"].selected-other:not(.focused):after {
-    border-radius: 2px 2px 2px 0;
-  }
-
-  /* Cell z-index */
-  .cell.error,
-  .cell.selected-other:not(.focused) {
-    z-index: 1;
-  }
-  .cell.focused {
-    z-index: 2;
-  }
-  .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
-  }
-  .cell.error {
-    --cell-color: var(--spectrum-global-color-red-500);
-  }
-  .cell:not(.focused) {
-    user-select: none;
-  }
-  .cell:hover {
-    cursor: default;
-  }
-  .cell.highlighted:not(.focused) {
-    --cell-background: var(--cell-background-hover);
-  }
-  .cell.selected:not(.focused) {
-    --cell-background: var(--spectrum-global-color-blue-100);
-  }
-
-  /* Label for additional text */
-  .label {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    padding: 1px 4px 3px 4px;
-    margin: 0 0 -2px 0;
-    background: var(--user-color);
-    border-radius: 2px;
-    display: block;
-    color: white;
-    font-size: 12px;
-    font-weight: 600;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    user-select: none;
-  }
-  .cell[data-row="0"] .label {
-    bottom: auto;
-    top: 100%;
-    border-radius: 0 2px 2px 2px;
-    padding: 2px 4px 2px 4px;
-    margin: -2px 0 0 0;
-  }
-  .error .label {
-    background: var(--spectrum-global-color-red-500);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
deleted file mode 100644
index 890f314e2e..0000000000
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ /dev/null
@@ -1,237 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import GridCell from "./GridCell.svelte"
-  import { Icon, Popover, Menu, MenuItem } from "@budibase/bbui"
-  import { getColumnIcon } from "../lib/utils"
-
-  export let column
-  export let idx
-  export let orderable = true
-
-  const {
-    reorder,
-    isReordering,
-    isResizing,
-    rand,
-    sort,
-    renderedColumns,
-    dispatch,
-    config,
-    ui,
-    columns,
-  } = getContext("grid")
-  const bannedDisplayColumnTypes = [
-    "link",
-    "array",
-    "attachment",
-    "boolean",
-    "formula",
-    "json",
-  ]
-
-  let anchor
-  let open = false
-  let timeout
-
-  $: sortedBy = column.name === $sort.column
-  $: canMoveLeft = orderable && idx > 0
-  $: canMoveRight = orderable && idx < $renderedColumns.length - 1
-
-  const editColumn = () => {
-    dispatch("edit-column", column.schema)
-    open = false
-  }
-
-  const onMouseDown = e => {
-    if (e.button === 0 && orderable) {
-      timeout = setTimeout(() => {
-        reorder.actions.startReordering(column.name, e)
-      }, 200)
-    }
-  }
-
-  const onMouseUp = e => {
-    if (e.button === 0 && orderable) {
-      clearTimeout(timeout)
-    }
-  }
-
-  const onContextMenu = e => {
-    e.preventDefault()
-    ui.actions.blur()
-    open = !open
-  }
-
-  const sortAscending = () => {
-    sort.set({
-      column: column.name,
-      order: "ascending",
-    })
-    open = false
-  }
-
-  const sortDescending = () => {
-    sort.set({
-      column: column.name,
-      order: "descending",
-    })
-    open = false
-  }
-
-  const moveLeft = () => {
-    reorder.actions.moveColumnLeft(column.name)
-    open = false
-  }
-
-  const moveRight = () => {
-    reorder.actions.moveColumnRight(column.name)
-    open = false
-  }
-
-  const makeDisplayColumn = () => {
-    columns.actions.changePrimaryDisplay(column.name)
-    open = false
-  }
-</script>
-
-<div
-  class="header-cell"
-  class:open
-  style="flex: 0 0 {column.width}px;"
-  bind:this={anchor}
-  class:disabled={$isReordering || $isResizing}
-  class:sorted={sortedBy}
->
-  <GridCell
-    on:mousedown={onMouseDown}
-    on:mouseup={onMouseUp}
-    on:contextmenu={onContextMenu}
-    width={column.width}
-    left={column.left}
-    defaultHeight
-    center
-  >
-    <Icon
-      size="S"
-      name={getColumnIcon(column)}
-      color={`var(--spectrum-global-color-gray-600)`}
-    />
-    <div class="name">
-      {column.label}
-    </div>
-    {#if sortedBy}
-      <div class="sort-indicator">
-        <Icon
-          size="S"
-          name={$sort.order === "descending" ? "SortOrderDown" : "SortOrderUp"}
-          color="var(--spectrum-global-color-gray-600)"
-        />
-      </div>
-    {/if}
-    <div
-      class="more"
-      on:mousedown|stopPropagation
-      on:click={() => (open = true)}
-    >
-      <Icon
-        size="S"
-        name="MoreVertical"
-        color="var(--spectrum-global-color-gray-600)"
-      />
-    </div>
-  </GridCell>
-</div>
-
-<Popover
-  bind:open
-  {anchor}
-  align="right"
-  offset={0}
-  popoverTarget={document.getElementById(`grid-${rand}`)}
-  animate={false}
->
-  <Menu>
-    <MenuItem
-      icon="Edit"
-      on:click={editColumn}
-      disabled={!$config.allowEditColumns || column.schema.disabled}
-    >
-      Edit column
-    </MenuItem>
-    <MenuItem
-      icon="Label"
-      on:click={makeDisplayColumn}
-      disabled={idx === "sticky" ||
-        !$config.allowEditColumns ||
-        bannedDisplayColumnTypes.includes(column.schema.type)}
-    >
-      Use as display column
-    </MenuItem>
-    <MenuItem
-      icon="SortOrderUp"
-      on:click={sortAscending}
-      disabled={column.name === $sort.column && $sort.order === "ascending"}
-    >
-      Sort A-Z
-    </MenuItem>
-    <MenuItem
-      icon="SortOrderDown"
-      on:click={sortDescending}
-      disabled={column.name === $sort.column && $sort.order === "descending"}
-    >
-      Sort Z-A
-    </MenuItem>
-    <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-      Move left
-    </MenuItem>
-    <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
-      Move right
-    </MenuItem>
-  </Menu>
-</Popover>
-
-<style>
-  .header-cell {
-    display: flex;
-  }
-  .header-cell.disabled {
-    pointer-events: none;
-  }
-  .header-cell :global(.cell) {
-    padding: 0 var(--cell-padding);
-    gap: calc(2 * var(--cell-spacing));
-    background: var(--spectrum-global-color-gray-100);
-  }
-  .header-cell.sorted :global(.cell) {
-    background: var(--spectrum-global-color-gray-200);
-  }
-
-  .name {
-    flex: 1 1 auto;
-    width: 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .more {
-    display: none;
-    padding: 4px;
-    margin: 0 -4px;
-  }
-  .header-cell.open .more,
-  .header-cell:hover .more {
-    display: block;
-  }
-  .more:hover {
-    cursor: pointer;
-  }
-  .more:hover :global(.spectrum-Icon) {
-    color: var(--spectrum-global-color-gray-800) !important;
-  }
-
-  .header-cell.open .sort-indicator,
-  .header-cell:hover .sort-indicator {
-    display: none;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/JSONCell.svelte b/packages/frontend-core/src/components/grid/cells/JSONCell.svelte
deleted file mode 100644
index 30803fd862..0000000000
--- a/packages/frontend-core/src/components/grid/cells/JSONCell.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  import LongFormCell from "./LongFormCell.svelte"
-
-  export let onChange
-  export let value
-  export let api
-
-  $: stringified = getStringifiedValue(value)
-
-  const getStringifiedValue = value => {
-    if (!value) {
-      return value
-    }
-    try {
-      return JSON.stringify(value, null, 2)
-    } catch (error) {
-      return null
-    }
-  }
-
-  const parse = value => {
-    const trimmed = value?.trim()
-    if (!trimmed) {
-      onChange(null)
-      return
-    }
-    try {
-      const parsed = JSON.parse(trimmed)
-      onChange(parsed)
-    } catch (error) {
-      // Swallow
-    }
-  }
-</script>
-
-<LongFormCell {...$$props} bind:api value={stringified} onChange={parse} />
diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
deleted file mode 100644
index f41e206d1d..0000000000
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script>
-  import { onMount, tick } from "svelte"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let readonly = false
-  export let api
-  export let invertX = false
-  export let invertY = false
-
-  let textarea
-  let isOpen = false
-
-  $: editable = focused && !readonly
-  $: {
-    if (!focused) {
-      isOpen = false
-    }
-  }
-
-  const handleChange = e => {
-    onChange(e.target.value)
-  }
-
-  const onKeyDown = () => {
-    return isOpen
-  }
-
-  const open = async () => {
-    isOpen = true
-    await tick()
-    textarea.focus()
-    textarea.setSelectionRange(0, 0)
-  }
-
-  const close = () => {
-    textarea?.blur()
-    isOpen = false
-  }
-
-  onMount(() => {
-    api = {
-      focus: () => open(),
-      blur: () => close(),
-      onKeyDown,
-    }
-  })
-</script>
-
-{#if isOpen}
-  <textarea
-    class:invertX
-    class:invertY
-    bind:this={textarea}
-    value={value || ""}
-    on:change={handleChange}
-    on:wheel|stopPropagation
-    spellcheck="false"
-  />
-{:else}
-  <div class="long-form-cell" on:click={editable ? open : null} class:editable>
-    <div class="value">
-      {value || ""}
-    </div>
-  </div>
-{/if}
-
-<style>
-  .long-form-cell {
-    flex: 1 1 auto;
-    padding: var(--cell-padding);
-    align-self: stretch;
-    display: flex;
-    align-items: flex-start;
-    overflow: hidden;
-  }
-  .long-form-cell.editable:hover {
-    cursor: text;
-  }
-  .value {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--content-lines);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: 20px;
-  }
-  textarea {
-    padding: var(--cell-padding);
-    margin: 0;
-    border: 2px solid var(--cell-color);
-    background: var(--cell-background);
-    font-size: var(--cell-font-size);
-    font-family: var(--font-sans);
-    color: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% + var(--max-cell-render-width-overflow));
-    height: var(--max-cell-render-height);
-    z-index: 1;
-    border-radius: 2px;
-    resize: none;
-    line-height: 20px;
-  }
-  textarea.invertX {
-    left: auto;
-    right: 0;
-  }
-  textarea.invertY {
-    transform: translateY(-100%);
-    top: calc(100% + 1px);
-  }
-  textarea:focus {
-    outline: none;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/MultiSelectCell.svelte b/packages/frontend-core/src/components/grid/cells/MultiSelectCell.svelte
deleted file mode 100644
index 403aeaf8d8..0000000000
--- a/packages/frontend-core/src/components/grid/cells/MultiSelectCell.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import OptionsCell from "./OptionsCell.svelte"
-
-  export let api
-</script>
-
-<OptionsCell bind:api {...$$props} multi />
diff --git a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
deleted file mode 100644
index 00c101026e..0000000000
--- a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import TextCell from "./TextCell.svelte"
-
-  export let api
-</script>
-
-<TextCell {...$$props} bind:api type="number" />
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
deleted file mode 100644
index 37c37fcd70..0000000000
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ /dev/null
@@ -1,239 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  import { getColor } from "../lib/utils"
-  import { onMount } from "svelte"
-
-  export let value
-  export let schema
-  export let onChange
-  export let focused = false
-  export let multi = false
-  export let readonly = false
-  export let api
-  export let invertX = false
-  export let invertY = false
-
-  let isOpen = false
-  let focusedOptionIdx = null
-
-  $: options = schema?.constraints?.inclusion || []
-  $: editable = focused && !readonly
-  $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
-  $: {
-    // Close when deselected
-    if (!focused) {
-      close()
-    }
-  }
-
-  const open = () => {
-    isOpen = true
-    focusedOptionIdx = 0
-  }
-
-  const close = () => {
-    isOpen = false
-  }
-
-  const getOptionColor = value => {
-    const index = value ? options.indexOf(value) : null
-    return getColor(index)
-  }
-
-  const toggleOption = option => {
-    if (!multi) {
-      onChange(option === value ? null : option)
-      close()
-    } else {
-      const sanitizedValues = values.filter(x => options.includes(x))
-      if (sanitizedValues.includes(option)) {
-        onChange(sanitizedValues.filter(x => x !== option))
-      } else {
-        onChange([...sanitizedValues, option])
-      }
-    }
-  }
-
-  const onKeyDown = e => {
-    if (!isOpen) {
-      return false
-    }
-    e.preventDefault()
-    if (e.key === "ArrowDown") {
-      focusedOptionIdx = Math.min(focusedOptionIdx + 1, options.length - 1)
-    } else if (e.key === "ArrowUp") {
-      focusedOptionIdx = Math.max(focusedOptionIdx - 1, 0)
-    } else if (e.key === "Enter") {
-      toggleOption(options[focusedOptionIdx])
-    }
-    return true
-  }
-
-  onMount(() => {
-    api = {
-      focus: open,
-      blur: close,
-      onKeyDown,
-    }
-  })
-</script>
-
-<div
-  class="container"
-  class:multi
-  class:editable
-  class:open
-  on:click|self={editable ? open : null}
->
-  <div class="values" on:click={editable ? open : null}>
-    {#each values as val}
-      {@const color = getOptionColor(val)}
-      {#if color}
-        <div class="badge text" style="--color: {color}">
-          <span>
-            {val}
-          </span>
-        </div>
-      {:else}
-        <div class="text">
-          {val || ""}
-        </div>
-      {/if}
-    {/each}
-  </div>
-  {#if editable}
-    <div class="arrow" on:click={open}>
-      <Icon name="ChevronDown" />
-    </div>
-  {/if}
-  {#if isOpen}
-    <div
-      class="options"
-      class:invertX
-      class:invertY
-      on:wheel={e => e.stopPropagation()}
-    >
-      {#each options as option, idx}
-        {@const color = getOptionColor(option)}
-        <div
-          class="option"
-          on:click={() => toggleOption(option)}
-          class:focused={focusedOptionIdx === idx}
-          on:mouseenter={() => (focusedOptionIdx = idx)}
-        >
-          <div class="badge text" style="--color: {color}">
-            {option}
-          </div>
-          {#if values.includes(option)}
-            <Icon
-              name="Checkmark"
-              color="var(--spectrum-global-color-blue-400)"
-            />
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    align-self: stretch;
-    flex: 1 1 auto;
-    overflow: hidden;
-  }
-  .container.editable:hover {
-    cursor: pointer;
-  }
-  .values {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    grid-column-gap: var(--cell-spacing);
-    grid-row-gap: var(--cell-padding);
-    overflow: hidden;
-    padding: var(--cell-padding);
-    flex-wrap: wrap;
-  }
-  .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .multi .text {
-    flex: 0 0 auto;
-  }
-  .badge {
-    padding: 0 var(--cell-padding);
-    background: var(--color);
-    border-radius: var(--cell-padding);
-    user-select: none;
-    display: flex;
-    align-items: center;
-    gap: var(--cell-spacing);
-    height: 20px;
-    max-width: 100%;
-  }
-  .badge span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .arrow {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    bottom: 2px;
-    padding: 0 6px 0 16px;
-    display: grid;
-    place-items: center;
-    background: linear-gradient(
-      to right,
-      transparent 0%,
-      var(--cell-background) 40%
-    );
-  }
-  .options {
-    min-width: calc(100% + 2px);
-    position: absolute;
-    top: 100%;
-    left: -1px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    max-height: var(--max-cell-render-height);
-    overflow-y: auto;
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-  }
-  .options.invertX {
-    left: auto;
-    right: 0;
-  }
-  .options.invertY {
-    transform: translateY(-100%);
-    top: 0;
-  }
-  .option {
-    flex: 0 0 var(--default-row-height);
-    padding: 0 var(--cell-padding);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--cell-spacing);
-    background-color: var(--background);
-  }
-  .option:hover,
-  .option.focused {
-    background-color: var(--spectrum-global-color-gray-200);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
deleted file mode 100644
index 08dabe0fec..0000000000
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ /dev/null
@@ -1,503 +0,0 @@
-<script context="module">
-  // We can create a module level cache for all relationship cells to avoid
-  // having to fetch the table definition one time for each cell
-  let primaryDisplayCache = {}
-
-  const getPrimaryDisplayForTableId = async (API, tableId) => {
-    if (primaryDisplayCache[tableId]) {
-      return primaryDisplayCache[tableId]
-    }
-    const definition = await API.fetchTableDefinition(tableId)
-    const primaryDisplay =
-      definition?.primaryDisplay || definition?.schema?.[0]?.name
-    primaryDisplayCache[tableId] = primaryDisplay
-    return primaryDisplay
-  }
-</script>
-
-<script>
-  import { getColor } from "../lib/utils"
-  import { onMount, getContext } from "svelte"
-  import { Icon, Input, ProgressCircle } from "@budibase/bbui"
-  import { debounce } from "../../../utils/utils"
-
-  export let value
-  export let api
-  export let readonly
-  export let focused
-  export let schema
-  export let onChange
-  export let invertX = false
-  export let invertY = false
-
-  const { API, dispatch } = getContext("grid")
-  const color = getColor(0)
-
-  let isOpen = false
-  let searchResults
-  let searchString
-  let lastSearchString
-  let primaryDisplay
-  let candidateIndex
-  let lastSearchId
-  let searching = false
-
-  $: oneRowOnly = schema?.relationshipType === "one-to-many"
-  $: editable = focused && !readonly
-  $: lookupMap = buildLookupMap(value, isOpen)
-  $: debouncedSearch(searchString)
-  $: {
-    if (!focused) {
-      close()
-    }
-  }
-
-  // Builds a lookup map to quickly check which rows are selected
-  const buildLookupMap = (value, isOpen) => {
-    let map = {}
-    if (!isOpen || !value?.length) {
-      return map
-    }
-    for (let i = 0; i < value.length; i++) {
-      map[value[i]._id] = true
-    }
-    return map
-  }
-
-  // Checks if a certain row is currently selected
-  const isRowSelected = row => {
-    if (!row?._id) {
-      return false
-    }
-    return lookupMap?.[row._id] === true
-  }
-
-  // Search for rows based on the search string
-  const search = async (searchString, force = false) => {
-    // Avoid update state at all if we've already handled the update and this is
-    // a wasted search due to svelte reactivity
-    if (!force && !searchString && !lastSearchString) {
-      return
-    }
-
-    // Reset state if this search is invalid
-    if (!schema?.tableId || !isOpen) {
-      lastSearchString = null
-      candidateIndex = null
-      searchResults = []
-      return
-    }
-
-    // Search for results, using IDs to track invocations and ensure we're
-    // handling the latest update
-    lastSearchId = Math.random()
-    searching = true
-    const thisSearchId = lastSearchId
-    const results = await API.searchTable({
-      paginate: false,
-      tableId: schema.tableId,
-      limit: 20,
-      query: {
-        string: {
-          [`1:${primaryDisplay}`]: searchString || "",
-        },
-      },
-    })
-    searching = false
-
-    // In case searching takes longer than our debounced update, abandon these
-    // results
-    if (thisSearchId !== lastSearchId) {
-      return
-    }
-
-    // Sort and process results
-    searchResults = sortRows(
-      results.rows?.map(row => ({
-        ...row,
-        primaryDisplay: row[primaryDisplay],
-      }))
-    )
-    candidateIndex = searchResults?.length ? 0 : null
-    lastSearchString = searchString
-  }
-
-  // Debounced version of searching
-  const debouncedSearch = debounce(search, 250)
-
-  // Alphabetically sorts rows by their primary display column
-  const sortRows = rows => {
-    if (!rows?.length) {
-      return []
-    }
-    return rows.slice().sort((a, b) => {
-      return a.primaryDisplay < b.primaryDisplay ? -1 : 1
-    })
-  }
-
-  const open = async () => {
-    isOpen = true
-
-    // Find the primary display for the related table
-    if (!primaryDisplay) {
-      searching = true
-      primaryDisplay = await getPrimaryDisplayForTableId(API, schema.tableId)
-    }
-
-    // Show initial list of results
-    await search(null, true)
-  }
-
-  const close = () => {
-    isOpen = false
-    searchResults = []
-    searchString = null
-    lastSearchString = null
-    candidateIndex = null
-  }
-
-  const onKeyDown = e => {
-    if (!isOpen) {
-      return false
-    }
-    if (e.key === "ArrowDown") {
-      // Select next result on down arrow
-      e.preventDefault()
-      if (candidateIndex == null) {
-        candidateIndex = 0
-      } else {
-        candidateIndex = Math.min(searchResults.length - 1, candidateIndex + 1)
-      }
-    } else if (e.key === "ArrowUp") {
-      // Select previous result on up array
-      e.preventDefault()
-      if (candidateIndex === 0) {
-        candidateIndex = null
-      } else if (candidateIndex != null) {
-        candidateIndex = Math.max(0, candidateIndex - 1)
-      }
-    } else if (e.key === "Enter") {
-      // Toggle the highlighted result on enter press
-      if (candidateIndex != null && searchResults[candidateIndex] != null) {
-        toggleRow(searchResults[candidateIndex])
-      }
-    }
-    return true
-  }
-
-  // Toggles whether a row is included in the relationship or not
-  const toggleRow = async row => {
-    if (value?.some(x => x._id === row._id)) {
-      // If the row is already included, remove it and update the candidate
-      // row to be the the same position if possible
-      if (oneRowOnly) {
-        await onChange([])
-      } else {
-        const newValue = value.filter(x => x._id !== row._id)
-        if (!newValue.length) {
-          candidateIndex = null
-        } else {
-          candidateIndex = Math.min(candidateIndex, newValue.length - 1)
-        }
-        await onChange(newValue)
-      }
-    } else {
-      // If we don't have this row, include it
-      if (oneRowOnly) {
-        await onChange([row])
-      } else {
-        await onChange(sortRows([...(value || []), row]))
-      }
-      candidateIndex = null
-    }
-    close()
-  }
-
-  const showRelationship = async id => {
-    const relatedRow = await API.fetchRow({
-      tableId: schema.tableId,
-      rowId: id,
-    })
-    dispatch("edit-row", relatedRow)
-  }
-
-  const readable = value => {
-    if (value == null) {
-      return ""
-    }
-    if (value instanceof Object) {
-      return JSON.stringify(value)
-    }
-    return value
-  }
-
-  onMount(() => {
-    api = {
-      focus: open,
-      blur: close,
-      onKeyDown,
-    }
-  })
-</script>
-
-<div class="wrapper" class:editable class:focused style="--color:{color};">
-  <div class="container">
-    <div class="values" on:wheel={e => (focused ? e.stopPropagation() : null)}>
-      {#each value || [] as relationship, idx}
-        {#if relationship.primaryDisplay}
-          <div class="badge">
-            <span
-              on:click={editable
-                ? () => showRelationship(relationship._id)
-                : null}
-            >
-              {readable(relationship.primaryDisplay)}
-            </span>
-            {#if editable}
-              <Icon
-                name="Close"
-                size="XS"
-                hoverable
-                on:click={() => toggleRow(relationship)}
-              />
-            {/if}
-          </div>
-        {/if}
-      {/each}
-      {#if editable}
-        <div class="add" on:click={open}>
-          <Icon name="Add" size="S" />
-        </div>
-      {/if}
-    </div>
-    {#if value?.length}
-      <div class="count">
-        {value?.length || 0}
-      </div>
-    {/if}
-  </div>
-
-  {#if isOpen}
-    <div class="dropdown" class:invertX class:invertY on:wheel|stopPropagation>
-      <div class="search">
-        <Input
-          autofocus
-          quiet
-          type="text"
-          bind:value={searchString}
-          placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
-        />
-      </div>
-      {#if searching}
-        <div class="searching">
-          <ProgressCircle size="S" />
-        </div>
-      {:else if searchResults?.length}
-        <div class="results">
-          {#each searchResults as row, idx}
-            <div
-              class="result"
-              on:click={() => toggleRow(row)}
-              class:candidate={idx === candidateIndex}
-              on:mouseenter={() => (candidateIndex = idx)}
-            >
-              <div class="badge">
-                <span>
-                  {readable(row.primaryDisplay)}
-                </span>
-              </div>
-              {#if isRowSelected(row)}
-                <Icon
-                  size="S"
-                  name="Checkmark"
-                  color="var(--spectrum-global-color-blue-400)"
-                />
-              {/if}
-            </div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .wrapper {
-    flex: 1 1 auto;
-    align-self: flex-start;
-    min-height: var(--row-height);
-    max-height: var(--row-height);
-    overflow: hidden;
-    --max-relationship-height: 120px;
-  }
-  .wrapper.focused {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background: var(--cell-background);
-    z-index: 1;
-    max-height: none;
-    overflow: visible;
-  }
-
-  .container {
-    min-height: var(--row-height);
-    overflow: hidden;
-    display: flex;
-    align-items: flex-start;
-  }
-  .focused .container {
-    overflow-y: auto;
-    border-radius: 2px;
-    max-height: var(--max-relationship-height);
-  }
-  .focused .container:after {
-    content: " ";
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    border: 2px solid var(--cell-color);
-    pointer-events: none;
-    border-radius: 2px;
-    box-sizing: border-box;
-  }
-
-  .values {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    grid-column-gap: var(--cell-spacing);
-    grid-row-gap: var(--cell-padding);
-    overflow: hidden;
-    padding: var(--cell-padding);
-    flex-wrap: wrap;
-  }
-  .count {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    color: var(--spectrum-global-color-gray-500);
-    padding: var(--cell-padding) var(--cell-padding) var(--cell-padding) 20px;
-    background: linear-gradient(
-      to right,
-      transparent 0%,
-      var(--cell-background) 40%
-    );
-  }
-  .wrapper:hover:not(.focused) .count {
-    display: block;
-  }
-  .badge {
-    flex: 0 0 auto;
-    padding: 0 var(--cell-padding);
-    background: var(--color);
-    border-radius: var(--cell-padding);
-    user-select: none;
-    display: flex;
-    align-items: center;
-    gap: var(--cell-spacing);
-    height: 20px;
-    max-width: 100%;
-  }
-  .badge span {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .editable .values .badge span:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-
-  .add {
-    background: var(--spectrum-global-color-gray-200);
-    padding: 4px;
-    border-radius: 4px;
-  }
-  .add :global(.spectrum-Icon) {
-    width: 12px;
-    height: 12px;
-  }
-  .add:hover {
-    background: var(--spectrum-global-color-gray-300);
-    cursor: pointer;
-  }
-
-  .dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    max-height: calc(
-      var(--max-cell-render-height) + var(--row-height) -
-        var(--max-relationship-height)
-    );
-    background: var(--background);
-    border: var(--cell-border);
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    padding: 0 0 8px 0;
-  }
-  .dropdown.invertY {
-    transform: translateY(-100%);
-    top: -1px;
-  }
-  .dropdown.invertX {
-    left: auto;
-    right: 0;
-  }
-
-  .searching {
-    padding: var(--cell-padding);
-    display: flex;
-    justify-content: center;
-  }
-  .results {
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .result {
-    padding: 0 var(--cell-padding);
-    flex: 0 0 var(--default-row-height);
-    display: flex;
-    gap: var(--cell-spacing);
-    justify-content: space-between;
-    align-items: center;
-  }
-  .result.candidate {
-    background-color: var(--spectrum-global-color-gray-200);
-    cursor: pointer;
-  }
-  .result .badge {
-    max-width: calc(100% - 30px);
-  }
-
-  .search {
-    flex: 0 0 calc(var(--default-row-height) - 1px);
-    display: flex;
-    align-items: center;
-    margin: 4px var(--cell-padding);
-    width: calc(100% - 2 * var(--cell-padding));
-  }
-  .search :global(.spectrum-Textfield) {
-    min-width: 0;
-    width: 100%;
-  }
-  .search :global(.spectrum-Textfield-input) {
-    font-size: 13px;
-  }
-  .search :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
deleted file mode 100644
index 73fb83dfbf..0000000000
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-
-  export let value
-  export let focused = false
-  export let onChange
-  export let type = "text"
-  export let readonly = false
-  export let api
-
-  let input
-  let active = false
-
-  $: editable = focused && !readonly
-
-  const handleChange = e => {
-    onChange(e.target.value)
-  }
-
-  const onKeyDown = e => {
-    if (!active) {
-      return false
-    }
-    if (e.key === "Enter") {
-      input?.blur()
-      const event = new KeyboardEvent("keydown", { key: "ArrowDown" })
-      document.dispatchEvent(event)
-    }
-    return true
-  }
-
-  onMount(() => {
-    api = {
-      focus: () => input?.focus(),
-      blur: () => input?.blur(),
-      onKeyDown,
-    }
-  })
-</script>
-
-{#if editable}
-  <input
-    bind:this={input}
-    on:focus={() => (active = true)}
-    on:blur={() => (active = false)}
-    {type}
-    value={value || ""}
-    on:change={handleChange}
-    spellcheck="false"
-  />
-{:else}
-  <div class="text-cell" class:number={type === "number"}>
-    <div class="value">
-      {value || ""}
-    </div>
-  </div>
-{/if}
-
-<style>
-  .text-cell {
-    flex: 1 1 auto;
-    padding: var(--cell-padding);
-    align-self: stretch;
-    display: flex;
-    align-items: flex-start;
-    overflow: hidden;
-  }
-  .text-cell.number {
-    justify-content: flex-end;
-  }
-  .value {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--content-lines);
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-height: 20px;
-  }
-  .number .value {
-    -webkit-line-clamp: 1;
-  }
-  input {
-    flex: 1 1 auto;
-    border: none;
-    padding: var(--cell-padding);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background: none;
-    font-size: var(--cell-font-size);
-    font-family: var(--font-sans);
-    color: inherit;
-    line-height: 20px;
-  }
-  input:focus {
-    outline: none;
-  }
-  input[type="number"] {
-    text-align: right;
-  }
-
-  /* Hide arrows for number fields */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
deleted file mode 100644
index e04c1ee627..0000000000
--- a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { config, dispatch } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableColumnAddRight"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-column")}
-  disabled={!$config.allowAddColumns}
->
-  Create column
-</ActionButton>
diff --git a/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte b/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
deleted file mode 100644
index 6b8e259999..0000000000
--- a/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { ActionButton } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { dispatch, columns, stickyColumn, config, loaded } = getContext("grid")
-</script>
-
-<ActionButton
-  icon="TableRowAddBottom"
-  quiet
-  size="M"
-  on:click={() => dispatch("add-row")}
-  disabled={!loaded ||
-    !$config.allowAddRows ||
-    (!$columns.length && !$stickyColumn)}
->
-  Create row
-</ActionButton>
diff --git a/packages/frontend-core/src/components/grid/controls/BetaButton.svelte b/packages/frontend-core/src/components/grid/controls/BetaButton.svelte
deleted file mode 100644
index e5069388e7..0000000000
--- a/packages/frontend-core/src/components/grid/controls/BetaButton.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script>
-  import { Button } from "@budibase/bbui"
-</script>
-
-<div class="beta-background" />
-<div class="beta">
-  Enjoying the Grid?
-  <Button
-    size="M"
-    cta
-    on:click={() => window.open("https://t.maze.co/156382627", "_blank")}
-  >
-    Give Feedback
-  </Button>
-</div>
-
-<style>
-  .beta {
-    position: absolute;
-    bottom: 32px;
-    right: 32px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 16px;
-  }
-  .beta :global(.spectrum-Button) {
-    background: var(--spectrum-global-color-magenta-400);
-    border-color: var(--spectrum-global-color-magenta-400);
-  }
-  .beta-background {
-    z-index: 0;
-    pointer-events: none;
-    position: absolute;
-    bottom: -230px;
-    right: -105px;
-    width: 1400px;
-    height: 320px;
-    transform: rotate(-22deg);
-    background: linear-gradient(
-      to top,
-      var(--cell-background) 20%,
-      transparent
-    );
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte b/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
deleted file mode 100644
index 9380228f2c..0000000000
--- a/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-  import {
-    Modal,
-    ModalContent,
-    ActionButton,
-    notifications,
-  } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { selectedRows, rows, config } = getContext("grid")
-
-  let modal
-
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
-  $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => {
-      if (entry[1] === true) {
-        return $rows.find(x => x._id === entry[0])
-      } else {
-        return null
-      }
-    })
-    .filter(x => x != null)
-
-  // Deletion callback when confirmed
-  const performDeletion = async () => {
-    const count = rowsToDelete.length
-    await rows.actions.deleteRows(rowsToDelete)
-    notifications.success(`Deleted ${count} row${count === 1 ? "" : "s"}`)
-  }
-</script>
-
-{#if selectedRowCount}
-  <div class="delete-button" data-ignore-click-outside="true">
-    <ActionButton
-      icon="Delete"
-      size="S"
-      on:click={modal.show}
-      disabled={!$config.allowEditRows}
-    >
-      Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
-    </ActionButton>
-  </div>
-{/if}
-
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Delete rows"
-    confirmText="Continue"
-    cancelText="Cancel"
-    onConfirm={performDeletion}
-    size="M"
-  >
-    Are you sure you want to delete {selectedRowCount}
-    row{selectedRowCount === 1 ? "" : "s"}?
-  </ModalContent>
-</Modal>
-
-<style>
-  .delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
-    color: var(--spectrum-global-color-red-400);
-  }
-  .delete-button :global(.spectrum-ActionButton:not(:disabled)) {
-    border-color: var(--spectrum-global-color-red-400);
-  }
-  /*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
-  /*  color: var(--spectrum-global-color-gray-600);*/
-  /*}*/
-  /*.delete-button.disabled :global(.spectrum-ActionButton) {*/
-  /*  border-color: var(--spectrum-global-color-gray-400);*/
-  /*}*/
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
deleted file mode 100644
index 6c9d1be8ac..0000000000
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ /dev/null
@@ -1,91 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle } from "@budibase/bbui"
-
-  const { columns } = getContext("grid")
-
-  let open = false
-  let anchor
-
-  $: anyHidden = $columns.some(col => !col.visible)
-
-  const toggleVisibility = (column, visible) => {
-    columns.update(state => {
-      const index = state.findIndex(col => col.name === column.name)
-      state[index].visible = visible
-      return state.slice()
-    })
-    columns.actions.saveChanges()
-  }
-
-  const showAll = () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: true,
-      }))
-    })
-    columns.actions.saveChanges()
-  }
-
-  const hideAll = () => {
-    columns.update(state => {
-      return state.map(col => ({
-        ...col,
-        visible: false,
-      }))
-    })
-    columns.actions.saveChanges()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="VisibilityOff"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open || anyHidden}
-    disabled={!$columns.length}
-  >
-    Hide columns
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <div class="columns">
-      {#each $columns as column}
-        <Toggle
-          size="S"
-          value={column.visible}
-          on:change={e => toggleVisibility(column, e.detail)}
-        />
-        <span>{column.name}</span>
-      {/each}
-    </div>
-    <div class="buttons">
-      <ActionButton on:click={showAll}>Show all</ActionButton>
-      <ActionButton on:click={hideAll}>Hide all</ActionButton>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-  .columns {
-    display: grid;
-    align-items: center;
-    grid-template-columns: auto 1fr;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
deleted file mode 100644
index 0fcbbed089..0000000000
--- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import {
-    LargeRowHeight,
-    MediumRowHeight,
-    SmallRowHeight,
-  } from "../lib/constants"
-
-  const { rowHeight, columns, table } = getContext("grid")
-  const sizeOptions = [
-    {
-      label: "Small",
-      size: SmallRowHeight,
-    },
-    {
-      label: "Medium",
-      size: MediumRowHeight,
-    },
-    {
-      label: "Large",
-      size: LargeRowHeight,
-    },
-  ]
-
-  let open = false
-  let anchor
-
-  const changeRowHeight = height => {
-    columns.actions.saveTable({
-      ...$table,
-      rowHeight: height,
-    })
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="LineHeight"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-  >
-    Row height
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        selected={$rowHeight === option.size}
-        on:click={() => changeRowHeight(option.size)}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
deleted file mode 100644
index 471e28a2ab..0000000000
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover, Select } from "@budibase/bbui"
-
-  const { sort, visibleColumns, stickyColumn } = getContext("grid")
-  const orderOptions = [
-    { label: "A-Z", value: "ascending" },
-    { label: "Z-A", value: "descending" },
-  ]
-
-  let open = false
-  let anchor
-
-  $: columnOptions = getColumnOptions($stickyColumn, $visibleColumns)
-  $: checkValidSortColumn($sort.column, $stickyColumn, $visibleColumns)
-
-  const getColumnOptions = (stickyColumn, columns) => {
-    let options = []
-    if (stickyColumn) {
-      options.push(stickyColumn.name)
-    }
-    return [...options, ...columns.map(col => col.name)]
-  }
-
-  const updateSortColumn = e => {
-    sort.update(state => ({
-      ...state,
-      column: e.detail,
-    }))
-  }
-
-  const updateSortOrder = e => {
-    sort.update(state => ({
-      ...state,
-      order: e.detail,
-    }))
-  }
-
-  // Ensure we never have a sort column selected that is not visible
-  const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => {
-    if (!sortColumn) {
-      return
-    }
-    if (
-      sortColumn !== stickyColumn?.name &&
-      !visibleColumns.some(col => col.name === sortColumn)
-    ) {
-      if (stickyColumn) {
-        sort.update(state => ({
-          ...state,
-          column: stickyColumn.name,
-        }))
-      } else {
-        sort.update(state => ({
-          ...state,
-          column: visibleColumns[0]?.name,
-        }))
-      }
-    }
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="SortOrderDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open || $sort.column}
-    disabled={!columnOptions.length}
-  >
-    Sort
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <Select
-      placeholder={null}
-      value={$sort.column}
-      options={columnOptions}
-      autoWidth
-      on:change={updateSortColumn}
-      label="Column"
-    />
-    <Select
-      placeholder={null}
-      value={$sort.order}
-      options={orderOptions}
-      autoWidth
-      on:change={updateSortOrder}
-      label="Order"
-    />
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 6px 12px 12px 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .content :global(.spectrum-Picker) {
-    width: 140px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/index.js b/packages/frontend-core/src/components/grid/index.js
deleted file mode 100644
index 25747ec142..0000000000
--- a/packages/frontend-core/src/components/grid/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Grid } from "./layout/Grid.svelte"
diff --git a/packages/frontend-core/src/components/grid/layout/Avatar.svelte b/packages/frontend-core/src/components/grid/layout/Avatar.svelte
deleted file mode 100644
index e3eec9f830..0000000000
--- a/packages/frontend-core/src/components/grid/layout/Avatar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  export let user
-</script>
-
-<div class="user" style="background:{user.color};" title={user.email}>
-  {user.email[0]}
-</div>
-
-<style>
-  div {
-    width: 24px;
-    height: 24px;
-    display: grid;
-    place-items: center;
-    color: white;
-    border-radius: 50%;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  div:hover {
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
deleted file mode 100644
index e6bc3e05e4..0000000000
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ /dev/null
@@ -1,250 +0,0 @@
-<script>
-  import { setContext } from "svelte"
-  import { writable } from "svelte/store"
-  import { fade } from "svelte/transition"
-  import { clickOutside, ProgressCircle } from "@budibase/bbui"
-  import { createEventManagers } from "../lib/events"
-  import { createAPIClient } from "../../../api"
-  import { attachStores } from "../stores"
-  import DeleteButton from "../controls/DeleteButton.svelte"
-  import BetaButton from "../controls/BetaButton.svelte"
-  import GridBody from "./GridBody.svelte"
-  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
-  import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
-  import HeaderRow from "./HeaderRow.svelte"
-  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
-  import MenuOverlay from "../overlays/MenuOverlay.svelte"
-  import StickyColumn from "./StickyColumn.svelte"
-  import UserAvatars from "./UserAvatars.svelte"
-  import KeyboardManager from "../overlays/KeyboardManager.svelte"
-  import SortButton from "../controls/SortButton.svelte"
-  import AddColumnButton from "../controls/AddColumnButton.svelte"
-  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
-  import AddRowButton from "../controls/AddRowButton.svelte"
-  import RowHeightButton from "../controls/RowHeightButton.svelte"
-  import {
-    MaxCellRenderHeight,
-    MaxCellRenderWidthOverflow,
-    GutterWidth,
-    DefaultRowHeight,
-  } from "../lib/constants"
-
-  export let API = null
-  export let tableId = null
-  export let schemaOverrides = null
-  export let allowAddRows = true
-  export let allowAddColumns = true
-  export let allowEditColumns = true
-  export let allowExpandRows = true
-  export let allowEditRows = true
-  export let allowDeleteRows = true
-
-  // Unique identifier for DOM nodes inside this instance
-  const rand = Math.random()
-
-  // State stores
-  const tableIdStore = writable(tableId)
-  const schemaOverridesStore = writable(schemaOverrides)
-  const config = writable({
-    allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-  })
-
-  // Build up context
-  let context = {
-    API: API || createAPIClient(),
-    rand,
-    config,
-    tableId: tableIdStore,
-    schemaOverrides: schemaOverridesStore,
-  }
-  context = { ...context, ...createEventManagers() }
-  context = attachStores(context)
-
-  // Reference some stores for local use
-  const {
-    isResizing,
-    isReordering,
-    ui,
-    loaded,
-    loading,
-    rowHeight,
-    contentLines,
-  } = context
-
-  // Keep stores up to date
-  $: tableIdStore.set(tableId)
-  $: schemaOverridesStore.set(schemaOverrides)
-  $: config.set({
-    allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
-    allowExpandRows,
-    allowEditRows,
-    allowDeleteRows,
-  })
-
-  // Set context for children to consume
-  setContext("grid", context)
-
-  // Expose ability to retrieve context externally for external control
-  export const getContext = () => context
-
-  // Initialise websocket for multi-user
-  // onMount(() => createWebsocket(context))
-</script>
-
-<div
-  class="grid"
-  id="grid-{rand}"
-  class:is-resizing={$isResizing}
-  class:is-reordering={$isReordering}
-  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
->
-  <div class="controls">
-    <div class="controls-left">
-      <AddRowButton />
-      <AddColumnButton />
-      <slot name="controls" />
-      <RowHeightButton />
-      <HideColumnsButton />
-      <SortButton />
-    </div>
-    <div class="controls-right">
-      <DeleteButton />
-      <UserAvatars />
-    </div>
-  </div>
-  {#if $loaded}
-    <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
-      <div class="grid-data-inner">
-        <StickyColumn />
-        <div class="grid-data-content">
-          <HeaderRow />
-          <GridBody />
-        </div>
-        <div class="overlays">
-          <ResizeOverlay />
-          <ReorderOverlay />
-          <BetaButton />
-          <ScrollOverlay />
-          <MenuOverlay />
-        </div>
-      </div>
-    </div>
-  {/if}
-  {#if $loading}
-    <div in:fade|local={{ duration: 130 }} class="grid-loading">
-      <ProgressCircle />
-    </div>
-  {/if}
-  <KeyboardManager />
-</div>
-
-<style>
-  .grid {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    overflow: hidden;
-    background: var(--cell-background);
-
-    /* Variables */
-    --cell-background: var(--spectrum-global-color-gray-50);
-    --cell-background-hover: var(--spectrum-global-color-gray-100);
-    --cell-padding: 8px;
-    --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
-    --cell-font-size: 14px;
-    --controls-height: 50px;
-  }
-  .grid,
-  .grid :global(*) {
-    box-sizing: border-box;
-  }
-  .grid.is-resizing :global(*) {
-    cursor: col-resize !important;
-  }
-  .grid.is-reordering :global(*) {
-    cursor: grabbing !important;
-  }
-
-  .grid-data-outer,
-  .grid-data-inner {
-    flex: 1 1 auto;
-    display: flex;
-    justify-items: flex-start;
-    align-items: stretch;
-    overflow: hidden;
-  }
-  .grid-data-outer {
-    height: 0;
-    flex-direction: column;
-  }
-  .grid-data-inner {
-    flex-direction: row;
-    position: relative;
-  }
-  .grid-data-content {
-    flex: 1 1 auto;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Controls */
-  .controls {
-    height: var(--controls-height);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
-    padding: var(--cell-padding);
-    gap: var(--cell-spacing);
-    background: var(--background);
-  }
-  .controls-left,
-  .controls-right {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--cell-spacing);
-  }
-  .controls-right {
-    gap: 12px;
-  }
-
-  /* Overlays */
-  .overlays {
-    z-index: 10;
-  }
-
-  /* Loading */
-  .grid-loading {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-    z-index: 10;
-  }
-  .grid-loading:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    opacity: 0.6;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
deleted file mode 100644
index 5c61fde3ef..0000000000
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script>
-  import { getContext, onMount } from "svelte"
-  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import GridRow from "./GridRow.svelte"
-
-  const { bounds, renderedRows, rowVerticalInversionIndex } = getContext("grid")
-
-  let body
-
-  onMount(() => {
-    // Observe and record the height of the body
-    const observer = new ResizeObserver(() => {
-      bounds.set(body.getBoundingClientRect())
-    })
-    observer.observe(body)
-    return () => {
-      observer.disconnect()
-    }
-  })
-</script>
-
-<div bind:this={body} class="grid-body">
-  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
-    {#each $renderedRows as row, idx}
-      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
-    {/each}
-  </GridScrollWrapper>
-</div>
-
-<style>
-  .grid-body {
-    display: block;
-    position: relative;
-    cursor: default;
-    overflow: hidden;
-    flex: 1 1 auto;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
deleted file mode 100644
index eb1fd8b96a..0000000000
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import DataCell from "../cells/DataCell.svelte"
-
-  export let row
-  export let idx
-  export let invertY = false
-
-  const {
-    focusedCellId,
-    reorder,
-    selectedRows,
-    renderedColumns,
-    hoveredRowId,
-    selectedCellMap,
-    focusedRow,
-    columnHorizontalInversionIndex,
-  } = getContext("grid")
-
-  $: rowSelected = !!$selectedRows[row._id]
-  $: rowHovered = $hoveredRowId === row._id
-  $: rowFocused = $focusedRow?._id === row._id
-  $: reorderSource = $reorder.sourceColumn
-</script>
-
-<div
-  class="row"
-  on:focus
-  on:mouseenter={() => ($hoveredRowId = row._id)}
-  on:mouseleave={() => ($hoveredRowId = null)}
->
-  {#each $renderedColumns as column, columnIdx (column.name)}
-    {@const cellId = `${row._id}-${column.name}`}
-    <DataCell
-      {cellId}
-      {column}
-      {row}
-      {invertY}
-      {rowFocused}
-      invertX={columnIdx >= $columnHorizontalInversionIndex}
-      highlighted={rowHovered || rowFocused || reorderSource === column.name}
-      selected={rowSelected}
-      rowIdx={idx}
-      focused={$focusedCellId === cellId}
-      selectedUser={$selectedCellMap[cellId]}
-      width={column.width}
-    />
-  {/each}
-</div>
-
-<style>
-  .row {
-    width: 0;
-    display: flex;
-    height: var(--row-height);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
deleted file mode 100644
index 0d241147a6..0000000000
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { domDebounce } from "../../../utils/utils"
-
-  const {
-    rowHeight,
-    scroll,
-    focusedCellId,
-    renderedRows,
-    maxScrollTop,
-    maxScrollLeft,
-    bounds,
-    hoveredRowId,
-    hiddenColumnsWidth,
-  } = getContext("grid")
-
-  export let scrollVertically = false
-  export let scrollHorizontally = false
-  export let wheelInteractive = false
-
-  $: style = generateStyle($scroll, $rowHeight, $hiddenColumnsWidth)
-
-  const generateStyle = (scroll, rowHeight, hiddenWidths) => {
-    const offsetX = scrollHorizontally ? -1 * scroll.left + hiddenWidths : 0
-    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
-    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
-  }
-
-  // Handles a wheel even and updates the scroll offsets
-  const handleWheel = e => {
-    e.preventDefault()
-    const modifier = e.ctrlKey || e.metaKey
-    let x = modifier ? e.deltaY : e.deltaX
-    let y = modifier ? e.deltaX : e.deltaY
-    debouncedHandleWheel(x, y, e.clientY)
-  }
-  const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
-    const { top, left } = $scroll
-
-    // Calculate new scroll top
-    let newScrollTop = top + deltaY
-    newScrollTop = Math.max(0, Math.min(newScrollTop, $maxScrollTop))
-
-    // Calculate new scroll left
-    let newScrollLeft = left + deltaX
-    newScrollLeft = Math.max(0, Math.min(newScrollLeft, $maxScrollLeft))
-
-    // Update state
-    scroll.set({
-      left: scrollHorizontally ? newScrollLeft : left,
-      top: scrollVertically ? newScrollTop : top,
-    })
-
-    // Hover row under cursor
-    const y = clientY - $bounds.top + (newScrollTop % $rowHeight)
-    const hoveredRow = $renderedRows[Math.floor(y / $rowHeight)]
-    hoveredRowId.set(hoveredRow?._id)
-  })
-</script>
-
-<div
-  class="outer"
-  on:wheel={wheelInteractive ? handleWheel : null}
-  on:click|self={() => ($focusedCellId = null)}
->
-  <div {style} class="inner">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .outer {
-    min-width: 100%;
-    min-height: 100%;
-    height: 100%;
-    width: 100%;
-    max-height: 100%;
-    max-width: 100%;
-    overflow: hidden;
-  }
-  .inner {
-    position: absolute;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
deleted file mode 100644
index caf8ac280b..0000000000
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import HeaderCell from "../cells/HeaderCell.svelte"
-
-  const { renderedColumns } = getContext("grid")
-</script>
-
-<div class="header">
-  <GridScrollWrapper scrollHorizontally>
-    <div class="row">
-      {#each $renderedColumns as column, idx}
-        <HeaderCell {column} {idx} />
-      {/each}
-    </div>
-  </GridScrollWrapper>
-</div>
-
-<style>
-  .header {
-    background: var(--background);
-    border-bottom: var(--cell-border);
-    position: relative;
-    height: var(--default-row-height);
-    z-index: 1;
-  }
-  .row {
-    display: flex;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
deleted file mode 100644
index 5b92bc30fc..0000000000
--- a/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
+++ /dev/null
@@ -1,247 +0,0 @@
-<script>
-  import GridCell from "../cells/GridCell.svelte"
-  import { getContext, onMount } from "svelte"
-  import { Icon, Button } from "@budibase/bbui"
-  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import DataCell from "../cells/DataCell.svelte"
-  import { fly } from "svelte/transition"
-  import { GutterWidth } from "../lib/constants"
-
-  const {
-    hoveredRowId,
-    focusedCellId,
-    stickyColumn,
-    scroll,
-    config,
-    dispatch,
-    visibleColumns,
-    rows,
-    showHScrollbar,
-    tableId,
-    subscribe,
-    scrollLeft,
-  } = getContext("grid")
-
-  let isAdding = false
-  let newRow = {}
-  let touched = false
-
-  $: firstColumn = $stickyColumn || $visibleColumns[0]
-  $: rowHovered = $hoveredRowId === "new"
-  $: rowFocused = $focusedCellId?.startsWith("new-")
-  $: width = GutterWidth + ($stickyColumn?.width || 0)
-  $: $tableId, (isAdding = false)
-
-  const addRow = async () => {
-    // Create row
-    const savedRow = await rows.actions.addRow(newRow, 0)
-    if (savedRow) {
-      // Select the first cell if possible
-      if (firstColumn) {
-        $focusedCellId = `${savedRow._id}-${firstColumn.name}`
-      }
-
-      // Reset state
-      isAdding = false
-      scroll.set({
-        left: 0,
-        top: 0,
-      })
-    }
-  }
-
-  const cancel = () => {
-    isAdding = false
-  }
-
-  const startAdding = () => {
-    newRow = {}
-    isAdding = true
-    if (firstColumn) {
-      $focusedCellId = `new-${firstColumn.name}`
-    }
-  }
-
-  const updateValue = (rowId, columnName, val) => {
-    touched = true
-    newRow[columnName] = val
-  }
-
-  const addViaModal = () => {
-    isAdding = false
-    dispatch("add-row")
-  }
-
-  onMount(() => subscribe("add-row-inline", startAdding))
-</script>
-
-<!-- Only show new row functionality if we have any columns -->
-{#if isAdding}
-  <div class="container" transition:fly={{ y: 20, duration: 130 }}>
-    <div class="content" class:above-scrollbar={$showHScrollbar}>
-      <div
-        class="new-row"
-        on:mouseenter={() => ($hoveredRowId = "new")}
-        on:mouseleave={() => ($hoveredRowId = null)}
-      >
-        <div
-          class="sticky-column"
-          style="flex: 0 0 {width}px"
-          class:scrolled={$scrollLeft > 0}
-        >
-          <GridCell width={GutterWidth} {rowHovered} {rowFocused}>
-            <div class="gutter">
-              <div class="number">1</div>
-              {#if $config.allowExpandRows}
-                <Icon
-                  name="Maximize"
-                  size="S"
-                  hoverable
-                  on:click={addViaModal}
-                />
-              {/if}
-            </div>
-          </GridCell>
-          {#if $stickyColumn}
-            {@const cellId = `new-${$stickyColumn.name}`}
-            <DataCell
-              {cellId}
-              column={$stickyColumn}
-              row={newRow}
-              {rowHovered}
-              focused={$focusedCellId === cellId}
-              {rowFocused}
-              width={$stickyColumn.width}
-              {updateValue}
-              rowIdx={0}
-            />
-          {/if}
-        </div>
-
-        <GridScrollWrapper scrollHorizontally wheelInteractive>
-          <div class="row">
-            {#each $visibleColumns as column}
-              {@const cellId = `new-${column.name}`}
-              {#key cellId}
-                <DataCell
-                  {cellId}
-                  {column}
-                  row={newRow}
-                  {rowHovered}
-                  focused={$focusedCellId === cellId}
-                  {rowFocused}
-                  width={column.width}
-                  {updateValue}
-                  rowIdx={0}
-                />
-              {/key}
-            {/each}
-          </div>
-        </GridScrollWrapper>
-      </div>
-    </div>
-    <div class="buttons">
-      <Button size="M" cta on:click={addRow}>Save</Button>
-      <Button size="M" secondary newStyles on:click={cancel}>Cancel</Button>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .container {
-    pointer-events: none;
-    position: absolute;
-    top: var(--row-height);
-    left: 0;
-    width: 100%;
-    padding-bottom: 800px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .container:before {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: var(--cell-background);
-    opacity: 0.8;
-    z-index: -1;
-  }
-  .content {
-    pointer-events: all;
-    background: var(--background);
-    border-bottom: var(--cell-border);
-  }
-
-  .new-row {
-    display: flex;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    transition: margin-bottom 130ms ease-out;
-  }
-  .new-row :global(.cell) {
-    --cell-background: var(--background) !important;
-    border-bottom: none;
-  }
-
-  .sticky-column {
-    display: flex;
-    z-index: 1;
-    position: relative;
-  }
-  /* Don't show borders between cells in the sticky column */
-  .sticky-column :global(.cell:not(:last-child)) {
-    border-right: none;
-  }
-
-  .row {
-    width: 0;
-    display: flex;
-  }
-
-  /* Add shadow when scrolled */
-  .sticky-column.scrolled {
-    /*box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);*/
-  }
-  .sticky-column.scrolled:after {
-    content: "";
-    width: 10px;
-    height: 100%;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
-    left: 100%;
-    top: 0;
-    position: absolute;
-  }
-
-  /* Styles for gutter */
-  .gutter {
-    flex: 1 1 auto;
-    display: grid;
-    align-items: center;
-    padding: var(--cell-padding);
-    grid-template-columns: 1fr auto;
-    gap: var(--cell-spacing);
-  }
-
-  /* Floating buttons */
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    margin: 24px 0 0 var(--gutter-width);
-    pointer-events: all;
-    align-self: flex-start;
-  }
-
-  .number {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    color: var(--spectrum-global-color-gray-500);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/RowCount.svelte b/packages/frontend-core/src/components/grid/layout/RowCount.svelte
deleted file mode 100644
index 6115b1f567..0000000000
--- a/packages/frontend-core/src/components/grid/layout/RowCount.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { rows } = getContext("grid")
-</script>
-
-<div>
-  {$rows.length} row{$rows.length === 1 ? "" : "s"}
-</div>
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
deleted file mode 100644
index cbf74a0d22..0000000000
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ /dev/null
@@ -1,245 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { Checkbox, Icon } from "@budibase/bbui"
-  import GridCell from "../cells/GridCell.svelte"
-  import DataCell from "../cells/DataCell.svelte"
-  import GridScrollWrapper from "./GridScrollWrapper.svelte"
-  import HeaderCell from "../cells/HeaderCell.svelte"
-  import { GutterWidth } from "../lib/constants"
-
-  const {
-    rows,
-    selectedRows,
-    stickyColumn,
-    renderedRows,
-    focusedCellId,
-    hoveredRowId,
-    config,
-    selectedCellMap,
-    focusedRow,
-    dispatch,
-    scrollLeft,
-  } = getContext("grid")
-
-  $: rowCount = $rows.length
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
-  $: width = GutterWidth + ($stickyColumn?.width || 0)
-
-  const selectAll = () => {
-    const allSelected = selectedRowCount === rowCount
-    if (allSelected) {
-      $selectedRows = {}
-    } else {
-      let allRows = {}
-      $rows.forEach(row => {
-        allRows[row._id] = true
-      })
-      $selectedRows = allRows
-    }
-  }
-
-  const selectRow = id => {
-    selectedRows.update(state => {
-      let newState = {
-        ...state,
-        [id]: !state[id],
-      }
-      if (!newState[id]) {
-        delete newState[id]
-      }
-      return newState
-    })
-  }
-</script>
-
-<div
-  class="sticky-column"
-  style="flex: 0 0 {width}px"
-  class:scrolled={$scrollLeft > 0}
->
-  <div class="header row">
-    <GridCell width={GutterWidth} defaultHeight center>
-      <div class="gutter">
-        <div class="checkbox visible">
-          {#if $config.allowDeleteRows}
-            <div on:click={selectAll}>
-              <Checkbox
-                value={rowCount && selectedRowCount === rowCount}
-                disabled={!$renderedRows.length}
-              />
-            </div>
-          {/if}
-        </div>
-        {#if $config.allowExpandRows}
-          <div class="expand">
-            <Icon name="Maximize" size="S" />
-          </div>
-        {/if}
-      </div>
-    </GridCell>
-
-    {#if $stickyColumn}
-      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
-    {/if}
-  </div>
-
-  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
-    <GridScrollWrapper scrollVertically wheelInteractive>
-      {#each $renderedRows as row, idx}
-        {@const rowSelected = !!$selectedRows[row._id]}
-        {@const rowHovered = $hoveredRowId === row._id}
-        {@const rowFocused = $focusedRow?._id === row._id}
-        {@const cellId = `${row._id}-${$stickyColumn?.name}`}
-        <div
-          class="row"
-          on:mouseenter={() => ($hoveredRowId = row._id)}
-          on:mouseleave={() => ($hoveredRowId = null)}
-        >
-          <GridCell
-            width={GutterWidth}
-            highlighted={rowFocused || rowHovered}
-            selected={rowSelected}
-          >
-            <div class="gutter">
-              <div
-                on:click={() => selectRow(row._id)}
-                class="checkbox"
-                class:visible={$config.allowDeleteRows &&
-                  (rowSelected || rowHovered || rowFocused)}
-              >
-                <Checkbox value={rowSelected} />
-              </div>
-              <div
-                class="number"
-                class:visible={!$config.allowDeleteRows ||
-                  !(rowSelected || rowHovered || rowFocused)}
-              >
-                {row.__idx + 1}
-              </div>
-              {#if $config.allowExpandRows}
-                <div class="expand" class:visible={rowFocused || rowHovered}>
-                  <Icon
-                    name="Maximize"
-                    hoverable
-                    size="S"
-                    on:click={() => {
-                      dispatch("edit-row", row)
-                    }}
-                  />
-                </div>
-              {/if}
-            </div>
-          </GridCell>
-          {#if $stickyColumn}
-            <DataCell
-              {row}
-              {cellId}
-              {rowFocused}
-              selected={rowSelected}
-              highlighted={rowHovered || rowFocused}
-              rowIdx={idx}
-              focused={$focusedCellId === cellId}
-              selectedUser={$selectedCellMap[cellId]}
-              width={$stickyColumn.width}
-              column={$stickyColumn}
-            />
-          {/if}
-        </div>
-      {/each}
-    </GridScrollWrapper>
-  </div>
-</div>
-
-<style>
-  .sticky-column {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: 2;
-  }
-
-  /* Add right border */
-  .sticky-column:before {
-    position: absolute;
-    content: "";
-    width: 0;
-    height: 100%;
-    left: calc(100% - 1px);
-    top: 0;
-    border-left: var(--cell-border);
-  }
-
-  /* Add shadow when scrolled */
-  .sticky-column.scrolled:after {
-    position: absolute;
-    content: "";
-    width: 8px;
-    height: 100%;
-    left: 100%;
-    top: 0;
-    opacity: 1;
-    background: linear-gradient(to right, var(--drop-shadow), transparent);
-    z-index: -1;
-  }
-
-  /* Don't show borders between cells in the sticky column */
-  .sticky-column :global(.cell:not(:last-child)) {
-    border-right: none;
-  }
-
-  .header {
-    z-index: 1;
-  }
-  .header :global(.cell) {
-    background: var(--spectrum-global-color-gray-100);
-  }
-  .row {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .content {
-    position: relative;
-    flex: 1 1 auto;
-  }
-
-  /* Styles for gutter */
-  .gutter {
-    flex: 1 1 auto;
-    display: grid;
-    align-items: center;
-    padding: var(--cell-padding);
-    grid-template-columns: 1fr auto;
-    gap: var(--cell-spacing);
-  }
-  .checkbox,
-  .number {
-    display: none;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-  .checkbox :global(.spectrum-Checkbox) {
-    min-height: 0;
-    height: 20px;
-  }
-  .checkbox :global(.spectrum-Checkbox-box) {
-    margin: 3px 0 0 0;
-  }
-  .number {
-    color: var(--spectrum-global-color-gray-500);
-  }
-  .checkbox.visible,
-  .number.visible {
-    display: flex;
-  }
-  .expand {
-    opacity: 0;
-    pointer-events: none;
-  }
-  .expand.visible {
-    opacity: 1;
-    pointer-events: all;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte b/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
deleted file mode 100644
index be33b6713d..0000000000
--- a/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import Avatar from "./Avatar.svelte"
-
-  const { users } = getContext("grid")
-</script>
-
-<div class="users">
-  {#each $users as user}
-    <Avatar {user} />
-  {/each}
-</div>
-
-<style>
-  .users {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
deleted file mode 100644
index e5427106a7..0000000000
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export const Padding = 276
-export const MaxCellRenderHeight = 252
-export const MaxCellRenderWidthOverflow = 200
-export const ScrollBarSize = 8
-export const GutterWidth = 72
-export const DefaultColumnWidth = 200
-export const MinColumnWidth = 100
-export const SmallRowHeight = 36
-export const MediumRowHeight = 64
-export const LargeRowHeight = 92
-export const DefaultRowHeight = SmallRowHeight
diff --git a/packages/frontend-core/src/components/grid/lib/events.js b/packages/frontend-core/src/components/grid/lib/events.js
deleted file mode 100644
index 1c486858b2..0000000000
--- a/packages/frontend-core/src/components/grid/lib/events.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createEventDispatcher } from "svelte"
-
-export const createEventManagers = () => {
-  const svelteDispatch = createEventDispatcher()
-  let subscribers = {}
-
-  // Dispatches an event, notifying subscribers and also emitting a normal
-  // svelte event
-  const dispatch = (event, payload) => {
-    svelteDispatch(event, payload)
-    const subs = subscribers[event] || []
-    for (let i = 0; i < subs.length; i++) {
-      subs[i](payload)
-    }
-  }
-
-  // Subscribes to events
-  const subscribe = (event, callback) => {
-    const subs = subscribers[event] || []
-    subscribers[event] = [...subs, callback]
-
-    // Return unsubscribe function
-    return () => {
-      subscribers[event] = subscribers[event].filter(cb => cb !== callback)
-    }
-  }
-
-  return { dispatch, subscribe }
-}
diff --git a/packages/frontend-core/src/components/grid/lib/renderers.js b/packages/frontend-core/src/components/grid/lib/renderers.js
deleted file mode 100644
index 104984ca4e..0000000000
--- a/packages/frontend-core/src/components/grid/lib/renderers.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import OptionsCell from "../cells/OptionsCell.svelte"
-import DateCell from "../cells/DateCell.svelte"
-import MultiSelectCell from "../cells/MultiSelectCell.svelte"
-import NumberCell from "../cells/NumberCell.svelte"
-import RelationshipCell from "../cells/RelationshipCell.svelte"
-import TextCell from "../cells/TextCell.svelte"
-import LongFormCell from "../cells/LongFormCell.svelte"
-import BooleanCell from "../cells/BooleanCell.svelte"
-import FormulaCell from "../cells/FormulaCell.svelte"
-import JSONCell from "../cells/JSONCell.svelte"
-import AttachmentCell from "../cells/AttachmentCell.svelte"
-
-const TypeComponentMap = {
-  text: TextCell,
-  options: OptionsCell,
-  datetime: DateCell,
-  barcodeqr: TextCell,
-  longform: LongFormCell,
-  array: MultiSelectCell,
-  number: NumberCell,
-  boolean: BooleanCell,
-  attachment: AttachmentCell,
-  link: RelationshipCell,
-  formula: FormulaCell,
-  json: JSONCell,
-}
-export const getCellRenderer = column => {
-  return TypeComponentMap[column?.schema?.type] || TextCell
-}
diff --git a/packages/frontend-core/src/components/grid/lib/utils.js b/packages/frontend-core/src/components/grid/lib/utils.js
deleted file mode 100644
index 5b1d01ee36..0000000000
--- a/packages/frontend-core/src/components/grid/lib/utils.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export const getColor = (idx, opacity = 0.3) => {
-  if (idx == null || idx === -1) {
-    return null
-  }
-  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
-}
-
-const TypeIconMap = {
-  text: "Text",
-  options: "Dropdown",
-  datetime: "Date",
-  barcodeqr: "Camera",
-  longform: "TextAlignLeft",
-  array: "Dropdown",
-  number: "123",
-  boolean: "Boolean",
-  attachment: "AppleFiles",
-  link: "Link",
-  formula: "Calculator",
-  json: "Brackets",
-}
-
-export const getColumnIcon = column => {
-  const type = column.schema.type
-  return TypeIconMap[type] || "Text"
-}
diff --git a/packages/frontend-core/src/components/grid/lib/websocket.js b/packages/frontend-core/src/components/grid/lib/websocket.js
deleted file mode 100644
index af2e247f98..0000000000
--- a/packages/frontend-core/src/components/grid/lib/websocket.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { get } from "svelte/store"
-import { io } from "socket.io-client"
-
-export const createWebsocket = context => {
-  const { rows, tableId, users, userId, focusedCellId } = context
-
-  // Determine connection info
-  const tls = location.protocol === "https:"
-  const proto = tls ? "wss:" : "ws:"
-  const host = location.hostname
-  const port = location.port || (tls ? 443 : 80)
-  const socket = io(`${proto}//${host}:${port}`, {
-    path: "/socket/grid",
-    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
-    reconnectionAttempts: 3,
-    // Delay reconnection attempt by 5 seconds
-    reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
-    // Timeout after 4 seconds so we never stack requests
-    timeout: 4000,
-  })
-
-  const connectToTable = tableId => {
-    if (!socket.connected) {
-      return
-    }
-    // Identify which table we are editing
-    socket.emit("select-table", tableId, response => {
-      // handle initial connection info
-      users.set(response.users)
-      userId.set(response.id)
-    })
-  }
-
-  // Event handlers
-  socket.on("connect", () => {
-    connectToTable(get(tableId))
-  })
-  socket.on("row-update", data => {
-    if (data.id) {
-      rows.actions.refreshRow(data.id)
-    }
-  })
-  socket.on("user-update", user => {
-    users.actions.updateUser(user)
-  })
-  socket.on("user-disconnect", user => {
-    users.actions.removeUser(user)
-  })
-  socket.on("connect_error", err => {
-    console.log("Failed to connect to grid websocket:", err.message)
-  })
-
-  // Change websocket connection when table changes
-  tableId.subscribe(connectToTable)
-
-  // Notify selected cell changes
-  focusedCellId.subscribe($focusedCellId => {
-    socket.emit("select-cell", $focusedCellId)
-  })
-
-  return () => socket?.disconnect()
-}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
deleted file mode 100644
index c3ca6103c7..0000000000
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ /dev/null
@@ -1,180 +0,0 @@
-<script>
-  import { getContext, onMount } from "svelte"
-  import { debounce } from "../../../utils/utils"
-
-  const {
-    enrichedRows,
-    focusedCellId,
-    visibleColumns,
-    focusedRow,
-    stickyColumn,
-    focusedCellAPI,
-    clipboard,
-  } = getContext("grid")
-
-  // Global key listener which intercepts all key events
-  const handleKeyDown = e => {
-    // If nothing selected avoid processing further key presses
-    if (!$focusedCellId) {
-      if (e.key === "Tab") {
-        e.preventDefault()
-        focusFirstCell()
-      }
-      return
-    }
-
-    // Always intercept certain key presses
-    const api = $focusedCellAPI
-    if (e.key === "Escape") {
-      api?.blur?.()
-    } else if (e.key === "Tab") {
-      api?.blur?.()
-      changeFocusedColumn(1)
-    }
-
-    // Pass the key event to the selected cell and let it decide whether to
-    // capture it or not
-    if (!api?.isReadonly()) {
-      const handled = api?.onKeyDown?.(e)
-      if (handled) {
-        return
-      }
-    }
-
-    // Avoid processing events sourced from modals
-    if (e.target?.closest?.(".spectrum-Modal")) {
-      return
-    }
-    e.preventDefault()
-
-    // Handle the key ourselves
-    if (e.metaKey || e.ctrlKey) {
-      switch (e.key) {
-        case "c":
-          clipboard.actions.copy()
-          break
-        case "v":
-          clipboard.actions.paste()
-          break
-      }
-    } else {
-      switch (e.key) {
-        case "ArrowLeft":
-          changeFocusedColumn(-1)
-          break
-        case "ArrowRight":
-          changeFocusedColumn(1)
-          break
-        case "ArrowUp":
-          changeFocusedRow(-1)
-          break
-        case "ArrowDown":
-          changeFocusedRow(1)
-          break
-        case "Delete":
-        case "Backspace":
-          deleteSelectedCell()
-          break
-        case "Enter":
-          focusCell()
-          break
-        default:
-          startEnteringValue(e.key, e.which)
-      }
-    }
-  }
-
-  // Focuses the first cell in the grid
-  const focusFirstCell = () => {
-    const firstRow = $enrichedRows[0]
-    if (!firstRow) {
-      return
-    }
-    const firstColumn = $stickyColumn || $visibleColumns[0]
-    if (!firstColumn) {
-      return
-    }
-    focusedCellId.set(`${firstRow._id}-${firstColumn.name}`)
-  }
-
-  // Changes the focused cell by moving it left or right to a different column
-  const changeFocusedColumn = delta => {
-    if (!$focusedCellId) {
-      return
-    }
-    const cols = $visibleColumns
-    const split = $focusedCellId.split("-")
-    const columnName = split[1]
-    let newColumnName
-    if (columnName === $stickyColumn?.name) {
-      const index = delta - 1
-      newColumnName = cols[index]?.name
-    } else {
-      const index = cols.findIndex(col => col.name === columnName) + delta
-      if (index === -1) {
-        newColumnName = $stickyColumn?.name
-      } else {
-        newColumnName = cols[index]?.name
-      }
-    }
-    if (newColumnName) {
-      $focusedCellId = `${split[0]}-${newColumnName}`
-    }
-  }
-
-  // Changes the focused cell by moving it up or down to a new row
-  const changeFocusedRow = delta => {
-    if (!$focusedRow) {
-      return
-    }
-    const newRow = $enrichedRows[$focusedRow.__idx + delta]
-    if (newRow) {
-      const split = $focusedCellId.split("-")
-      $focusedCellId = `${newRow._id}-${split[1]}`
-    }
-  }
-
-  // Debounce to avoid holding down delete and spamming requests
-  const deleteSelectedCell = debounce(() => {
-    if ($focusedCellAPI?.isReadonly()) {
-      return
-    }
-    $focusedCellAPI.setValue(null)
-  }, 100)
-
-  // Focuses the current cell for editing
-  const focusCell = () => {
-    if ($focusedCellAPI?.isReadonly()) {
-      return
-    }
-    $focusedCellAPI?.focus?.()
-  }
-
-  // Utils to identify a key code
-  const keyCodeIsNumber = keyCode => keyCode >= 48 && keyCode <= 57
-  const keyCodeIsLetter = keyCode => keyCode >= 65 && keyCode <= 90
-
-  // Focuses the cell and starts entering a new value
-  const startEnteringValue = (key, keyCode) => {
-    if ($focusedCellAPI) {
-      const type = $focusedCellAPI.getType()
-      if (type === "number" && keyCodeIsNumber(keyCode)) {
-        $focusedCellAPI.setValue(parseInt(key))
-        $focusedCellAPI.focus()
-      } else if (
-        ["string", "barcodeqr", "longform"].includes(type) &&
-        (keyCodeIsLetter(keyCode) || keyCodeIsNumber(keyCode))
-      ) {
-        $focusedCellAPI.setValue(key)
-        $focusedCellAPI.focus()
-      }
-    }
-  }
-
-  onMount(() => {
-    document.addEventListener("keydown", handleKeyDown)
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown)
-    }
-  })
-</script>
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
deleted file mode 100644
index b986d13b3d..0000000000
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-  import { clickOutside, Menu, MenuItem, notifications } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const {
-    focusedRow,
-    menu,
-    rows,
-    columns,
-    focusedCellId,
-    stickyColumn,
-    config,
-    copiedCell,
-    clipboard,
-    dispatch,
-  } = getContext("grid")
-
-  $: style = makeStyle($menu)
-
-  const makeStyle = menu => {
-    return `left:${menu.left}px; top:${menu.top}px;`
-  }
-
-  const deleteRow = () => {
-    rows.actions.deleteRows([$focusedRow])
-    menu.actions.close()
-    notifications.success("Deleted 1 row")
-  }
-
-  const duplicate = async () => {
-    menu.actions.close()
-    const newRow = await rows.actions.duplicateRow($focusedRow)
-    if (newRow) {
-      const column = $stickyColumn?.name || $columns[0].name
-      $focusedCellId = `${newRow._id}-${column}`
-    }
-  }
-</script>
-
-{#if $menu.visible}
-  <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
-    <Menu>
-      <MenuItem
-        icon="Copy"
-        on:click={clipboard.actions.copy}
-        on:click={menu.actions.close}
-      >
-        Copy
-      </MenuItem>
-      <MenuItem
-        icon="Paste"
-        disabled={$copiedCell == null}
-        on:click={clipboard.actions.paste}
-        on:click={menu.actions.close}
-      >
-        Paste
-      </MenuItem>
-      <MenuItem
-        icon="Maximize"
-        disabled={!$config.allowEditRows}
-        on:click={() => dispatch("edit-row", $focusedRow)}
-        on:click={menu.actions.close}
-      >
-        Edit row in modal
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        disabled={!$config.allowAddRows}
-        on:click={duplicate}
-      >
-        Duplicate row
-      </MenuItem>
-      <MenuItem
-        icon="Delete"
-        disabled={!$config.allowDeleteRows}
-        on:click={deleteRow}
-      >
-        Delete row
-      </MenuItem>
-    </Menu>
-  </div>
-{/if}
-
-<style>
-  .menu {
-    position: absolute;
-    background: var(--cell-background);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    width: 180px;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
deleted file mode 100644
index f684f2bc9b..0000000000
--- a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import GridScrollWrapper from "../layout/GridScrollWrapper.svelte"
-  import { DefaultRowHeight, GutterWidth } from "../lib/constants"
-
-  const {
-    isReordering,
-    reorder,
-    visibleColumns,
-    stickyColumn,
-    rowHeight,
-    renderedRows,
-    scrollLeft,
-  } = getContext("grid")
-
-  $: targetColumn = $reorder.targetColumn
-  $: minLeft = GutterWidth + ($stickyColumn?.width || 0)
-  $: left = getLeft(targetColumn, $stickyColumn, $visibleColumns, $scrollLeft)
-  $: height = $rowHeight * $renderedRows.length + DefaultRowHeight
-  $: style = `left:${left}px; height:${height}px;`
-  $: visible = $isReordering && left >= minLeft
-
-  const getLeft = (targetColumn, stickyColumn, visibleColumns, scrollLeft) => {
-    let left = GutterWidth + (stickyColumn?.width || 0) - scrollLeft
-
-    // If this is not the sticky column, add additional left space
-    if (targetColumn !== stickyColumn?.name) {
-      const column = visibleColumns.find(x => x.name === targetColumn)
-      if (!column) {
-        return left
-      }
-      left += column.left + column.width
-    }
-
-    return left
-  }
-</script>
-
-{#if visible}
-  <div class="reorder-wrapper">
-    <GridScrollWrapper scrollVertically>
-      <div class="reorder-overlay" {style} />
-    </GridScrollWrapper>
-  </div>
-{/if}
-
-<style>
-  .reorder-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-  }
-  .reorder-overlay {
-    position: absolute;
-    top: 0;
-    width: 2px;
-    background: var(--spectrum-global-color-blue-400);
-    margin-left: -2px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
deleted file mode 100644
index 42fb796ac9..0000000000
--- a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { GutterWidth } from "../lib/constants"
-
-  const {
-    columns,
-    resize,
-    renderedColumns,
-    stickyColumn,
-    isReordering,
-    scrollLeft,
-  } = getContext("grid")
-
-  $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
-  $: offset = GutterWidth + ($stickyColumn?.width || 0)
-  $: activeColumn = $resize.column
-
-  const getStyle = (column, offset, scrollLeft) => {
-    const left = offset + column.left + column.width - scrollLeft
-    return `left:${left}px;`
-  }
-</script>
-
-{#if !$isReordering}
-  {#if $stickyColumn}
-    <div
-      class="resize-slider"
-      class:visible={activeColumn === $stickyColumn.name}
-      on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
-      on:dblclick={() => resize.actions.resetSize($stickyColumn)}
-      style="left:{GutterWidth + $stickyColumn.width}px;"
-    >
-      <div class="resize-indicator" />
-    </div>
-  {/if}
-  {#each $renderedColumns as column}
-    <div
-      class="resize-slider"
-      class:visible={activeColumn === column.name}
-      on:mousedown={e => resize.actions.startResizing(column, e)}
-      on:dblclick={() => resize.actions.resetSize(column)}
-      style={getStyle(column, offset, $scrollLeft)}
-    >
-      <div class="resize-indicator" />
-    </div>
-  {/each}
-{/if}
-
-<style>
-  .resize-slider {
-    position: absolute;
-    top: 0;
-    height: var(--default-row-height);
-    opacity: 0;
-    padding: 0 8px;
-    transform: translateX(-50%);
-    user-select: none;
-  }
-  .resize-slider:hover,
-  .resize-slider.visible {
-    cursor: col-resize;
-    opacity: 1;
-  }
-  .resize-indicator {
-    margin-left: -1px;
-    width: 2px;
-    height: 100%;
-    background: var(--spectrum-global-color-blue-400);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
deleted file mode 100644
index f92ae1b26b..0000000000
--- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { domDebounce } from "../../../utils/utils"
-  import { DefaultRowHeight, ScrollBarSize } from "../lib/constants"
-
-  const {
-    scroll,
-    contentHeight,
-    maxScrollTop,
-    contentWidth,
-    maxScrollLeft,
-    screenWidth,
-    showHScrollbar,
-    showVScrollbar,
-    scrollLeft,
-    scrollTop,
-    height,
-  } = getContext("grid")
-
-  // State for dragging bars
-  let initialMouse
-  let initialScroll
-
-  // Calculate V scrollbar size and offset
-  // Terminology is the same for both axes:
-  //   renderX - the space available to render the bar in, edge to edge
-  //   availX - the space available to render the bar in, until the edge
-  $: renderHeight = $height - 2 * ScrollBarSize
-  $: barHeight = Math.max(50, ($height / $contentHeight) * renderHeight)
-  $: availHeight = renderHeight - barHeight
-  $: barTop =
-    ScrollBarSize +
-    DefaultRowHeight +
-    availHeight * ($scrollTop / $maxScrollTop)
-
-  // Calculate H scrollbar size and offset
-  $: renderWidth = $screenWidth - 2 * ScrollBarSize
-  $: barWidth = Math.max(50, ($screenWidth / $contentWidth) * renderWidth)
-  $: availWidth = renderWidth - barWidth
-  $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
-
-  // V scrollbar drag handlers
-  const startVDragging = e => {
-    e.preventDefault()
-    initialMouse = e.clientY
-    initialScroll = $scrollTop
-    document.addEventListener("mousemove", moveVDragging)
-    document.addEventListener("mouseup", stopVDragging)
-  }
-  const moveVDragging = domDebounce(e => {
-    const delta = e.clientY - initialMouse
-    const weight = delta / availHeight
-    const newScrollTop = initialScroll + weight * $maxScrollTop
-    scroll.update(state => ({
-      ...state,
-      top: Math.max(0, Math.min(newScrollTop, $maxScrollTop)),
-    }))
-  })
-  const stopVDragging = () => {
-    document.removeEventListener("mousemove", moveVDragging)
-    document.removeEventListener("mouseup", stopVDragging)
-  }
-
-  // H scrollbar drag handlers
-  const startHDragging = e => {
-    e.preventDefault()
-    initialMouse = e.clientX
-    initialScroll = $scrollLeft
-    document.addEventListener("mousemove", moveHDragging)
-    document.addEventListener("mouseup", stopHDragging)
-  }
-  const moveHDragging = domDebounce(e => {
-    const delta = e.clientX - initialMouse
-    const weight = delta / availWidth
-    const newScrollLeft = initialScroll + weight * $maxScrollLeft
-    scroll.update(state => ({
-      ...state,
-      left: Math.max(0, Math.min(newScrollLeft, $maxScrollLeft)),
-    }))
-  })
-  const stopHDragging = () => {
-    document.removeEventListener("mousemove", moveHDragging)
-    document.removeEventListener("mouseup", stopHDragging)
-  }
-</script>
-
-{#if $showVScrollbar}
-  <div
-    class="v-scrollbar"
-    style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
-    on:mousedown={startVDragging}
-  />
-{/if}
-{#if $showHScrollbar}
-  <div
-    class="h-scrollbar"
-    style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
-    on:mousedown={startHDragging}
-  />
-{/if}
-
-<style>
-  div {
-    position: absolute;
-    background: var(--spectrum-global-color-gray-500);
-    opacity: 0.7;
-    border-radius: 4px;
-    transition: opacity 130ms ease-out;
-  }
-  div:hover {
-    opacity: 1;
-  }
-  .v-scrollbar {
-    width: var(--size);
-    right: var(--size);
-  }
-  .h-scrollbar {
-    height: var(--size);
-    bottom: var(--size);
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/stores/bounds.js b/packages/frontend-core/src/components/grid/stores/bounds.js
deleted file mode 100644
index c0939f7389..0000000000
--- a/packages/frontend-core/src/components/grid/stores/bounds.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { derived, writable } from "svelte/store"
-
-export const createStores = () => {
-  const bounds = writable({
-    left: 0,
-    top: 0,
-    width: 0,
-    height: 0,
-  })
-
-  // Derive height and width as primitives to avoid wasted computation
-  const width = derived(bounds, $bounds => $bounds.width, 0)
-  const height = derived(bounds, $bounds => $bounds.height, 0)
-
-  return { bounds, height, width }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/clipboard.js b/packages/frontend-core/src/components/grid/stores/clipboard.js
deleted file mode 100644
index cf59dafc54..0000000000
--- a/packages/frontend-core/src/components/grid/stores/clipboard.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { writable, get } from "svelte/store"
-
-export const createStores = () => {
-  const copiedCell = writable(null)
-
-  return {
-    copiedCell,
-  }
-}
-
-export const deriveStores = context => {
-  const { copiedCell, focusedCellAPI } = context
-
-  const copy = () => {
-    copiedCell.set(get(focusedCellAPI)?.getValue())
-  }
-
-  const paste = () => {
-    const $copiedCell = get(copiedCell)
-    const $focusedCellAPI = get(focusedCellAPI)
-    if ($copiedCell != null && $focusedCellAPI) {
-      $focusedCellAPI.setValue($copiedCell)
-    }
-  }
-
-  return {
-    clipboard: {
-      actions: {
-        copy,
-        paste,
-      },
-    },
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
deleted file mode 100644
index e953977487..0000000000
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import { derived, get, writable } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
-import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
-
-export const createStores = () => {
-  const columns = writable([])
-  const stickyColumn = writable(null)
-
-  // Derive an enriched version of columns with left offsets and indexes
-  // automatically calculated
-  const enrichedColumns = derived(
-    columns,
-    $columns => {
-      let offset = 0
-      return $columns.map(column => {
-        const enriched = {
-          ...column,
-          left: offset,
-        }
-        if (column.visible) {
-          offset += column.width
-        }
-        return enriched
-      })
-    },
-    []
-  )
-
-  // Derived list of columns which have not been explicitly hidden
-  const visibleColumns = derived(
-    enrichedColumns,
-    $columns => {
-      return $columns.filter(col => col.visible)
-    },
-    []
-  )
-
-  return {
-    columns: {
-      ...columns,
-      subscribe: enrichedColumns.subscribe,
-    },
-    stickyColumn,
-    visibleColumns,
-  }
-}
-
-export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch } = context
-
-  // Updates the tables primary display column
-  const changePrimaryDisplay = async column => {
-    return await saveTable({
-      ...get(table),
-      primaryDisplay: column,
-    })
-  }
-
-  // Persists column changes by saving metadata against table schema
-  const saveChanges = async () => {
-    const $columns = get(columns)
-    const $table = get(table)
-    const $stickyColumn = get(stickyColumn)
-    const newSchema = cloneDeep($table.schema)
-
-    // Build new updated table schema
-    Object.keys(newSchema).forEach(column => {
-      // Respect order specified by columns
-      const index = $columns.findIndex(x => x.name === column)
-      if (index !== -1) {
-        newSchema[column].order = index
-      } else {
-        delete newSchema[column].order
-      }
-
-      // Copy over metadata
-      if (column === $stickyColumn?.name) {
-        newSchema[column].visible = true
-        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
-      } else {
-        newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
-      }
-    })
-
-    await saveTable({ ...$table, schema: newSchema })
-  }
-
-  const saveTable = async newTable => {
-    // Update local state
-    table.set(newTable)
-
-    // Broadcast event so that we can keep sync with external state
-    // (e.g. data section which maintains a list of table definitions)
-    dispatch("updatetable", newTable)
-
-    // Update server
-    await API.saveTable(newTable)
-  }
-
-  return {
-    columns: {
-      ...columns,
-      actions: {
-        saveChanges,
-        saveTable,
-        changePrimaryDisplay,
-      },
-    },
-  }
-}
-
-export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides } = context
-
-  const schema = derived(
-    [table, schemaOverrides],
-    ([$table, $schemaOverrides]) => {
-      let newSchema = $table?.schema
-      if (!newSchema) {
-        return null
-      }
-      Object.keys($schemaOverrides || {}).forEach(field => {
-        if (newSchema[field]) {
-          newSchema[field] = {
-            ...newSchema[field],
-            ...$schemaOverrides[field],
-          }
-        }
-      })
-      return newSchema
-    }
-  )
-
-  // Merge new schema fields with existing schema in order to preserve widths
-  schema.subscribe($schema => {
-    if (!$schema) {
-      columns.set([])
-      stickyColumn.set(null)
-      return
-    }
-    const $table = get(table)
-
-    // Find primary display
-    let primaryDisplay
-    if ($table.primaryDisplay && $schema[$table.primaryDisplay]) {
-      primaryDisplay = $table.primaryDisplay
-    }
-
-    // Get field list
-    let fields = []
-    Object.keys($schema).forEach(field => {
-      if (field !== primaryDisplay) {
-        fields.push(field)
-      }
-    })
-
-    // Update columns, removing extraneous columns and adding missing ones
-    columns.set(
-      fields
-        .map(field => ({
-          name: field,
-          label: $schema[field].name || field,
-          schema: $schema[field],
-          width: $schema[field].width || DefaultColumnWidth,
-          visible: $schema[field].visible ?? true,
-          order: $schema[field].order,
-        }))
-        .sort((a, b) => {
-          // Sort by order first
-          const orderA = a.order
-          const orderB = b.order
-          if (orderA != null && orderB != null) {
-            return orderA < orderB ? -1 : 1
-          } else if (orderA != null) {
-            return -1
-          } else if (orderB != null) {
-            return 1
-          }
-
-          // Then sort by auto columns
-          const autoColA = a.schema?.autocolumn
-          const autoColB = b.schema?.autocolumn
-          if (autoColA === autoColB) {
-            return 0
-          }
-          return autoColA ? 1 : -1
-        })
-    )
-
-    // Update sticky column
-    if (!primaryDisplay) {
-      stickyColumn.set(null)
-      return
-    }
-    stickyColumn.set({
-      name: primaryDisplay,
-      label: $schema[primaryDisplay].name || primaryDisplay,
-      schema: $schema[primaryDisplay],
-      width: $schema[primaryDisplay].width || DefaultColumnWidth,
-      visible: true,
-      order: 0,
-      left: GutterWidth,
-    })
-  })
-}
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
deleted file mode 100644
index aa552a9ffe..0000000000
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as Bounds from "./bounds"
-import * as Columns from "./columns"
-import * as Menu from "./menu"
-import * as Pagination from "./pagination"
-import * as Reorder from "./reorder"
-import * as Resize from "./resize"
-import * as Rows from "./rows"
-import * as Scroll from "./scroll"
-import * as UI from "./ui"
-import * as Users from "./users"
-import * as Validation from "./validation"
-import * as Viewport from "./viewport"
-import * as Clipboard from "./clipboard"
-
-const DependencyOrderedStores = [
-  Bounds,
-  Scroll,
-  Rows,
-  Columns,
-  UI,
-  Validation,
-  Resize,
-  Viewport,
-  Reorder,
-  Users,
-  Menu,
-  Pagination,
-  Clipboard,
-]
-
-export const attachStores = context => {
-  // Atomic store creation
-  for (let store of DependencyOrderedStores) {
-    context = { ...context, ...store.createStores?.(context) }
-  }
-
-  // Derived store creation
-  for (let store of DependencyOrderedStores) {
-    context = { ...context, ...store.deriveStores?.(context) }
-  }
-
-  // Initialise any store logic
-  for (let store of DependencyOrderedStores) {
-    store.initialise?.(context)
-  }
-
-  return context
-}
diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js
deleted file mode 100644
index 3f34c0a266..0000000000
--- a/packages/frontend-core/src/components/grid/stores/menu.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { writable, get } from "svelte/store"
-import { GutterWidth } from "../lib/constants"
-
-export const createStores = () => {
-  const menu = writable({
-    x: 0,
-    y: 0,
-    visible: false,
-    selectedRow: null,
-  })
-  return {
-    menu,
-  }
-}
-
-export const deriveStores = context => {
-  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context
-
-  const open = (cellId, e) => {
-    const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
-    const $rowHeight = get(rowHeight)
-    e.preventDefault()
-    focusedCellId.set(cellId)
-    menu.set({
-      left:
-        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
-      top: e.clientY - $bounds.top + $rowHeight,
-      visible: true,
-    })
-  }
-
-  const close = () => {
-    menu.update(state => ({
-      ...state,
-      visible: false,
-    }))
-  }
-
-  return {
-    menu: {
-      ...menu,
-      actions: {
-        open,
-        close,
-      },
-    },
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/pagination.js b/packages/frontend-core/src/components/grid/stores/pagination.js
deleted file mode 100644
index c6a856e229..0000000000
--- a/packages/frontend-core/src/components/grid/stores/pagination.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { derived } from "svelte/store"
-
-export const initialise = context => {
-  const { scrolledRowCount, rows, visualRowCapacity } = context
-
-  // Derive how many rows we have in total
-  const rowCount = derived(rows, $rows => $rows.length, 0)
-
-  // Derive how many rows we have available to scroll
-  const remainingRows = derived(
-    [scrolledRowCount, rowCount, visualRowCapacity],
-    ([$scrolledRowCount, $rowCount, $visualRowCapacity]) => {
-      return Math.max(0, $rowCount - $scrolledRowCount - $visualRowCapacity)
-    },
-    100
-  )
-
-  // Fetch next page when fewer than 25 remaining rows to scroll
-  remainingRows.subscribe(remaining => {
-    if (remaining < 25) {
-      rows.actions.loadNextPage()
-    }
-  })
-}
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js
deleted file mode 100644
index de343987db..0000000000
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { get, writable, derived } from "svelte/store"
-
-const reorderInitialState = {
-  sourceColumn: null,
-  targetColumn: null,
-  breakpoints: [],
-  initialMouseX: null,
-  scrollLeft: 0,
-  gridLeft: 0,
-}
-
-export const createStores = () => {
-  const reorder = writable(reorderInitialState)
-  const isReordering = derived(
-    reorder,
-    $reorder => !!$reorder.sourceColumn,
-    false
-  )
-  return {
-    reorder,
-    isReordering,
-  }
-}
-
-export const deriveStores = context => {
-  const { reorder, columns, visibleColumns, scroll, bounds, stickyColumn, ui } =
-    context
-
-  // Callback when dragging on a colum header and starting reordering
-  const startReordering = (column, e) => {
-    const $visibleColumns = get(visibleColumns)
-    const $bounds = get(bounds)
-    const $scroll = get(scroll)
-    const $stickyColumn = get(stickyColumn)
-    ui.actions.blur()
-
-    // Generate new breakpoints for the current columns
-    let breakpoints = $visibleColumns.map(col => ({
-      x: col.left + col.width,
-      column: col.name,
-    }))
-    if ($stickyColumn) {
-      breakpoints.unshift({
-        x: 0,
-        column: $stickyColumn.name,
-      })
-    }
-
-    // Update state
-    reorder.set({
-      sourceColumn: column,
-      targetColumn: null,
-      breakpoints,
-      initialMouseX: e.clientX,
-      scrollLeft: $scroll.left,
-      gridLeft: $bounds.left,
-    })
-
-    // Add listeners to handle mouse movement
-    document.addEventListener("mousemove", onReorderMouseMove)
-    document.addEventListener("mouseup", stopReordering)
-
-    // Trigger a move event immediately so ensure a candidate column is chosen
-    onReorderMouseMove(e)
-  }
-
-  // Callback when moving the mouse when reordering columns
-  const onReorderMouseMove = e => {
-    const $reorder = get(reorder)
-
-    // Compute the closest breakpoint to the current position
-    let targetColumn
-    let minDistance = Number.MAX_SAFE_INTEGER
-    const mouseX = e.clientX - $reorder.gridLeft + $reorder.scrollLeft
-    $reorder.breakpoints.forEach(point => {
-      const distance = Math.abs(point.x - mouseX)
-      if (distance < minDistance) {
-        minDistance = distance
-        targetColumn = point.column
-      }
-    })
-
-    if (targetColumn !== $reorder.targetColumn) {
-      reorder.update(state => ({
-        ...state,
-        targetColumn,
-      }))
-    }
-  }
-
-  // Callback when stopping reordering columns
-  const stopReordering = async () => {
-    // Swap position of columns
-    let { sourceColumn, targetColumn } = get(reorder)
-    moveColumn(sourceColumn, targetColumn)
-
-    // Reset state
-    reorder.set(reorderInitialState)
-
-    // Remove event handlers
-    document.removeEventListener("mousemove", onReorderMouseMove)
-    document.removeEventListener("mouseup", stopReordering)
-
-    // Save column changes
-    await columns.actions.saveChanges()
-  }
-
-  // Moves a column after another columns.
-  // An undefined target column will move the source to index 0.
-  const moveColumn = (sourceColumn, targetColumn) => {
-    let $columns = get(columns)
-    let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
-    let targetIdx = $columns.findIndex(x => x.name === targetColumn)
-    targetIdx++
-    columns.update(state => {
-      const removed = state.splice(sourceIdx, 1)
-      if (--targetIdx < sourceIdx) {
-        targetIdx++
-      }
-      state.splice(targetIdx, 0, removed[0])
-      return state.slice()
-    })
-  }
-
-  // Moves a column one place left (as appears visually)
-  const moveColumnLeft = async column => {
-    const $visibleColumns = get(visibleColumns)
-    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
-    moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
-    await columns.actions.saveChanges()
-  }
-
-  // Moves a column one place right (as appears visually)
-  const moveColumnRight = async column => {
-    const $visibleColumns = get(visibleColumns)
-    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
-    if (sourceIdx === $visibleColumns.length - 1) {
-      return
-    }
-    moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
-    await columns.actions.saveChanges()
-  }
-
-  return {
-    reorder: {
-      ...reorder,
-      actions: {
-        startReordering,
-        stopReordering,
-        moveColumnLeft,
-        moveColumnRight,
-      },
-    },
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/resize.js b/packages/frontend-core/src/components/grid/stores/resize.js
deleted file mode 100644
index d007e70c4e..0000000000
--- a/packages/frontend-core/src/components/grid/stores/resize.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { writable, get, derived } from "svelte/store"
-import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
-
-const initialState = {
-  initialMouseX: null,
-  initialWidth: null,
-  column: null,
-  columnIdx: null,
-  width: 0,
-  left: 0,
-}
-
-export const createStores = () => {
-  const resize = writable(initialState)
-  const isResizing = derived(resize, $resize => $resize.column != null, false)
-  return {
-    resize,
-    isResizing,
-  }
-}
-
-export const deriveStores = context => {
-  const { resize, columns, stickyColumn, ui } = context
-
-  // Starts resizing a certain column
-  const startResizing = (column, e) => {
-    // Prevent propagation to stop reordering triggering
-    e.stopPropagation()
-    ui.actions.blur()
-
-    // Find and cache index
-    let columnIdx = get(columns).findIndex(col => col.name === column.name)
-    if (columnIdx === -1) {
-      columnIdx = "sticky"
-    }
-
-    // Set initial store state
-    resize.set({
-      width: column.width,
-      left: column.left,
-      initialWidth: column.width,
-      initialMouseX: e.clientX,
-      column: column.name,
-      columnIdx,
-    })
-
-    // Add mouse event listeners to handle resizing
-    document.addEventListener("mousemove", onResizeMouseMove)
-    document.addEventListener("mouseup", stopResizing)
-  }
-
-  // Handler for moving the mouse to resize columns
-  const onResizeMouseMove = e => {
-    const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
-    const dx = e.clientX - initialMouseX
-    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
-
-    // Ignore small changes
-    if (Math.abs(width - newWidth) < 5) {
-      return
-    }
-
-    // Update column state
-    if (columnIdx === "sticky") {
-      stickyColumn.update(state => ({
-        ...state,
-        width: newWidth,
-      }))
-    } else {
-      columns.update(state => {
-        state[columnIdx].width = newWidth
-        return [...state]
-      })
-    }
-
-    // Update state
-    resize.update(state => ({
-      ...state,
-      width: newWidth,
-    }))
-  }
-
-  // Stop resizing any columns
-  const stopResizing = async () => {
-    // Reset state
-    const $resize = get(resize)
-    resize.set(initialState)
-    document.removeEventListener("mousemove", onResizeMouseMove)
-    document.removeEventListener("mouseup", stopResizing)
-
-    // Persist width if it changed
-    if ($resize.width !== $resize.initialWidth) {
-      await columns.actions.saveChanges()
-    }
-  }
-
-  // Resets a column size back to default
-  const resetSize = async column => {
-    const $stickyColumn = get(stickyColumn)
-    if (column.name === $stickyColumn?.name) {
-      stickyColumn.update(state => ({
-        ...state,
-        width: DefaultColumnWidth,
-      }))
-    } else {
-      columns.update(state => {
-        const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = DefaultColumnWidth
-        return [...state]
-      })
-    }
-    await columns.actions.saveChanges()
-  }
-
-  return {
-    resize: {
-      ...resize,
-      actions: {
-        startResizing,
-        resetSize,
-      },
-    },
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
deleted file mode 100644
index 30e0fad96a..0000000000
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ /dev/null
@@ -1,462 +0,0 @@
-import { writable, derived, get } from "svelte/store"
-import { fetchData } from "../../../fetch/fetchData"
-import { notifications } from "@budibase/bbui"
-
-const initialSortState = {
-  column: null,
-  order: "ascending",
-}
-
-export const createStores = () => {
-  const rows = writable([])
-  const table = writable(null)
-  const filter = writable([])
-  const loading = writable(false)
-  const loaded = writable(false)
-  const sort = writable(initialSortState)
-  const rowChangeCache = writable({})
-  const inProgressChanges = writable({})
-
-  // Generate a lookup map to quick find a row by ID
-  const rowLookupMap = derived(
-    rows,
-    $rows => {
-      let map = {}
-      for (let i = 0; i < $rows.length; i++) {
-        map[$rows[i]._id] = i
-      }
-      return map
-    },
-    {}
-  )
-
-  // Mark loaded as true if we've ever stopped loading
-  let hasStartedLoading = false
-  loading.subscribe($loading => {
-    if ($loading) {
-      hasStartedLoading = true
-    } else if (hasStartedLoading) {
-      loaded.set(true)
-    }
-  })
-
-  return {
-    rows,
-    rowLookupMap,
-    table,
-    filter,
-    loaded,
-    loading,
-    sort,
-    rowChangeCache,
-    inProgressChanges,
-  }
-}
-
-export const deriveStores = context => {
-  const {
-    rows,
-    rowLookupMap,
-    table,
-    filter,
-    loading,
-    sort,
-    tableId,
-    API,
-    scroll,
-    validation,
-    focusedCellId,
-    columns,
-    rowChangeCache,
-    inProgressChanges,
-    previousFocusedRowId,
-  } = context
-  const instanceLoaded = writable(false)
-  const fetch = writable(null)
-
-  // Local cache of row IDs to speed up checking if a row exists
-  let rowCacheMap = {}
-
-  // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(
-    [rows, rowChangeCache],
-    ([$rows, $rowChangeCache]) => {
-      return $rows.map((row, idx) => ({
-        ...row,
-        ...$rowChangeCache[row._id],
-        __idx: idx,
-      }))
-    },
-    []
-  )
-
-  // Reset everything when table ID changes
-  let unsubscribe = null
-  let lastResetKey = null
-  tableId.subscribe($tableId => {
-    // Unsub from previous fetch if one exists
-    unsubscribe?.()
-    fetch.set(null)
-    instanceLoaded.set(false)
-    loading.set(true)
-
-    // Reset state
-    filter.set([])
-
-    // Create new fetch model
-    const newFetch = fetchData({
-      API,
-      datasource: {
-        type: "table",
-        tableId: $tableId,
-      },
-      options: {
-        filter: [],
-        sortColumn: initialSortState.column,
-        sortOrder: initialSortState.order,
-        limit: 100,
-        paginate: true,
-      },
-    })
-
-    // Subscribe to changes of this fetch model
-    unsubscribe = newFetch.subscribe($fetch => {
-      if ($fetch.loaded && !$fetch.loading) {
-        const $instanceLoaded = get(instanceLoaded)
-        const resetRows = $fetch.resetKey !== lastResetKey
-        lastResetKey = $fetch.resetKey
-
-        // Reset state properties when dataset changes
-        if (!$instanceLoaded || resetRows) {
-          table.set($fetch.definition)
-          sort.set({
-            column: $fetch.sortColumn,
-            order: $fetch.sortOrder,
-          })
-        }
-
-        // Reset scroll state when data changes
-        if (!$instanceLoaded) {
-          // Reset both top and left for a new table ID
-          instanceLoaded.set(true)
-          scroll.set({ top: 0, left: 0 })
-        } else if (resetRows) {
-          // Only reset top scroll position when resetting rows
-          scroll.update(state => ({ ...state, top: 0 }))
-        }
-
-        // Process new rows
-        handleNewRows($fetch.rows, resetRows)
-
-        // Notify that we're loaded
-        loading.set(false)
-      }
-    })
-
-    fetch.set(newFetch)
-  })
-
-  // Update fetch when filter or sort config changes
-  filter.subscribe($filter => {
-    get(fetch)?.update({
-      filter: $filter,
-    })
-  })
-  sort.subscribe($sort => {
-    get(fetch)?.update({
-      sortOrder: $sort.order,
-      sortColumn: $sort.column,
-    })
-  })
-
-  // Gets a row by ID
-  const getRow = id => {
-    const index = get(rowLookupMap)[id]
-    return index >= 0 ? get(rows)[index] : null
-  }
-
-  // Handles validation errors from the rows API and updates local validation
-  // state, storing error messages against relevant cells
-  const handleValidationError = (rowId, error) => {
-    if (error?.json?.validationErrors) {
-      // Normal validation error
-      const keys = Object.keys(error.json.validationErrors)
-      const $columns = get(columns)
-      for (let column of keys) {
-        validation.actions.setError(
-          `${rowId}-${column}`,
-          `${column} ${error.json.validationErrors[column]}`
-        )
-
-        // Ensure the column is visible
-        const index = $columns.findIndex(x => x.name === column)
-        if (index !== -1 && !$columns[index].visible) {
-          columns.update(state => {
-            state[index].visible = true
-            return state.slice()
-          })
-        }
-      }
-      // Focus the first cell with an error
-      focusedCellId.set(`${rowId}-${keys[0]}`)
-    } else {
-      // Some other error - just update the current cell
-      validation.actions.setError(get(focusedCellId), error?.message || "Error")
-    }
-  }
-
-  // Adds a new row
-  const addRow = async (row, idx, bubble = false) => {
-    try {
-      // Create row
-      let newRow = await API.saveRow({ ...row, tableId: get(tableId) })
-      newRow = await fetchRow(newRow._id)
-
-      // Update state
-      if (idx != null) {
-        rowCacheMap[newRow._id] = true
-        rows.update(state => {
-          state.splice(idx, 0, newRow)
-          return state.slice()
-        })
-      } else {
-        handleNewRows([newRow])
-      }
-
-      // Refresh row to ensure data is in the correct format
-      notifications.success("Row created successfully")
-      return newRow
-    } catch (error) {
-      if (bubble) {
-        throw error
-      } else {
-        handleValidationError("new", error)
-      }
-    }
-  }
-
-  // Duplicates a row, inserting the duplicate row after the existing one
-  const duplicateRow = async row => {
-    let clone = { ...row }
-    delete clone._id
-    delete clone._rev
-    delete clone.__idx
-    try {
-      return await addRow(clone, row.__idx + 1, true)
-    } catch (error) {
-      handleValidationError(row._id, error)
-    }
-  }
-
-  // Fetches a row by ID using the search endpoint
-  const fetchRow = async id => {
-    const res = await API.searchTable({
-      tableId: get(tableId),
-      limit: 1,
-      query: {
-        equal: {
-          _id: id,
-        },
-      },
-      paginate: false,
-    })
-    return res?.rows?.[0]
-  }
-
-  // Refreshes a specific row, handling updates, addition or deletion
-  const refreshRow = async id => {
-    // Fetch row from the server again
-    const newRow = await fetchRow(id)
-
-    // Get index of row to check if it exists
-    const $rows = get(rows)
-    const $rowLookupMap = get(rowLookupMap)
-    const index = $rowLookupMap[id]
-
-    // Process as either an update, addition or deletion
-    if (newRow) {
-      if (index != null) {
-        // An existing row was updated
-        rows.update(state => {
-          state[index] = { ...newRow }
-          return state
-        })
-      } else {
-        // A new row was created
-        handleNewRows([newRow])
-      }
-    } else if (index != null) {
-      // A row was removed
-      handleRemoveRows([$rows[index]])
-    }
-  }
-
-  // Refreshes all data
-  const refreshData = () => {
-    get(fetch)?.getInitialData()
-  }
-
-  // Patches a row with some changes
-  const updateRow = async (rowId, changes) => {
-    const $rows = get(rows)
-    const $rowLookupMap = get(rowLookupMap)
-    const index = $rowLookupMap[rowId]
-    const row = $rows[index]
-    if (index == null || !Object.keys(changes || {}).length) {
-      return
-    }
-
-    // Abandon if no changes
-    let same = true
-    for (let column of Object.keys(changes)) {
-      if (row[column] !== changes[column]) {
-        same = false
-        break
-      }
-    }
-    if (same) {
-      return
-    }
-
-    // Immediately update state so that the change is reflected
-    rowChangeCache.update(state => ({
-      ...state,
-      [rowId]: {
-        ...state[rowId],
-        ...changes,
-      },
-    }))
-
-    // Save change
-    try {
-      inProgressChanges.update(state => ({
-        ...state,
-        [rowId]: true,
-      }))
-      const newRow = { ...row, ...get(rowChangeCache)[rowId] }
-      const saved = await API.saveRow(newRow)
-
-      // Update state after a successful change
-      rows.update(state => {
-        state[index] = {
-          ...newRow,
-          _rev: saved._rev,
-        }
-        return state.slice()
-      })
-      rowChangeCache.update(state => {
-        delete state[rowId]
-        return state
-      })
-    } catch (error) {
-      handleValidationError(rowId, error)
-    }
-    inProgressChanges.update(state => ({
-      ...state,
-      [rowId]: false,
-    }))
-  }
-
-  // Updates a value of a row
-  const updateValue = async (rowId, column, value) => {
-    return await updateRow(rowId, { [column]: value })
-  }
-
-  // Deletes an array of rows
-  const deleteRows = async rowsToDelete => {
-    if (!rowsToDelete?.length) {
-      return
-    }
-
-    // Actually delete rows
-    rowsToDelete.forEach(row => {
-      delete row.__idx
-    })
-    await API.deleteRows({
-      tableId: get(tableId),
-      rows: rowsToDelete,
-    })
-
-    // Update state
-    handleRemoveRows(rowsToDelete)
-  }
-
-  // Local handler to process new rows inside the fetch, and append any new
-  // rows to state that we haven't encountered before
-  const handleNewRows = (newRows, resetRows) => {
-    if (resetRows) {
-      rowCacheMap = {}
-    }
-    let rowsToAppend = []
-    let newRow
-    for (let i = 0; i < newRows.length; i++) {
-      newRow = newRows[i]
-      if (!rowCacheMap[newRow._id]) {
-        rowCacheMap[newRow._id] = true
-        rowsToAppend.push(newRow)
-      }
-    }
-    if (resetRows) {
-      rows.set(rowsToAppend)
-    } else if (rowsToAppend.length) {
-      rows.update(state => [...state, ...rowsToAppend])
-    }
-  }
-
-  // Local handler to remove rows from state
-  const handleRemoveRows = rowsToRemove => {
-    const deletedIds = rowsToRemove.map(row => row._id)
-
-    // We deliberately do not remove IDs from the cache map as the data may
-    // still exist inside the fetch, but we don't want to add it again
-    rows.update(state => {
-      return state.filter(row => !deletedIds.includes(row._id))
-    })
-  }
-
-  // Loads the next page of data if available
-  const loadNextPage = () => {
-    get(fetch)?.nextPage()
-  }
-
-  // Refreshes the schema of the data fetch subscription
-  const refreshTableDefinition = async () => {
-    const definition = await API.fetchTableDefinition(get(tableId))
-    table.set(definition)
-  }
-
-  // Checks if we have a row with a certain ID
-  const hasRow = id => {
-    return get(rowLookupMap)[id] != null
-  }
-
-  // Wipe the row change cache when changing row
-  previousFocusedRowId.subscribe(id => {
-    if (id && !get(inProgressChanges)[id]) {
-      rowChangeCache.update(state => {
-        delete state[id]
-        return state
-      })
-    }
-  })
-
-  return {
-    enrichedRows,
-    rows: {
-      ...rows,
-      actions: {
-        addRow,
-        duplicateRow,
-        getRow,
-        updateValue,
-        updateRow,
-        deleteRows,
-        hasRow,
-        loadNextPage,
-        refreshRow,
-        refreshData,
-        refreshTableDefinition,
-      },
-    },
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
deleted file mode 100644
index c9de224181..0000000000
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ /dev/null
@@ -1,201 +0,0 @@
-import { writable, derived, get } from "svelte/store"
-import { tick } from "svelte"
-import { Padding, GutterWidth, DefaultRowHeight } from "../lib/constants"
-
-export const createStores = () => {
-  const scroll = writable({
-    left: 0,
-    top: 0,
-  })
-
-  // Derive height and width as primitives to avoid wasted computation
-  const scrollTop = derived(scroll, $scroll => $scroll.top, 0)
-  const scrollLeft = derived(scroll, $scroll => $scroll.left, 0)
-
-  return {
-    scroll,
-    scrollTop,
-    scrollLeft,
-  }
-}
-
-export const deriveStores = context => {
-  const { rows, visibleColumns, stickyColumn, rowHeight, width, height } =
-    context
-
-  // Memoize store primitives
-  const stickyColumnWidth = derived(stickyColumn, $col => $col?.width || 0, 0)
-
-  // Derive vertical limits
-  const contentHeight = derived(
-    [rows, rowHeight],
-    ([$rows, $rowHeight]) => $rows.length * $rowHeight + Padding,
-    0
-  )
-  const maxScrollTop = derived(
-    [height, contentHeight],
-    ([$height, $contentHeight]) => Math.max($contentHeight - $height, 0),
-    0
-  )
-
-  // Derive horizontal limits
-  const contentWidth = derived(
-    [visibleColumns, stickyColumnWidth],
-    ([$visibleColumns, $stickyColumnWidth]) => {
-      let width = GutterWidth + Padding + $stickyColumnWidth
-      $visibleColumns.forEach(col => {
-        width += col.width
-      })
-      return width
-    },
-    0
-  )
-  const screenWidth = derived(
-    [width, stickyColumnWidth],
-    ([$width, $stickyColumnWidth]) => $width + GutterWidth + $stickyColumnWidth,
-    0
-  )
-  const maxScrollLeft = derived(
-    [contentWidth, screenWidth],
-    ([$contentWidth, $screenWidth]) => {
-      return Math.max($contentWidth - $screenWidth, 0)
-    },
-    0
-  )
-
-  // Derive whether to show scrollbars or not
-  const showVScrollbar = derived(
-    [contentHeight, height],
-    ([$contentHeight, $height]) => {
-      return $contentHeight > $height
-    }
-  )
-  const showHScrollbar = derived(
-    [contentWidth, screenWidth],
-    ([$contentWidth, $screenWidth]) => {
-      return $contentWidth > $screenWidth
-    }
-  )
-
-  return {
-    contentHeight,
-    contentWidth,
-    screenWidth,
-    maxScrollTop,
-    maxScrollLeft,
-    showHScrollbar,
-    showVScrollbar,
-  }
-}
-
-export const initialise = context => {
-  const {
-    focusedCellId,
-    focusedRow,
-    scroll,
-    bounds,
-    rowHeight,
-    visibleColumns,
-    scrollTop,
-    maxScrollTop,
-    scrollLeft,
-    maxScrollLeft,
-  } = context
-
-  // Ensure scroll state never goes invalid, which can happen when changing
-  // rows or tables
-  const overscrollTop = derived(
-    [scrollTop, maxScrollTop],
-    ([$scrollTop, $maxScrollTop]) => $scrollTop > $maxScrollTop,
-    false
-  )
-  const overscrollLeft = derived(
-    [scrollLeft, maxScrollLeft],
-    ([$scrollLeft, $maxScrollLeft]) => $scrollLeft > $maxScrollLeft,
-    false
-  )
-  overscrollTop.subscribe(overscroll => {
-    if (overscroll) {
-      scroll.update(state => ({
-        ...state,
-        top: get(maxScrollTop),
-      }))
-    }
-  })
-  overscrollLeft.subscribe(overscroll => {
-    if (overscroll) {
-      scroll.update(state => ({
-        ...state,
-        left: get(maxScrollLeft),
-      }))
-    }
-  })
-
-  // Ensure the selected cell is visible
-  focusedCellId.subscribe(async $focusedCellId => {
-    await tick()
-    const $focusedRow = get(focusedRow)
-    const $scroll = get(scroll)
-    const $bounds = get(bounds)
-    const $rowHeight = get(rowHeight)
-    const verticalOffset = DefaultRowHeight * 1.5
-
-    // Ensure vertical position is viewable
-    if ($focusedRow) {
-      // Ensure row is not below bottom of screen
-      const rowYPos = $focusedRow.__idx * $rowHeight
-      const bottomCutoff =
-        $scroll.top + $bounds.height - $rowHeight - verticalOffset
-      let delta = rowYPos - bottomCutoff
-      if (delta > 0) {
-        scroll.update(state => ({
-          ...state,
-          top: state.top + delta,
-        }))
-      }
-
-      // Ensure row is not above top of screen
-      else {
-        const delta = $scroll.top - rowYPos + verticalOffset
-        if (delta > 0) {
-          scroll.update(state => ({
-            ...state,
-            top: Math.max(0, state.top - delta),
-          }))
-        }
-      }
-    }
-
-    // Ensure horizontal position is viewable
-    // Check horizontal position of columns next
-    const $visibleColumns = get(visibleColumns)
-    const columnName = $focusedCellId?.split("-")[1]
-    const column = $visibleColumns.find(col => col.name === columnName)
-    const horizontalOffset = 50
-    if (!column) {
-      return
-    }
-
-    // Ensure column is not cutoff on left edge
-    let delta = $scroll.left - column.left + horizontalOffset
-    if (delta > 0) {
-      scroll.update(state => ({
-        ...state,
-        left: Math.max(0, state.left - delta),
-      }))
-    }
-
-    // Ensure column is not cutoff on right edge
-    else {
-      const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - horizontalOffset
-      delta = rightEdge - rightBound
-      if (delta > 0) {
-        scroll.update(state => ({
-          ...state,
-          left: state.left + delta,
-        }))
-      }
-    }
-  })
-}
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
deleted file mode 100644
index 197b3f80d2..0000000000
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { writable, get, derived } from "svelte/store"
-import {
-  DefaultRowHeight,
-  LargeRowHeight,
-  MediumRowHeight,
-} from "../lib/constants"
-
-export const createStores = () => {
-  const focusedCellId = writable(null)
-  const focusedCellAPI = writable(null)
-  const selectedRows = writable({})
-  const hoveredRowId = writable(null)
-  const rowHeight = writable(DefaultRowHeight)
-  const previousFocusedRowId = writable(null)
-
-  // Derive the current focused row ID
-  const focusedRowId = derived(
-    focusedCellId,
-    $focusedCellId => {
-      return $focusedCellId?.split("-")[0]
-    },
-    null
-  )
-
-  return {
-    focusedCellId,
-    focusedCellAPI,
-    focusedRowId,
-    previousFocusedRowId,
-    selectedRows,
-    hoveredRowId,
-    rowHeight,
-  }
-}
-
-export const deriveStores = context => {
-  const {
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    enrichedRows,
-    rowLookupMap,
-    rowHeight,
-  } = context
-
-  // Derive the row that contains the selected cell
-  const focusedRow = derived(
-    [focusedCellId, rowLookupMap, enrichedRows],
-    ([$focusedCellId, $rowLookupMap, $enrichedRows]) => {
-      const rowId = $focusedCellId?.split("-")[0]
-
-      if (rowId === "new") {
-        // Edge case for new row
-        return { _id: rowId }
-      } else {
-        // All normal rows
-        const index = $rowLookupMap[rowId]
-        return $enrichedRows[index]
-      }
-    },
-    null
-  )
-
-  // Callback when leaving the grid, deselecting all focussed or selected items
-  const blur = () => {
-    focusedCellId.set(null)
-    selectedRows.set({})
-    hoveredRowId.set(null)
-  }
-
-  const contentLines = derived(rowHeight, $rowHeight => {
-    if ($rowHeight === LargeRowHeight) {
-      return 3
-    } else if ($rowHeight === MediumRowHeight) {
-      return 2
-    }
-    return 1
-  })
-
-  return {
-    focusedRow,
-    contentLines,
-    ui: {
-      actions: {
-        blur,
-      },
-    },
-  }
-}
-
-export const initialise = context => {
-  const {
-    focusedRowId,
-    previousFocusedRowId,
-    rows,
-    focusedCellId,
-    selectedRows,
-    hoveredRowId,
-    table,
-    rowHeight,
-  } = context
-
-  // Ensure we clear invalid rows from state if they disappear
-  rows.subscribe(() => {
-    const $focusedCellId = get(focusedCellId)
-    const $selectedRows = get(selectedRows)
-    const $hoveredRowId = get(hoveredRowId)
-    const hasRow = rows.actions.hasRow
-
-    // Check selected cell
-    const selectedRowId = $focusedCellId?.split("-")[0]
-    if (selectedRowId && !hasRow(selectedRowId)) {
-      focusedCellId.set(null)
-    }
-
-    // Check hovered row
-    if ($hoveredRowId && !hasRow($hoveredRowId)) {
-      hoveredRowId.set(null)
-    }
-
-    // Check selected rows
-    let newSelectedRows = { ...$selectedRows }
-    let selectedRowsNeedsUpdate = false
-    const selectedIds = Object.keys($selectedRows)
-    for (let i = 0; i < selectedIds.length; i++) {
-      if (!hasRow(selectedIds[i])) {
-        delete newSelectedRows[selectedIds[i]]
-        selectedRowsNeedsUpdate = true
-      }
-    }
-    if (selectedRowsNeedsUpdate) {
-      selectedRows.set(newSelectedRows)
-    }
-  })
-
-  // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
-  focusedRowId.subscribe(id => {
-    previousFocusedRowId.set(lastFocusedRowId)
-    lastFocusedRowId = id
-  })
-
-  // Reset selected rows when selected cell changes
-  focusedCellId.subscribe(id => {
-    if (id) {
-      selectedRows.set({})
-    }
-  })
-
-  // Unset selected cell when rows are selected
-  selectedRows.subscribe(rows => {
-    if (Object.keys(rows || {}).length) {
-      focusedCellId.set(null)
-    }
-  })
-
-  // Remove hovered row when a cell is selected
-  focusedCellId.subscribe(cell => {
-    if (cell && get(hoveredRowId)) {
-      hoveredRowId.set(null)
-    }
-  })
-
-  // Pull row height from table
-  table.subscribe($table => {
-    rowHeight.set($table?.rowHeight || DefaultRowHeight)
-  })
-}
diff --git a/packages/frontend-core/src/components/grid/stores/users.js b/packages/frontend-core/src/components/grid/stores/users.js
deleted file mode 100644
index 3a6ec5fb21..0000000000
--- a/packages/frontend-core/src/components/grid/stores/users.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { writable, get, derived } from "svelte/store"
-
-export const createStores = () => {
-  const users = writable([])
-  const userId = writable(null)
-
-  // Enrich users with unique colours
-  const enrichedUsers = derived(
-    [users, userId],
-    ([$users, $userId]) => {
-      return (
-        $users
-          .slice()
-          // Place current user first
-          .sort((a, b) => {
-            if (a.id === $userId) {
-              return -1
-            } else if (b.id === $userId) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-          // Enrich users with colors
-          .map((user, idx) => {
-            // Generate random colour hue
-            let hue = 1
-            for (let i = 0; i < user.email.length && i < 5; i++) {
-              hue *= user.email.charCodeAt(i + 1)
-              hue /= 17
-            }
-            hue = hue % 360
-            const color =
-              idx === 0
-                ? "var(--spectrum-global-color-blue-400)"
-                : `hsl(${hue}, 50%, 40%)`
-
-            // Generate friendly label
-            let label = user.email
-            if (user.firstName) {
-              label = user.firstName
-              if (user.lastName) {
-                label += ` ${user.lastName}`
-              }
-            }
-
-            return {
-              ...user,
-              color,
-              label,
-            }
-          })
-      )
-    },
-    []
-  )
-
-  return {
-    users: {
-      ...users,
-      subscribe: enrichedUsers.subscribe,
-    },
-    userId,
-  }
-}
-
-export const deriveStores = context => {
-  const { users, userId } = context
-
-  // Generate a lookup map of cell ID to the user that has it selected, to make
-  // lookups inside cells extremely fast
-  const selectedCellMap = derived(
-    [users, userId],
-    ([$enrichedUsers, $userId]) => {
-      let map = {}
-      $enrichedUsers.forEach(user => {
-        if (user.focusedCellId && user.id !== $userId) {
-          map[user.focusedCellId] = user
-        }
-      })
-      return map
-    },
-    {}
-  )
-
-  const updateUser = user => {
-    const $users = get(users)
-    const index = $users.findIndex(x => x.id === user.id)
-    if (index === -1) {
-      users.set([...$users, user])
-    } else {
-      users.update(state => {
-        state[index] = user
-        return state.slice()
-      })
-    }
-  }
-
-  const removeUser = user => {
-    users.update(state => {
-      return state.filter(x => x.id !== user.id)
-    })
-  }
-
-  return {
-    users: {
-      ...users,
-      actions: {
-        updateUser,
-        removeUser,
-      },
-    },
-    selectedCellMap,
-  }
-}
diff --git a/packages/frontend-core/src/components/grid/stores/validation.js b/packages/frontend-core/src/components/grid/stores/validation.js
deleted file mode 100644
index 9c3927f9c9..0000000000
--- a/packages/frontend-core/src/components/grid/stores/validation.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { writable, get } from "svelte/store"
-
-export const createStores = () => {
-  const validation = writable({})
-
-  const setError = (cellId, error) => {
-    if (!cellId) {
-      return
-    }
-    validation.update(state => ({
-      ...state,
-      [cellId]: error,
-    }))
-  }
-
-  return {
-    validation: {
-      ...validation,
-      actions: {
-        setError,
-      },
-    },
-  }
-}
-
-export const initialise = context => {
-  const { validation, previousFocusedRowId, columns, stickyColumn } = context
-
-  // Remove validation errors from previous focused row
-  previousFocusedRowId.subscribe(id => {
-    if (id) {
-      const $columns = get(columns)
-      const $stickyColumn = get(stickyColumn)
-      validation.update(state => {
-        $columns.forEach(column => {
-          state[`${id}-${column.name}`] = null
-        })
-        if ($stickyColumn) {
-          state[`${id}-${$stickyColumn.name}`] = null
-        }
-        return state
-      })
-    }
-  })
-}
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
deleted file mode 100644
index 9da3523480..0000000000
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { derived, get } from "svelte/store"
-import {
-  MaxCellRenderHeight,
-  MaxCellRenderWidthOverflow,
-  ScrollBarSize,
-} from "../lib/constants"
-
-export const deriveStores = context => {
-  const {
-    rowHeight,
-    visibleColumns,
-    enrichedRows,
-    scrollTop,
-    scrollLeft,
-    width,
-    height,
-  } = context
-
-  // Derive visible rows
-  // Split into multiple stores containing primitives to optimise invalidation
-  // as much as possible
-  const scrolledRowCount = derived(
-    [scrollTop, rowHeight],
-    ([$scrollTop, $rowHeight]) => {
-      return Math.floor($scrollTop / $rowHeight)
-    },
-    0
-  )
-  const visualRowCapacity = derived(
-    [height, rowHeight],
-    ([$height, $rowHeight]) => {
-      return Math.ceil($height / $rowHeight) + 1
-    },
-    0
-  )
-  const renderedRows = derived(
-    [enrichedRows, scrolledRowCount, visualRowCapacity],
-    ([$enrichedRows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $enrichedRows.slice(
-        $scrolledRowCount,
-        $scrolledRowCount + $visualRowCapacity
-      )
-    },
-    []
-  )
-
-  // Derive visible columns
-  const renderedColumns = derived(
-    [visibleColumns, scrollLeft, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
-      if (!$visibleColumns.length) {
-        return []
-      }
-      let startColIdx = 0
-      let rightEdge = $visibleColumns[0].width
-      while (
-        rightEdge < $scrollLeft &&
-        startColIdx < $visibleColumns.length - 1
-      ) {
-        startColIdx++
-        rightEdge += $visibleColumns[startColIdx].width
-      }
-      let endColIdx = startColIdx + 1
-      let leftEdge = rightEdge
-      while (
-        leftEdge < $width + $scrollLeft &&
-        endColIdx < $visibleColumns.length
-      ) {
-        leftEdge += $visibleColumns[endColIdx].width
-        endColIdx++
-      }
-      const nextRenderedColumns = $visibleColumns.slice(startColIdx, endColIdx)
-
-      // Cautiously shrink the number of rendered columns.
-      // This is to avoid rapidly shrinking and growing the visible column count
-      // which results in remounting cells
-      const currentCount = get(renderedColumns).length
-      if (currentCount === nextRenderedColumns.length + 1) {
-        return $visibleColumns.slice(startColIdx, endColIdx + 1)
-      } else {
-        return nextRenderedColumns
-      }
-    },
-    []
-  )
-
-  const hiddenColumnsWidth = derived(
-    [renderedColumns, visibleColumns],
-    ([$renderedColumns, $visibleColumns]) => {
-      const idx = $visibleColumns.findIndex(
-        col => col.name === $renderedColumns[0]?.name
-      )
-      let width = 0
-      if (idx > 0) {
-        for (let i = 0; i < idx; i++) {
-          width += $visibleColumns[i].width
-        }
-      }
-      return width
-    },
-    0
-  )
-
-  // Determine the row index at which we should start vertically inverting cell
-  // dropdowns
-  const rowVerticalInversionIndex = derived(
-    [visualRowCapacity, rowHeight],
-    ([$visualRowCapacity, $rowHeight]) => {
-      return (
-        $visualRowCapacity - Math.ceil(MaxCellRenderHeight / $rowHeight) - 2
-      )
-    }
-  )
-
-  // Determine the column index at which we should start horizontally inverting
-  // cell dropdowns
-  const columnHorizontalInversionIndex = derived(
-    [renderedColumns, scrollLeft, width],
-    ([$renderedColumns, $scrollLeft, $width]) => {
-      const cutoff = $width + $scrollLeft - ScrollBarSize * 3
-      let inversionIdx = $renderedColumns.length
-      for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
-        const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
-        if (rightEdge + MaxCellRenderWidthOverflow < cutoff) {
-          break
-        }
-      }
-      return inversionIdx
-    }
-  )
-
-  return {
-    scrolledRowCount,
-    visualRowCapacity,
-    renderedRows,
-    renderedColumns,
-    hiddenColumnsWidth,
-    rowVerticalInversionIndex,
-    columnHorizontalInversionIndex,
-  }
-}
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 2b7033ad8f..7ca21c4ff9 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,3 +1,2 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
-export { Grid } from "./grid"
diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js
index f68b37dcca..9b687e9844 100644
--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/packages/frontend-core/src/fetch/DataFetch.js
@@ -21,11 +21,11 @@ export default class DataFetch {
     this.API = null
 
     // Feature flags
-    this.features = {
+    this.featureStore = writable({
       supportsSearch: false,
       supportsSort: false,
       supportsPagination: false,
-    }
+    })
 
     // Config
     this.options = {
@@ -56,7 +56,6 @@ export default class DataFetch {
       pageNumber: 0,
       cursor: null,
       cursors: [],
-      resetKey: Math.random(),
     })
 
     // Merge options with their default values
@@ -82,14 +81,17 @@ export default class DataFetch {
     this.prevPage = this.prevPage.bind(this)
 
     // Derive certain properties to return
-    this.derivedStore = derived(this.store, $store => {
-      return {
-        ...$store,
-        ...this.features,
-        hasNextPage: this.hasNextPage($store),
-        hasPrevPage: this.hasPrevPage($store),
+    this.derivedStore = derived(
+      [this.store, this.featureStore],
+      ([$store, $featureStore]) => {
+        return {
+          ...$store,
+          ...$featureStore,
+          hasNextPage: this.hasNextPage($store),
+          hasPrevPage: this.hasPrevPage($store),
+        }
       }
-    })
+    )
 
     // Mark as loaded if we have no datasource
     if (!this.options.datasource) {
@@ -118,11 +120,11 @@ export default class DataFetch {
     // Fetch datasource definition and determine feature flags
     const definition = await this.getDefinition(datasource)
     const features = this.determineFeatureFlags(definition)
-    this.features = {
+    this.featureStore.set({
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
       supportsPagination: paginate && !!features?.supportsPagination,
-    }
+    })
 
     // Fetch and enrich schema
     let schema = this.getSchema(datasource, definition)
@@ -136,17 +138,11 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the primary display and fallback to first column
+    // If no sort column, use the first field in the schema
     if (!this.options.sortColumn) {
-      let newSortColumn
-      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
-        newSortColumn = definition.primaryDisplay
-      } else {
-        newSortColumn = Object.keys(schema)[0]
-      }
-      this.options.sortColumn = newSortColumn
+      this.options.sortColumn = Object.keys(schema)[0]
     }
-    const { sortOrder, sortColumn } = this.options
+    const { sortColumn } = this.options
 
     // Determine what sort type to use
     let sortType = "string"
@@ -171,8 +167,6 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
-      sortOrder,
-      sortColumn,
     }))
 
     // Actually fetch data
@@ -186,7 +180,6 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
-      resetKey: Math.random(),
     }))
   }
 
@@ -196,22 +189,23 @@ export default class DataFetch {
   async getPage() {
     const { sortColumn, sortOrder, sortType, limit } = this.options
     const { query } = get(this.store)
+    const features = get(this.featureStore)
 
     // Get the actual data
     let { rows, info, hasNextPage, cursor, error } = await this.getData()
 
     // If we don't support searching, do a client search
-    if (!this.features.supportsSearch) {
+    if (!features.supportsSearch) {
       rows = runLuceneQuery(rows, query)
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!this.features.supportsSort) {
+    if (!features.supportsSort) {
       rows = luceneSort(rows, sortColumn, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit
-    if (!this.features.supportsPagination) {
+    if (!features.supportsPagination) {
       rows = luceneLimit(rows, limit)
     }
 
diff --git a/packages/frontend-core/src/fetch/QueryFetch.js b/packages/frontend-core/src/fetch/QueryFetch.js
index 456abaec79..65f0a4f130 100644
--- a/packages/frontend-core/src/fetch/QueryFetch.js
+++ b/packages/frontend-core/src/fetch/QueryFetch.js
@@ -31,7 +31,7 @@ export default class QueryFetch extends DataFetch {
 
   async getData() {
     const { datasource, limit, paginate } = this.options
-    const { supportsPagination } = this.features
+    const { supportsPagination } = get(this.featureStore)
     const { cursor, definition } = get(this.store)
     const type = definition?.fields?.pagination?.type
 
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index e311452262..f3763819d4 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -13,9 +13,6 @@
     --spectrum-global-color-gray-800: hsl(var(--hue), var(--sat), 85%);
     --spectrum-global-color-gray-900: hsl(var(--hue), var(--sat), 95%);
 
-    /* Custom additions */
     --modal-background: var(--spectrum-global-color-gray-50);
-    --drop-shadow: rgba(0, 0, 0, 0.25) !important;
-    --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
 
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index d47dbe8aa8..11c7a3aea1 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -46,8 +46,5 @@
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
   --spectrum-alias-background-color-hover-overlay: rgba(169, 177, 193, 0.1);
 
-  /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
-  --drop-shadow: rgba(0, 0, 0, 0.15) !important;
-  --spectrum-global-color-blue-100: rgb(56, 65, 84) !important;
 }
diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js
index 46d8395f77..d4cf579af1 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -86,23 +86,3 @@ export const throttle = (callback, minDelay = 1000) => {
   }
   return invoke
 }
-
-/**
- * Utility to debounce DOM activities using requestAnimationFrame
- * @param callback the function to run
- * @returns {Function}
- */
-export const domDebounce = callback => {
-  let active = false
-  let lastParams
-  return (...params) => {
-    lastParams = params
-    if (!active) {
-      active = true
-      requestAnimationFrame(() => {
-        callback(...lastParams)
-        active = false
-      })
-    }
-  }
-}
diff --git a/packages/server/package.json b/packages/server/package.json
index 0e254e6866..97ba0bd36d 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -65,7 +65,6 @@
     "bull": "4.10.1",
     "chmodr": "1.2.0",
     "chokidar": "3.5.3",
-    "cookies": "0.8.0",
     "csvtojson": "2.0.10",
     "curlconverter": "3.21.0",
     "dd-trace": "3.13.2",
@@ -109,7 +108,7 @@
     "redis": "4",
     "server-destroy": "1.0.1",
     "snowflake-promise": "^4.5.0",
-    "socket.io": "4.6.1",
+    "socket.io": "^4.5.1",
     "svelte": "3.49.0",
     "swagger-parser": "10.0.3",
     "tar": "6.1.11",
diff --git a/packages/server/src/api/controllers/plugin/index.ts b/packages/server/src/api/controllers/plugin/index.ts
index 31a3468178..e8ae847fc6 100644
--- a/packages/server/src/api/controllers/plugin/index.ts
+++ b/packages/server/src/api/controllers/plugin/index.ts
@@ -2,7 +2,7 @@ import { npmUpload, urlUpload, githubUpload } from "./uploaders"
 import { plugins as pluginCore } from "@budibase/backend-core"
 import { PluginType, FileType, PluginSource } from "@budibase/types"
 import env from "../../../environment"
-import { clientAppSocket } from "../../../websockets"
+import { ClientAppSocket } from "../../../websocket"
 import sdk from "../../../sdk"
 import { sdk as pro } from "@budibase/pro"
 
@@ -71,7 +71,7 @@ export async function create(ctx: any) {
 
     const doc = await pro.plugins.storePlugin(metadata, directory, source)
 
-    clientAppSocket.emit("plugins-update", { name, hash: doc.hash })
+    ClientAppSocket.emit("plugins-update", { name, hash: doc.hash })
     ctx.body = {
       message: "Plugin uploaded successfully",
       plugins: [doc],
diff --git a/packages/server/src/api/controllers/table/utils.ts b/packages/server/src/api/controllers/table/utils.ts
index 1e57707cd0..cf1883c083 100644
--- a/packages/server/src/api/controllers/table/utils.ts
+++ b/packages/server/src/api/controllers/table/utils.ts
@@ -124,8 +124,7 @@ export function importToRows(
     for (const [fieldName, schema] of Object.entries(table.schema)) {
       // check whether the options need to be updated for inclusion as part of the data import
       if (
-        (schema.type === FieldTypes.OPTIONS ||
-          schema.type === FieldTypes.ARRAY) &&
+        schema.type === FieldTypes.OPTIONS &&
         row[fieldName] &&
         (!schema.constraints!.inclusion ||
           schema.constraints!.inclusion.indexOf(row[fieldName]) === -1)
diff --git a/packages/server/src/app.ts b/packages/server/src/app.ts
index f8f82f9fdc..230904f405 100644
--- a/packages/server/src/app.ts
+++ b/packages/server/src/app.ts
@@ -15,8 +15,8 @@ import * as api from "./api"
 import * as automations from "./automations"
 import { Thread } from "./threads"
 import * as redis from "./utilities/redis"
-import { initialise as initialiseWebsockets } from "./websockets"
 import { events, logging, middleware, timers } from "@budibase/backend-core"
+import { initialise as initialiseWebsockets } from "./websocket"
 import { startup } from "./startup"
 const Sentry = require("@sentry/node")
 const destroyable = require("server-destroy")
@@ -61,7 +61,7 @@ if (env.isProd()) {
 
 const server = http.createServer(app.callback())
 destroyable(server)
-initialiseWebsockets(app, server)
+initialiseWebsockets(server)
 
 let shuttingDown = false,
   errCode = 0
diff --git a/packages/server/src/sdk/plugins/plugins.ts b/packages/server/src/sdk/plugins/plugins.ts
index 02000410bf..58670146ec 100644
--- a/packages/server/src/sdk/plugins/plugins.ts
+++ b/packages/server/src/sdk/plugins/plugins.ts
@@ -7,7 +7,7 @@ import {
 } from "@budibase/backend-core"
 import { fileUpload } from "../../api/controllers/plugin/file"
 import env from "../../environment"
-import { clientAppSocket } from "../../websockets"
+import { ClientAppSocket } from "../../websocket"
 import { sdk as pro } from "@budibase/pro"
 
 export async function fetch(type?: PluginType) {
@@ -36,6 +36,6 @@ export async function processUploaded(plugin: FileType, source?: PluginSource) {
   }
 
   const doc = await pro.plugins.storePlugin(metadata, directory, source)
-  clientAppSocket.emit("plugin-update", { name: doc.name, hash: doc.hash })
+  ClientAppSocket.emit("plugin-update", { name: doc.name, hash: doc.hash })
   return doc
 }
diff --git a/packages/server/src/websocket.ts b/packages/server/src/websocket.ts
new file mode 100644
index 0000000000..d6d91b0ca0
--- /dev/null
+++ b/packages/server/src/websocket.ts
@@ -0,0 +1,26 @@
+import { Server } from "socket.io"
+import http from "http"
+
+class Websocket {
+  socketServer: Server
+
+  constructor(server: http.Server, path: string) {
+    this.socketServer = new Server(server, {
+      path,
+    })
+  }
+
+  // Emit an event to all sockets
+  emit(event: string, payload: any) {
+    this.socketServer.sockets.emit(event, payload)
+  }
+}
+
+// Likely to be more socket instances in future
+let ClientAppSocket: Websocket
+
+export const initialise = (server: http.Server) => {
+  ClientAppSocket = new Websocket(server, "/socket/client")
+}
+
+export { ClientAppSocket }
diff --git a/packages/server/src/websockets/client.ts b/packages/server/src/websockets/client.ts
deleted file mode 100644
index d59325f66e..0000000000
--- a/packages/server/src/websockets/client.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Socket from "./websocket"
-import authorized from "../middleware/authorized"
-import http from "http"
-import Koa from "koa"
-import { permissions } from "@budibase/backend-core"
-
-export default class ClientAppWebsocket extends Socket {
-  constructor(app: Koa, server: http.Server) {
-    super(app, server, "/socket/client", [authorized(permissions.BUILDER)])
-  }
-}
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
deleted file mode 100644
index 886784cd2c..0000000000
--- a/packages/server/src/websockets/grid.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import authorized from "../middleware/authorized"
-import Socket from "./websocket"
-import { permissions } from "@budibase/backend-core"
-import http from "http"
-import Koa from "koa"
-
-export default class GridSocket extends Socket {
-  constructor(app: Koa, server: http.Server) {
-    super(app, server, "/socket/grid", [authorized(permissions.BUILDER)])
-
-    this.io.on("connection", socket => {
-      const user = socket.data.user
-      console.log(`Spreadsheet user connected: ${user?.id}`)
-
-      // Socket state
-      let currentRoom: string
-
-      // Initial identification of connected spreadsheet
-      socket.on("select-table", async (tableId, callback) => {
-        // Leave current room
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-disconnect", socket.data.user)
-          socket.leave(currentRoom)
-        }
-
-        // Join new room
-        currentRoom = tableId
-        socket.join(currentRoom)
-        socket.to(currentRoom).emit("user-update", socket.data.user)
-
-        // Reply with all users in current room
-        const sockets = await this.io.in(currentRoom).fetchSockets()
-        callback({
-          users: sockets.map(socket => socket.data.user),
-          id: user.id,
-        })
-      })
-
-      // Handle users selecting a new cell
-      socket.on("select-cell", cellId => {
-        socket.data.user.selectedCellId = cellId
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-update", socket.data.user)
-        }
-      })
-
-      // Disconnection cleanup
-      socket.on("disconnect", () => {
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-disconnect", socket.data.user)
-        }
-      })
-    })
-  }
-}
diff --git a/packages/server/src/websockets/index.ts b/packages/server/src/websockets/index.ts
deleted file mode 100644
index 60cdfb8aed..0000000000
--- a/packages/server/src/websockets/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import http from "http"
-import Koa from "koa"
-import GridSocket from "./grid"
-import ClientAppSocket from "./client"
-
-let clientAppSocket: ClientAppSocket
-let gridSocket: GridSocket
-
-export const initialise = (app: Koa, server: http.Server) => {
-  clientAppSocket = new ClientAppSocket(app, server)
-  gridSocket = new GridSocket(app, server)
-}
-
-export { clientAppSocket, gridSocket }
diff --git a/packages/server/src/websockets/websocket.ts b/packages/server/src/websockets/websocket.ts
deleted file mode 100644
index 1b34168f14..0000000000
--- a/packages/server/src/websockets/websocket.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Server } from "socket.io"
-import http from "http"
-import Koa from "koa"
-import Cookies from "cookies"
-import { userAgent } from "koa-useragent"
-import { auth } from "@budibase/backend-core"
-import currentApp from "../middleware/currentapp"
-
-export default class Socket {
-  io: Server
-
-  constructor(
-    app: Koa,
-    server: http.Server,
-    path: string,
-    additionalMiddlewares?: any[]
-  ) {
-    this.io = new Server(server, {
-      path,
-    })
-
-    // Attach default middlewares
-    const authenticate = auth.buildAuthMiddleware([], {
-      publicAllowed: true,
-    })
-    const middlewares = [
-      userAgent,
-      authenticate,
-      currentApp,
-      ...(additionalMiddlewares || []),
-    ]
-
-    // Apply middlewares
-    this.io.use(async (socket, next) => {
-      // Build fake koa context
-      const res = new http.ServerResponse(socket.request)
-      const ctx: any = {
-        ...app.createContext(socket.request, res),
-
-        // Additional overrides needed to make our middlewares work with this
-        // fake koa context
-        cookies: new Cookies(socket.request, res),
-        get: (field: string) => socket.request.headers[field],
-        throw: (code: number, message: string) => {
-          throw new Error(message)
-        },
-
-        // Needed for koa-useragent middleware
-        headers: socket.request.headers,
-        header: socket.request.headers,
-
-        // We don't really care about the path since it will never contain
-        // an app ID
-        path: "/socket",
-      }
-
-      // Run all koa middlewares
-      try {
-        for (let [idx, middleware] of middlewares.entries()) {
-          await middleware(ctx, () => {
-            if (idx === middlewares.length - 1) {
-              // Middlewares are finished.
-              // Extract some data from our enriched koa context to persist
-              // as metadata for the socket
-              socket.data.user = {
-                id: ctx.user._id,
-                email: ctx.user.email,
-              }
-              next()
-            }
-          })
-        }
-      } catch (error: any) {
-        next(error)
-      }
-    })
-  }
-
-  // Emit an event to all sockets
-  emit(event: string, payload: any) {
-    this.io.sockets.emit(event, payload)
-  }
-}
diff --git a/packages/types/src/documents/app/table.ts b/packages/types/src/documents/app/table.ts
index 849009098b..929409d0e9 100644
--- a/packages/types/src/documents/app/table.ts
+++ b/packages/types/src/documents/app/table.ts
@@ -31,8 +31,6 @@ export interface FieldSchema {
   timeOnly?: boolean
   lastID?: number
   useRichText?: boolean | null
-  order?: number
-  width?: number
   meta?: {
     toTable: string
     toKey: string
@@ -79,7 +77,6 @@ export interface Table extends Document {
   indexes?: { [key: string]: any }
   rows?: { [key: string]: any }
   created?: boolean
-  rowHeight?: number
 }
 
 export interface TableRequest extends Table {
diff --git a/yarn.lock b/yarn.lock
index 14f659402a..06c18db9f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8489,7 +8489,7 @@ cookiejar@^2.1.2, cookiejar@^2.1.3:
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.4.tgz#ee669c1fea2cf42dc31585469d193fef0d65771b"
   integrity sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==
 
-cookies@0.8.0, cookies@~0.8.0:
+cookies@~0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
   integrity sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==
@@ -8961,7 +8961,7 @@ dateformat@^4.5.1, dateformat@^4.6.3:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
   integrity sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==
 
-dayjs@^1.10.4, dayjs@^1.10.5, dayjs@^1.11.2, dayjs@^1.11.7:
+dayjs@^1.10.4, dayjs@^1.10.5, dayjs@^1.11.2:
   version "1.11.7"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
@@ -22156,7 +22156,7 @@ socket.io-adapter@~2.5.2:
   dependencies:
     ws "~8.11.0"
 
-socket.io-client@^4.5.1, socket.io-client@^4.6.1:
+socket.io-client@^4.5.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.6.1.tgz#80d97d5eb0feca448a0fb6d69a7b222d3d547eab"
   integrity sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==
@@ -22174,7 +22174,7 @@ socket.io-parser@~4.2.1:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-socket.io@4.6.1:
+socket.io@^4.5.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.6.1.tgz#62ec117e5fce0692fa50498da9347cfb52c3bc70"
   integrity sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA==
@@ -22991,7 +22991,7 @@ svelte-dnd-action@^0.9.8:
   resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.9.22.tgz#003eee9dddb31d8c782f6832aec8b1507fff194d"
   integrity sha512-lOQJsNLM1QWv5mdxIkCVtk6k4lHCtLgfE59y8rs7iOM6erchbLC9hMEFYSveZz7biJV0mpg7yDSs4bj/RT/YkA==
 
-svelte-flatpickr@^3.1.0, svelte-flatpickr@^3.2.3, svelte-flatpickr@^3.3.2:
+svelte-flatpickr@^3.1.0, svelte-flatpickr@^3.2.3:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.3.2.tgz#f08bcde83d439cb30df6fd07b974d87371f130c1"
   integrity sha512-VNJLYyLRDplI63oWX5hJylzAJc2VhTh3z9SNecfjtuPZmP6FZPpg9Fw7rXpkEV2DPovIWj2PtaVxB6Kp9r423w==