diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 99535e6b33..1b814be96d 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.2.3",
+    "svelte-flatpickr": "^3.3.2",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 60c8bec80b..e9eb3b3471 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--size{size}"
+        class="spectrum-Icon spectrum-Icon--sizeS"
         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 bdcbaa5d88..5b7a059493 100644
--- a/packages/bbui/src/Actions/click_outside.js
+++ b/packages/bbui/src/Actions/click_outside.js
@@ -6,6 +6,9 @@ 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
@@ -29,6 +32,7 @@ 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 e2ef4e65ce..64d851b1e4 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">
+<div class="container" class:compact>
   {#if selectedImage}
     {#if gallery}
       <div class="gallery">
@@ -355,6 +355,9 @@
   input[type="file"] {
     display: none;
   }
+  .compact .spectrum-Dropzone {
+    padding: 6px 0 !important;
+  }
 
   .gallery {
     display: flex;
@@ -379,6 +382,17 @@
     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;
@@ -447,6 +461,13 @@
   .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 1d04c210f4..ea9b5858f5 100644
--- a/packages/bbui/src/Form/Core/Multiselect.svelte
+++ b/packages/bbui/src/Form/Core/Multiselect.svelte
@@ -20,12 +20,13 @@
 
   const dispatch = createEventDispatcher()
 
-  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: selectedLookupMap = getSelectedLookupMap(arrayValue)
   $: optionLookupMap = getOptionLookupMap(options)
 
-  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+  $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
@@ -84,7 +85,7 @@
   {readonly}
   {fieldText}
   {options}
-  isPlaceholder={!value?.length}
+  isPlaceholder={!arrayValue.length}
   {autocomplete}
   bind:fetchTerm
   {useFetch}
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
index 5b82c0ebea..2a6fa1c57b 100644
--- a/packages/bbui/src/Form/Dropzone.svelte
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -16,6 +16,7 @@
   export let gallery = true
   export let fileTags = []
   export let maximum = undefined
+  export let compact = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -37,6 +38,7 @@
     {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 6ba67ca0f5..9f951a6a7e 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -20,6 +20,7 @@
   export let dismissible = true
   export let offset = 5
   export let customHeight
+  export let animate = true
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -78,7 +79,7 @@
       class="spectrum-Popover is-open"
       role="presentation"
       style="height: {customHeight}"
-      transition:fly|local={{ y: -20, duration: 200 }}
+      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
     >
       <slot />
     </div>
diff --git a/packages/bbui/src/Table/ArrayRenderer.svelte b/packages/bbui/src/Table/ArrayRenderer.svelte
index 3755850666..637454dbca 100644
--- a/packages/bbui/src/Table/ArrayRenderer.svelte
+++ b/packages/bbui/src/Table/ArrayRenderer.svelte
@@ -5,8 +5,9 @@
 
   const displayLimit = 5
 
-  $: badges = Array.isArray(value) ? value.slice(0, displayLimit) : []
-  $: leftover = (value?.length ?? 0) - badges.length
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: badges = arrayValue.slice(0, displayLimit)
+  $: leftover = arrayValue.length - badges.length
 </script>
 
 {#each badges as badge}
diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte
index 19d361c8b1..5bb4ed4523 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) {
+      if (fieldSchema.width && typeof fieldSchema.width === "string") {
         style += ` ${fieldSchema.width}`
       } else {
         style += " minmax(auto, 1fr)"
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index ef3483d3df..343aa77b27 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -97,4 +97,22 @@
 
 a {
   text-decoration: none;
-}
\ No newline at end of file
+}
+
+/* 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);
+}
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 0c5adfc18c..acb3dacf93 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -1,286 +1,74 @@
 <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 CreateEditRow from "./modals/CreateEditRow.svelte"
-  import {
-    Pagination,
-    Heading,
-    Body,
-    Layout,
-    notifications,
-  } from "@budibase/bbui"
-  import { fetchData } from "@budibase/frontend-core"
+  import { Grid } 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"
 
-  let hideAutocolumns = true
-  let filters
+  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 },
+  }
 
-  $: 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 = []
-  }
-
-  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()
-  }
+  $: isUsersTable = id === TableNames.USERS
+  $: isInternal = $tables.selected?.type !== "external"
 </script>
 
-<div>
-  <Table
-    title={$tables.selected?.name}
-    schema={enrichedSchema}
-    {type}
+<div class="wrapper">
+  <Grid
+    {API}
     tableId={id}
-    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
+    allowAddRows={!isUsersTable}
+    allowDeleteRows={!isUsersTable}
+    schemaOverrides={isUsersTable ? userSchemaOverrides : null}
+    on:updatetable={e => tables.updateTable(e.detail)}
   >
-    <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}
+    <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>
 
 <style>
-  .pagination {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    margin-top: var(--spacing-xl);
-  }
-  .buttons {
+  .wrapper {
     flex: 1 1 auto;
+    margin: -28px -40px -40px -40px;
     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);
+    flex-direction: column;
+    background: var(--background);
+    overflow: hidden;
   }
 </style>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index a0e777c331..4df6e9a306 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -1,15 +1,10 @@
 <script>
   import { fade } from "svelte/transition"
   import { goto, params } from "@roxi/routify"
-  import { Table, Modal, Heading, notifications, Layout } from "@budibase/bbui"
-  import { API } from "api"
+  import { Table, Heading, Layout } from "@budibase/bbui"
   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,
@@ -22,7 +17,6 @@
   export let data = []
   export let tableId
   export let title
-  export let allowEditing = false
   export let loading = false
   export let hideAutocolumns
   export let rowCount
@@ -32,12 +26,7 @@
   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
@@ -92,36 +81,6 @@
       `/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">
@@ -138,16 +97,6 @@
     {/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}
@@ -160,13 +109,7 @@
         {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
       >
@@ -176,42 +119,6 @@
   {/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 cf525f3ef3..056bc33994 100644
--- a/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
@@ -57,7 +57,6 @@
   {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 7145171ee1..48d8f0ebab 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
@@ -9,7 +9,6 @@
 
 <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
deleted file mode 100644
index 8644ee86da..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<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
deleted file mode 100644
index 1676a5b23c..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<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
deleted file mode 100644
index 0133b5bd79..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<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 4241013d89..6c718d79ae 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" size="s" warning quiet on:click={modal.show}>
+<Button icon="Delete" 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 ad6a685d34..87ca2fa142 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
@@ -1,15 +1,13 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
-<div>
-  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
-    Edit roles
-  </Button>
-</div>
+<ActionButton icon="UsersLock" quiet on:click={modal.show}>
+  Edit roles
+</ActionButton>
 <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 e188783f7d..3d837a54f0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
@@ -7,15 +7,23 @@
   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
@@ -28,15 +36,9 @@
   }
 </script>
 
-{#if table.sourceId}
+{#if datasource}
   <div>
-    <ActionButton
-      icon="DataCorrelated"
-      primary
-      size="S"
-      quiet
-      on:click={modal.show}
-    >
+    <ActionButton icon="DataCorrelated" primary 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 d3ad45dde4..fd0d64f6cd 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
@@ -11,13 +11,7 @@
   let modal
 </script>
 
-<ActionButton
-  {disabled}
-  icon="DataDownload"
-  size="S"
-  quiet
-  on:click={modal.show}
->
+<ActionButton {disabled} icon="DataDownload" 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 8b313e8f9b..79dbea4b6b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
@@ -10,7 +10,6 @@
 <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 e9b042a653..819ebcec3b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
@@ -11,7 +11,6 @@
 <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 4497ec3508..88ef30210a 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" size="S" quiet on:click={modal.show} {disabled}>
+<ActionButton icon="DataUpload" 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 7a9e582c2d..4d5faca4c6 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
@@ -4,6 +4,7 @@
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
   export let resourceId
+  export let disabled = false
 
   let modal
   let resourcePermissions
@@ -14,7 +15,7 @@
   }
 </script>
 
-<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+<ActionButton icon="LockClosed" quiet on:click={openDropdown} {disabled}>
   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 5db4eb5288..5af8d1bac8 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -18,11 +18,10 @@
 
 <ActionButton
   icon="Filter"
-  size="S"
   quiet
   {disabled}
   on:click={modal.show}
-  active={tempValue?.length > 0}
+  selected={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 2e2026baed..bad3982b9b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
@@ -9,7 +9,6 @@
 
 <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
new file mode 100644
index 0000000000..1c11211570
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000000..1661808e9d
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridExportButton.svelte
@@ -0,0 +1,21 @@
+<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
new file mode 100644
index 0000000000..aff98deaaf
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
@@ -0,0 +1,20 @@
+<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
new file mode 100644
index 0000000000..5aa530b028
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000000..d41d0a1a25
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridManageAccessButton.svelte
@@ -0,0 +1,8 @@
+<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
new file mode 100644
index 0000000000..460391366f
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridRelationshipButton.svelte
@@ -0,0 +1,13 @@
+<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 b4293a2a0a..8a4a6d3012 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -182,8 +182,12 @@
         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}`)
     }
   }
@@ -199,7 +203,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 2bca6474d2..ebff97e0fc 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 {
-      await API.saveRow({ ...row, tableId: table._id })
+      const res = await API.saveRow({ ...row, tableId: table._id })
       notifications.success("Row saved successfully")
-      dispatch("updaterows")
+      dispatch("updaterows", res._id)
     } 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 d39740b892..4c069402a7 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 {
-      await API.saveRow({ ...row, tableId: table._id })
+      const res = await API.saveRow({ ...row, tableId: table._id })
       notifications.success("User saved successfully")
-      dispatch("updaterows")
+      dispatch("updaterows", res.id)
     } 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
new file mode 100644
index 0000000000..9e386ae140
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte
@@ -0,0 +1,15 @@
+<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
new file mode 100644
index 0000000000..e45ffc586e
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte
@@ -0,0 +1,28 @@
+<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
new file mode 100644
index 0000000000..3297037265
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridEditColumnModal.svelte
@@ -0,0 +1,24 @@
+<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
new file mode 100644
index 0000000000..34a255e0f6
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/grid/GridEditUserModal.svelte
@@ -0,0 +1,25 @@
+<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 182ac49314..94b9020203 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -13,6 +13,13 @@
   $: 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}
@@ -25,7 +32,7 @@
         text={table.name}
         selected={$isActive("./table/:tableId") &&
           $tables.selected?._id === table._id}
-        on:click={() => $goto(`./table/${table._id}`)}
+        on:click={() => selectTable(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 cf976a799e..ae946dc10c 100644
--- a/packages/builder/src/components/commandPalette/CommandPalette.svelte
+++ b/packages/builder/src/components/commandPalette/CommandPalette.svelte
@@ -325,9 +325,4 @@
     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 96c0e2154a..34d083a096 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -59,9 +59,7 @@
   <div class="app-row-actions">
     <AppLockModal {app} buttonSize="M" />
     <Button size="S" secondary on:click={goToOverview}>Manage</Button>
-    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
-      Edit
-    </Button>
+    <Button size="S" primary on:click={goToBuilder}>Edit</Button>
   </div>
 </div>
 
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 5e9a35706e..bc1f55d9d3 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -70,7 +70,6 @@ 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 5da16d2b50..d35e7cd515 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,6 +28,7 @@
       "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 3b7ce35dde..75679532f3 100644
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@@ -135,6 +135,24 @@ 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,
@@ -145,6 +163,7 @@ export function createTablesStore() {
     delete: deleteTable,
     saveField,
     deleteField,
+    updateTable,
   }
 }
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c4408b9202..f27d090617 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5161,5 +5161,36 @@
       "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 d69170702c..ce8722bb9b 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}
+    {#each $builderStore.usedPlugins as plugin (plugin.hash)}
       <script src={`${plugin.jsUrl}`}></script>
     {/each}
   {/if}
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 264cc85626..c9ff1eba36 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -12,6 +12,7 @@ import {
   environmentStore,
   sidePanelStore,
   dndIsDragging,
+  confirmationStore,
 } from "stores"
 import { styleable } from "utils/styleable"
 import { linkable } from "utils/linkable"
@@ -35,6 +36,7 @@ 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 b7fc017247..b15d2698b4 100644
--- a/packages/client/src/utils/domDebounce.js
+++ b/packages/client/src/utils/domDebounce.js
@@ -1,12 +1,14 @@
-export const domDebounce = callback => {
+export const domDebounce = (callback, extractParams = x => x) => {
   let active = false
-  return e => {
+  let lastParams
+  return (...params) => {
+    lastParams = extractParams(...params)
     if (!active) {
-      window.requestAnimationFrame(() => {
-        callback(e)
+      active = true
+      requestAnimationFrame(() => {
+        callback(lastParams)
         active = false
       })
-      active = true
     }
   }
 }
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 4f1cc2930d..48161defb8 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -8,7 +8,9 @@
   "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
new file mode 100644
index 0000000000..2eb191e113
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -0,0 +1,153 @@
+<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
new file mode 100644
index 0000000000..52aecb07a7
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
@@ -0,0 +1,44 @@
+<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
new file mode 100644
index 0000000000..d97edabc01
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -0,0 +1,86 @@
+<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
new file mode 100644
index 0000000000..0112bcda15
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@@ -0,0 +1,77 @@
+<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
new file mode 100644
index 0000000000..b4db795e44
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/FormulaCell.svelte
@@ -0,0 +1,5 @@
+<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
new file mode 100644
index 0000000000..52dbed641c
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -0,0 +1,159 @@
+<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
new file mode 100644
index 0000000000..890f314e2e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -0,0 +1,237 @@
+<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
new file mode 100644
index 0000000000..30803fd862
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/JSONCell.svelte
@@ -0,0 +1,36 @@
+<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
new file mode 100644
index 0000000000..f41e206d1d
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -0,0 +1,117 @@
+<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
new file mode 100644
index 0000000000..403aeaf8d8
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/MultiSelectCell.svelte
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 0000000000..00c101026e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 0000000000..37c37fcd70
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -0,0 +1,239 @@
+<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
new file mode 100644
index 0000000000..08dabe0fec
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -0,0 +1,503 @@
+<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
new file mode 100644
index 0000000000..73fb83dfbf
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -0,0 +1,110 @@
+<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
new file mode 100644
index 0000000000..e04c1ee627
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
@@ -0,0 +1,16 @@
+<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
new file mode 100644
index 0000000000..6b8e259999
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/AddRowButton.svelte
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000000..e5069388e7
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/BetaButton.svelte
@@ -0,0 +1,46 @@
+<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
new file mode 100644
index 0000000000..9380228f2c
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/DeleteButton.svelte
@@ -0,0 +1,72 @@
+<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
new file mode 100644
index 0000000000..6c9d1be8ac
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -0,0 +1,91 @@
+<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
new file mode 100644
index 0000000000..0fcbbed089
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
@@ -0,0 +1,70 @@
+<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
new file mode 100644
index 0000000000..471e28a2ab
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -0,0 +1,107 @@
+<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
new file mode 100644
index 0000000000..25747ec142
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/index.js
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000..e3eec9f830
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/Avatar.svelte
@@ -0,0 +1,24 @@
+<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
new file mode 100644
index 0000000000..e6bc3e05e4
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -0,0 +1,250 @@
+<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
new file mode 100644
index 0000000000..5c61fde3ef
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -0,0 +1,38 @@
+<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
new file mode 100644
index 0000000000..eb1fd8b96a
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@@ -0,0 +1,57 @@
+<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
new file mode 100644
index 0000000000..0d241147a6
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -0,0 +1,84 @@
+<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
new file mode 100644
index 0000000000..caf8ac280b
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -0,0 +1,30 @@
+<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
new file mode 100644
index 0000000000..5b92bc30fc
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/NewRowTop.svelte
@@ -0,0 +1,247 @@
+<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
new file mode 100644
index 0000000000..6115b1f567
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/RowCount.svelte
@@ -0,0 +1,9 @@
+<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
new file mode 100644
index 0000000000..cbf74a0d22
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -0,0 +1,245 @@
+<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
new file mode 100644
index 0000000000..be33b6713d
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
@@ -0,0 +1,20 @@
+<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
new file mode 100644
index 0000000000..e5427106a7
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000000..1c486858b2
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/events.js
@@ -0,0 +1,29 @@
+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
new file mode 100644
index 0000000000..104984ca4e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/renderers.js
@@ -0,0 +1,29 @@
+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
new file mode 100644
index 0000000000..5b1d01ee36
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/utils.js
@@ -0,0 +1,26 @@
+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
new file mode 100644
index 0000000000..af2e247f98
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/lib/websocket.js
@@ -0,0 +1,63 @@
+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
new file mode 100644
index 0000000000..c3ca6103c7
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -0,0 +1,180 @@
+<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
new file mode 100644
index 0000000000..b986d13b3d
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@@ -0,0 +1,95 @@
+<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
new file mode 100644
index 0000000000..f684f2bc9b
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
@@ -0,0 +1,63 @@
+<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
new file mode 100644
index 0000000000..42fb796ac9
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
@@ -0,0 +1,70 @@
+<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
new file mode 100644
index 0000000000..f92ae1b26b
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
@@ -0,0 +1,121 @@
+<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
new file mode 100644
index 0000000000..c0939f7389
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/bounds.js
@@ -0,0 +1,16 @@
+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
new file mode 100644
index 0000000000..cf59dafc54
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/clipboard.js
@@ -0,0 +1,34 @@
+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
new file mode 100644
index 0000000000..e953977487
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -0,0 +1,206 @@
+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
new file mode 100644
index 0000000000..aa552a9ffe
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@@ -0,0 +1,48 @@
+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
new file mode 100644
index 0000000000..3f34c0a266
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/menu.js
@@ -0,0 +1,49 @@
+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
new file mode 100644
index 0000000000..c6a856e229
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/pagination.js
@@ -0,0 +1,24 @@
+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
new file mode 100644
index 0000000000..de343987db
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/reorder.js
@@ -0,0 +1,155 @@
+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
new file mode 100644
index 0000000000..d007e70c4e
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/resize.js
@@ -0,0 +1,124 @@
+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
new file mode 100644
index 0000000000..30e0fad96a
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -0,0 +1,462 @@
+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
new file mode 100644
index 0000000000..c9de224181
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -0,0 +1,201 @@
+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
new file mode 100644
index 0000000000..197b3f80d2
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -0,0 +1,168 @@
+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
new file mode 100644
index 0000000000..3a6ec5fb21
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/users.js
@@ -0,0 +1,115 @@
+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
new file mode 100644
index 0000000000..9c3927f9c9
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/validation.js
@@ -0,0 +1,45 @@
+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
new file mode 100644
index 0000000000..9da3523480
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -0,0 +1,141 @@
+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 7ca21c4ff9..2b7033ad8f 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,2 +1,3 @@
 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 9b687e9844..f68b37dcca 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.featureStore = writable({
+    this.features = {
       supportsSearch: false,
       supportsSort: false,
       supportsPagination: false,
-    })
+    }
 
     // Config
     this.options = {
@@ -56,6 +56,7 @@ export default class DataFetch {
       pageNumber: 0,
       cursor: null,
       cursors: [],
+      resetKey: Math.random(),
     })
 
     // Merge options with their default values
@@ -81,17 +82,14 @@ export default class DataFetch {
     this.prevPage = this.prevPage.bind(this)
 
     // Derive certain properties to return
-    this.derivedStore = derived(
-      [this.store, this.featureStore],
-      ([$store, $featureStore]) => {
-        return {
-          ...$store,
-          ...$featureStore,
-          hasNextPage: this.hasNextPage($store),
-          hasPrevPage: this.hasPrevPage($store),
-        }
+    this.derivedStore = derived(this.store, $store => {
+      return {
+        ...$store,
+        ...this.features,
+        hasNextPage: this.hasNextPage($store),
+        hasPrevPage: this.hasPrevPage($store),
       }
-    )
+    })
 
     // Mark as loaded if we have no datasource
     if (!this.options.datasource) {
@@ -120,11 +118,11 @@ export default class DataFetch {
     // Fetch datasource definition and determine feature flags
     const definition = await this.getDefinition(datasource)
     const features = this.determineFeatureFlags(definition)
-    this.featureStore.set({
+    this.features = {
       supportsSearch: !!features?.supportsSearch,
       supportsSort: !!features?.supportsSort,
       supportsPagination: paginate && !!features?.supportsPagination,
-    })
+    }
 
     // Fetch and enrich schema
     let schema = this.getSchema(datasource, definition)
@@ -138,11 +136,17 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the first field in the schema
+    // If no sort column, use the primary display and fallback to first column
     if (!this.options.sortColumn) {
-      this.options.sortColumn = Object.keys(schema)[0]
+      let newSortColumn
+      if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
+        newSortColumn = definition.primaryDisplay
+      } else {
+        newSortColumn = Object.keys(schema)[0]
+      }
+      this.options.sortColumn = newSortColumn
     }
-    const { sortColumn } = this.options
+    const { sortOrder, sortColumn } = this.options
 
     // Determine what sort type to use
     let sortType = "string"
@@ -167,6 +171,8 @@ export default class DataFetch {
       loading: true,
       cursors: [],
       cursor: null,
+      sortOrder,
+      sortColumn,
     }))
 
     // Actually fetch data
@@ -180,6 +186,7 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
+      resetKey: Math.random(),
     }))
   }
 
@@ -189,23 +196,22 @@ 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 (!features.supportsSearch) {
+    if (!this.features.supportsSearch) {
       rows = runLuceneQuery(rows, query)
     }
 
     // If we don't support sorting, do a client-side sort
-    if (!features.supportsSort) {
+    if (!this.features.supportsSort) {
       rows = luceneSort(rows, sortColumn, sortOrder, sortType)
     }
 
     // If we don't support pagination, do a client-side limit
-    if (!features.supportsPagination) {
+    if (!this.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 65f0a4f130..456abaec79 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 } = get(this.featureStore)
+    const { supportsPagination } = this.features
     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 f3763819d4..e311452262 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -13,6 +13,9 @@
     --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 11c7a3aea1..d47dbe8aa8 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -46,5 +46,8 @@
   --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 d4cf579af1..46d8395f77 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -86,3 +86,23 @@ 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 97ba0bd36d..0e254e6866 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -65,6 +65,7 @@
     "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",
@@ -108,7 +109,7 @@
     "redis": "4",
     "server-destroy": "1.0.1",
     "snowflake-promise": "^4.5.0",
-    "socket.io": "^4.5.1",
+    "socket.io": "4.6.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 e8ae847fc6..31a3468178 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 "../../../websocket"
+import { clientAppSocket } from "../../../websockets"
 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 cf1883c083..1e57707cd0 100644
--- a/packages/server/src/api/controllers/table/utils.ts
+++ b/packages/server/src/api/controllers/table/utils.ts
@@ -124,7 +124,8 @@ 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.OPTIONS ||
+          schema.type === FieldTypes.ARRAY) &&
         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 230904f405..f8f82f9fdc 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(server)
+initialiseWebsockets(app, 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 58670146ec..02000410bf 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 "../../websocket"
+import { clientAppSocket } from "../../websockets"
 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
deleted file mode 100644
index d6d91b0ca0..0000000000
--- a/packages/server/src/websocket.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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
new file mode 100644
index 0000000000..d59325f66e
--- /dev/null
+++ b/packages/server/src/websockets/client.ts
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000000..886784cd2c
--- /dev/null
+++ b/packages/server/src/websockets/grid.ts
@@ -0,0 +1,55 @@
+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
new file mode 100644
index 0000000000..60cdfb8aed
--- /dev/null
+++ b/packages/server/src/websockets/index.ts
@@ -0,0 +1,14 @@
+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
new file mode 100644
index 0000000000..1b34168f14
--- /dev/null
+++ b/packages/server/src/websockets/websocket.ts
@@ -0,0 +1,83 @@
+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 929409d0e9..849009098b 100644
--- a/packages/types/src/documents/app/table.ts
+++ b/packages/types/src/documents/app/table.ts
@@ -31,6 +31,8 @@ export interface FieldSchema {
   timeOnly?: boolean
   lastID?: number
   useRichText?: boolean | null
+  order?: number
+  width?: number
   meta?: {
     toTable: string
     toKey: string
@@ -77,6 +79,7 @@ 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 06c18db9f9..14f659402a 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.10.4, dayjs@^1.10.5, dayjs@^1.11.2, dayjs@^1.11.7:
   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.5.1, socket.io-client@^4.6.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.5.1:
+socket.io@4.6.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.1.0, svelte-flatpickr@^3.2.3, svelte-flatpickr@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-3.3.2.tgz#f08bcde83d439cb30df6fd07b974d87371f130c1"
   integrity sha512-VNJLYyLRDplI63oWX5hJylzAJc2VhTh3z9SNecfjtuPZmP6FZPpg9Fw7rXpkEV2DPovIWj2PtaVxB6Kp9r423w==