diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 981a619ebd..33db9b60e3 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -44,13 +44,15 @@
   <Grid
     {API}
     tableId={id}
-    tableType={$tables.selected?.type}
     allowAddRows={!isUsersTable}
     allowDeleteRows={!isUsersTable}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
     on:updatetable={handleGridTableUpdate}
   >
+    <svelte:fragment slot="filter">
+      <GridFilterButton />
+    </svelte:fragment>
     <svelte:fragment slot="controls">
       {#if isInternal}
         <GridCreateViewButton />
@@ -65,7 +67,6 @@
         <GridImportButton />
       {/if}
       <GridExportButton />
-      <GridFilterButton />
       <GridAddColumnModal />
       <GridEditColumnModal />
       {#if isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index 5af8d1bac8..ce6a3f0c51 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -14,6 +14,12 @@
 
   $: tempValue = filters || []
   $: schemaFields = Object.values(schema || {})
+  $: text = getText(filters)
+
+  const getText = filters => {
+    const count = filters?.length
+    return count ? `Filter (${count})` : "Filter"
+  }
 </script>
 
 <ActionButton
@@ -23,7 +29,7 @@
   on:click={modal.show}
   selected={tempValue?.length > 0}
 >
-  Filter
+  {text}
 </ActionButton>
 <Modal bind:this={modal}>
   <ModalContent
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
index 2283862303..45e5d4e2b0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridFilterButton.svelte
@@ -4,6 +4,9 @@
 
   const { columns, tableId, filter, table } = getContext("grid")
 
+  // Wipe filter whenever table ID changes to avoid using stale filters
+  $: $tableId, filter.set([])
+
   const onFilter = e => {
     filter.set(e.detail || [])
   }
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
index 5b89d92438..a0881163b4 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridImportButton.svelte
@@ -4,12 +4,12 @@
 
   export let disabled = false
 
-  const { rows, tableId, tableType } = getContext("grid")
+  const { rows, tableId, table } = getContext("grid")
 </script>
 
 <ImportButton
   {disabled}
   tableId={$tableId}
-  {tableType}
+  tableType={$table?.type}
   on:importrows={rows.actions.refreshData}
 />
diff --git a/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte
index c020d1a7ac..1696c6ba03 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte
@@ -14,6 +14,7 @@
 
   export let tableId
   export let tableType
+
   let rows = []
   let allValid = false
   let displayColumn = null
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
index 053735cc6d..f051d68a48 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/BasicColumnEditor.svelte
@@ -2,9 +2,4 @@
   import ColumnEditor from "./ColumnEditor.svelte"
 </script>
 
-<ColumnEditor
-  {...$$props}
-  on:change
-  allowCellEditing={false}
-  subject="Dynamic Filter"
-/>
+<ColumnEditor {...$$props} on:change allowCellEditing={false} />
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
index 87fbba3b52..6e57d20751 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
@@ -142,10 +142,10 @@
         <div class="column">
           <div class="wide">
             <Body size="S">
-              By default, all table columns will automatically be shown.
+              By default, all columns will automatically be shown.
               <br />
-              You can manually control which columns are included in your table,
-              and their appearance, by adding them below.
+              You can manually control which columns are included by adding them
+              below.
             </Body>
           </div>
         </div>
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index 59340d4898..b34edd880a 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -13,7 +13,6 @@
   export let componentInstance
   export let value = []
   export let allowCellEditing = true
-  export let subject = "Table"
 
   const dispatch = createEventDispatcher()
 
@@ -75,11 +74,10 @@
   }
 </script>
 
-<ActionButton on:click={open}>Configure columns</ActionButton>
-<Drawer bind:this={drawer} title="{subject} Columns">
-  <svelte:fragment slot="description">
-    Configure the columns in your {subject.toLowerCase()}.
-  </svelte:fragment>
+<div class="column-editor">
+  <ActionButton on:click={open}>Configure columns</ActionButton>
+</div>
+<Drawer bind:this={drawer} title="Columns">
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <ColumnDrawer
     slot="body"
@@ -89,3 +87,9 @@
     {allowCellEditing}
   />
 </Drawer>
+
+<style>
+  .column-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
index 59340d4898..80f4829d71 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration.svelte
@@ -1,7 +1,7 @@
 <script>
   import { Button, ActionButton, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import ColumnDrawer from "./ColumnDrawer.svelte"
+  import ColumnDrawer from "./ColumnEditor/ColumnDrawer.svelte"
   import { cloneDeep } from "lodash/fp"
   import {
     getDatasourceForProvider,
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
index 1d4b629f2e..9d48789947 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
@@ -20,15 +20,26 @@
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource($currentAsset, datasource)?.schema
   $: schemaFields = Object.values(schema || {})
+  $: text = getText(value)
 
   async function saveFilter() {
     dispatch("change", tempValue)
     notifications.success("Filters saved")
     drawer.hide()
   }
+
+  const getText = filters => {
+    if (!filters?.length) {
+      return "No filters set"
+    } else {
+      return `${filters.length} filter${filters.length === 1 ? "" : "s"} set`
+    }
+  }
 </script>
 
-<ActionButton on:click={drawer.show}>Define filters</ActionButton>
+<div class="filter-editor">
+  <ActionButton on:click={drawer.show}>{text}</ActionButton>
+</div>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <FilterDrawer
@@ -40,3 +51,9 @@
     on:change={e => (tempValue = e.detail)}
   />
 </Drawer>
+
+<style>
+  .filter-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
index d35e7cd515..012ab461f0 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
@@ -3,6 +3,7 @@
     "name": "Blocks",
     "icon": "Article",
     "children": [
+      "gridblock",
       "tableblock",
       "cardsblock",
       "repeaterblock",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 76d7aff229..355373c854 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5230,5 +5230,91 @@
       "type": "schema",
       "suffix": "repeater"
     }
+  },
+  "gridblock": {
+    "name": "Grid block",
+    "icon": "Table",
+    "styles": ["size"],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
+    "info": "Grid Blocks are only compatible with internal or SQL tables",
+    "settings": [
+      {
+        "type": "table",
+        "label": "Table",
+        "key": "table",
+        "required": true
+      },
+      {
+        "type": "columns/basic",
+        "label": "Columns",
+        "key": "columns",
+        "dependsOn": "table"
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "initialFilter"
+      },
+      {
+        "type": "field/sortable",
+        "label": "Sort column",
+        "key": "initialSortColumn",
+        "placeholder": "Default"
+      },
+      {
+        "type": "select",
+        "label": "Sort order",
+        "key": "initialSortOrder",
+        "options": ["Ascending", "Descending"],
+        "defaultValue": "Ascending"
+      },
+      {
+        "type": "select",
+        "label": "Row height",
+        "key": "initialRowHeight",
+        "placeholder": "Default",
+        "options": [
+          {
+            "label": "Small",
+            "value": 36
+          },
+          {
+            "label": "Medium",
+            "value": 64
+          },
+          {
+            "label": "Large",
+            "value": 92
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Add rows",
+        "key": "allowAddRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Edit rows",
+        "key": "allowEditRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Delete rows",
+        "key": "allowDeleteRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "High contrast",
+        "key": "stripeRows",
+        "defaultValue": false
+      }
+    ]
   }
 }
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index b4a137f85d..4062bd3b73 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -35,7 +35,8 @@ export const API = createAPIClient({
   // We could also log these to sentry.
   // Or we could check error.status and redirect to login on a 403 etc.
   onError: error => {
-    const { status, method, url, message, handled } = error || {}
+    const { status, method, url, message, handled, suppressErrors } =
+      error || {}
     const ignoreErrorUrls = [
       "bbtel",
       "/api/global/self",
@@ -49,7 +50,7 @@ export const API = createAPIClient({
     }
 
     // Notify all errors
-    if (message) {
+    if (message && !suppressErrors) {
       // Don't notify if the URL contains the word analytics as it may be
       // blocked by browser extensions
       let ignore = false
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
new file mode 100644
index 0000000000..4314f6e99c
--- /dev/null
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -0,0 +1,71 @@
+<script>
+  // NOTE: this is not a block - it's just named as such to avoid confusing users,
+  // because it functions similarly to one
+  import { getContext } from "svelte"
+  import { Grid } from "@budibase/frontend-core"
+
+  export let table
+  export let allowAddRows = true
+  export let allowEditRows = true
+  export let allowDeleteRows = true
+  export let stripeRows = false
+  export let initialFilter = null
+  export let initialSortColumn = null
+  export let initialSortOrder = null
+  export let initialRowHeight = null
+  export let columns = null
+
+  const component = getContext("component")
+  const { styleable, API, builderStore } = getContext("sdk")
+
+  $: columnWhitelist = columns?.map(col => col.name)
+  $: schemaOverrides = getSchemaOverrides(columns)
+
+  const getSchemaOverrides = columns => {
+    let overrides = {}
+    columns?.forEach(column => {
+      overrides[column.name] = {
+        displayName: column.displayName || column.name,
+      }
+    })
+    return overrides
+  }
+</script>
+
+<div
+  use:styleable={$component.styles}
+  class:in-builder={$builderStore.inBuilder}
+>
+  <Grid
+    tableId={table?.tableId}
+    {API}
+    {allowAddRows}
+    {allowEditRows}
+    {allowDeleteRows}
+    {stripeRows}
+    {initialFilter}
+    {initialSortColumn}
+    {initialSortOrder}
+    {initialRowHeight}
+    {columnWhitelist}
+    {schemaOverrides}
+    showControls={false}
+    allowExpandRows={false}
+    allowSchemaChanges={false}
+  />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    overflow: hidden;
+    min-height: 410px;
+  }
+  div.in-builder :global(*) {
+    pointer-events: none;
+  }
+</style>
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 70074790ac..060c15a857 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -36,6 +36,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export { default as embeddedmap } from "./embedded-map/EmbeddedMap.svelte"
 export { default as grid } from "./Grid.svelte"
 export { default as sidepanel } from "./SidePanel.svelte"
+export { default as gridblock } from "./GridBlock.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js
index 739e0fe711..7b823d28c2 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/packages/frontend-core/src/api/index.js
@@ -75,7 +75,11 @@ export const createAPIClient = config => {
   let cache = {}
 
   // Generates an error object from an API response
-  const makeErrorFromResponse = async (response, method) => {
+  const makeErrorFromResponse = async (
+    response,
+    method,
+    suppressErrors = false
+  ) => {
     // Try to read a message from the error
     let message = response.statusText
     let json = null
@@ -96,6 +100,7 @@ export const createAPIClient = config => {
       url: response.url,
       method,
       handled: true,
+      suppressErrors,
     }
   }
 
@@ -119,6 +124,7 @@ export const createAPIClient = config => {
     json = true,
     external = false,
     parseResponse,
+    suppressErrors = false,
   }) => {
     // Ensure we don't do JSON processing if sending a GET request
     json = json && method !== "GET"
@@ -174,7 +180,7 @@ export const createAPIClient = config => {
       }
     } else {
       delete cache[url]
-      throw await makeErrorFromResponse(response, method)
+      throw await makeErrorFromResponse(response, method, suppressErrors)
     }
   }
 
@@ -228,6 +234,14 @@ export const createAPIClient = config => {
     invalidateCache: () => {
       cache = {}
     },
+
+    // Generic utility to extract the current app ID. Assumes that any client
+    // that exists in an app context will be attaching our app ID header.
+    getAppID: () => {
+      let headers = {}
+      config?.attachHeaders(headers)
+      return headers?.["x-budibase-app-id"]
+    },
   }
 
   // Attach all endpoints
diff --git a/packages/frontend-core/src/api/rows.js b/packages/frontend-core/src/api/rows.js
index 41ba505d81..8e8570ea2a 100644
--- a/packages/frontend-core/src/api/rows.js
+++ b/packages/frontend-core/src/api/rows.js
@@ -16,14 +16,16 @@ export const buildRowEndpoints = API => ({
   /**
    * Creates or updates a row in a table.
    * @param row the row to save
+   * @param suppressErrors whether or not to suppress error notifications
    */
-  saveRow: async row => {
+  saveRow: async (row, suppressErrors = false) => {
     if (!row?.tableId) {
       return
     }
     return await API.post({
       url: `/api/${row.tableId}/rows`,
       body: row,
+      suppressErrors,
     })
   },
 
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index 4d830723c2..c80b12cf1a 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -138,10 +138,12 @@
     top: 100%;
     left: 0;
     width: 320px;
-    background: var(--background);
+    background: var(--grid-background-alt);
     border: var(--cell-border);
     padding: var(--cell-padding);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .dropzone.invertX {
     left: auto;
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 9316699743..fe4bd70ba4 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -132,7 +132,7 @@
     --cell-color: var(--user-color);
   }
   .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
+    --cell-color: var(--accent-color);
   }
   .cell.error {
     --cell-color: var(--spectrum-global-color-red-500);
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 56c4c20d54..dd11066b98 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -9,7 +9,7 @@
   export let rowFocused = false
   export let rowHovered = false
   export let rowSelected = false
-  export let disableExpand = false
+  export let expandable = false
   export let disableNumber = false
   export let defaultHeight = false
   export let disabled = false
@@ -24,13 +24,6 @@
       selectedRows.actions.toggleRow(id)
     }
   }
-
-  const expand = () => {
-    svelteDispatch("expand")
-    if (row) {
-      dispatch("edit-row", row)
-    }
-  }
 </script>
 
 <GridCell
@@ -70,12 +63,14 @@
           color="var(--spectrum-global-color-red-400)"
         />
       </div>
-    {:else if $config.allowExpandRows}
-      <div
-        class="expand"
-        class:visible={!disableExpand && (rowFocused || rowHovered)}
-      >
-        <Icon name="Maximize" hoverable size="S" on:click={expand} />
+    {:else}
+      <div class="expand" class:visible={$config.allowExpandRows && expandable}>
+        <Icon
+          size="S"
+          name="Maximize"
+          hoverable
+          on:click={() => svelteDispatch("expand")}
+        />
       </div>
     {/if}
   </div>
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 21ee210233..3604dd6d42 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -163,7 +163,7 @@
     <MenuItem
       icon="Edit"
       on:click={editColumn}
-      disabled={!$config.allowEditColumns || column.schema.disabled}
+      disabled={!$config.allowSchemaChanges || column.schema.disabled}
     >
       Edit column
     </MenuItem>
@@ -171,7 +171,7 @@
       icon="Label"
       on:click={makeDisplayColumn}
       disabled={idx === "sticky" ||
-        !$config.allowEditColumns ||
+        !$config.allowSchemaChanges ||
         bannedDisplayColumnTypes.includes(column.schema.type)}
     >
       Use as display column
@@ -197,10 +197,12 @@
       Move right
     </MenuItem>
     <MenuItem
-      disabled={idx === "sticky"}
+      disabled={idx === "sticky" || !$config.showControls}
       icon="VisibilityOff"
-      on:click={hideColumn}>Hide column</MenuItem
+      on:click={hideColumn}
     >
+      Hide column
+    </MenuItem>
   </Menu>
 </Popover>
 
@@ -218,7 +220,7 @@
   .header-cell :global(.cell) {
     padding: 0 var(--cell-padding);
     gap: calc(2 * var(--cell-spacing));
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
 
   .name {
diff --git a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
index 886d4ef8b0..233533c446 100644
--- a/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
@@ -102,7 +102,7 @@
     top: 0;
     left: 0;
     width: calc(100% + var(--max-cell-render-width-overflow));
-    height: var(--max-cell-render-height);
+    height: calc(var(--row-height) + var(--max-cell-render-height));
     z-index: 1;
     border-radius: 2px;
     resize: none;
diff --git a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
index 9399617eb7..41335be265 100644
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@@ -132,10 +132,7 @@
             {option}
           </div>
           {#if values.includes(option)}
-            <Icon
-              name="Checkmark"
-              color="var(--spectrum-global-color-blue-400)"
-            />
+            <Icon name="Checkmark" color="var(--accent-color)" />
           {/if}
         </div>
       {/each}
@@ -223,6 +220,8 @@
     overflow-y: auto;
     border: var(--cell-border);
     box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .options.invertX {
     left: auto;
@@ -240,7 +239,7 @@
     justify-content: space-between;
     align-items: center;
     gap: var(--cell-spacing);
-    background-color: var(--background);
+    background-color: var(--grid-background-alt);
   }
   .option:hover,
   .option.focused {
diff --git a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
index 40b6de5eaa..8dea24f09e 100644
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@@ -42,6 +42,8 @@
   let candidateIndex
   let lastSearchId
   let searching = false
+  let valuesHeight = 0
+  let container
 
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
@@ -138,6 +140,7 @@
 
   const open = async () => {
     isOpen = true
+    valuesHeight = container.getBoundingClientRect().height
 
     // Find the primary display for the related table
     if (!primaryDisplay) {
@@ -242,8 +245,14 @@
   })
 </script>
 
-<div class="wrapper" class:editable class:focused style="--color:{color};">
-  <div class="container">
+<div
+  class="wrapper"
+  class:editable
+  class:focused
+  class:invertY
+  style="--color:{color};"
+>
+  <div class="container" bind:this={container}>
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
@@ -290,6 +299,7 @@
       class:invertY
       on:wheel|stopPropagation
       use:clickOutside={close}
+      style="--values-height:{valuesHeight}px;"
     >
       <div class="search">
         <Input
@@ -319,11 +329,7 @@
                 </span>
               </div>
               {#if isRowSelected(row)}
-                <Icon
-                  size="S"
-                  name="Checkmark"
-                  color="var(--spectrum-global-color-blue-400)"
-                />
+                <Icon size="S" name="Checkmark" color="var(--accent-color)" />
               {/if}
             </div>
           {/each}
@@ -340,7 +346,7 @@
     min-height: var(--row-height);
     max-height: var(--row-height);
     overflow: hidden;
-    --max-relationship-height: 120px;
+    --max-relationship-height: 96px;
   }
   .wrapper.focused {
     position: absolute;
@@ -352,6 +358,10 @@
     max-height: none;
     overflow: visible;
   }
+  .wrapper.invertY {
+    top: auto;
+    bottom: 0;
+  }
 
   .container {
     min-height: var(--row-height);
@@ -450,16 +460,17 @@
     left: 0;
     width: 100%;
     max-height: calc(
-      var(--max-cell-render-height) + var(--row-height) -
-        var(--max-relationship-height)
+      var(--max-cell-render-height) + var(--row-height) - var(--values-height)
     );
-    background: var(--background);
+    background: var(--grid-background-alt);
     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;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
   .dropdown.invertY {
     transform: translateY(-100%);
diff --git a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
index 6ad241eb65..20125bc49c 100644
--- a/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/AddColumnButton.svelte
@@ -10,7 +10,7 @@
   quiet
   size="M"
   on:click={() => dispatch("add-column")}
-  disabled={!$config.allowAddColumns}
+  disabled={!$config.allowSchemaChanges}
 >
   Add column
 </ActionButton>
diff --git a/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte b/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte
index f87b529390..3218ef9ffe 100644
--- a/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte
+++ b/packages/frontend-core/src/components/grid/controls/BulkDeleteHandler.svelte
@@ -6,15 +6,9 @@
 
   let modal
 
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: selectedRowCount = Object.values($selectedRows).length
   $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => {
-      if (entry[1] === true) {
-        return $rows.find(x => x._id === entry[0])
-      } else {
-        return null
-      }
-    })
+    .map(entry => $rows.find(x => x._id === entry[0]))
     .filter(x => x != null)
 
   // Deletion callback when confirmed
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
deleted file mode 100644
index 5ffd968d30..0000000000
--- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
+++ /dev/null
@@ -1,92 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import { DefaultColumnWidth } from "../lib/constants"
-
-  const { stickyColumn, columns, compact } = getContext("grid")
-  const smallSize = 120
-  const mediumSize = DefaultColumnWidth
-  const largeSize = DefaultColumnWidth * 1.5
-
-  let open = false
-  let anchor
-
-  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
-  $: allSmall = allCols.every(col => col.width === smallSize)
-  $: allMedium = allCols.every(col => col.width === mediumSize)
-  $: allLarge = allCols.every(col => col.width === largeSize)
-  $: custom = !allSmall && !allMedium && !allLarge
-  $: sizeOptions = [
-    {
-      label: "Small",
-      size: smallSize,
-      selected: allSmall,
-    },
-    {
-      label: "Medium",
-      size: mediumSize,
-      selected: allMedium,
-    },
-    {
-      label: "Large",
-      size: largeSize,
-      selected: allLarge,
-    },
-  ]
-
-  const changeColumnWidth = async width => {
-    columns.update(state => {
-      state.forEach(column => {
-        column.width = width
-      })
-      return state
-    })
-    if ($stickyColumn) {
-      stickyColumn.update(state => ({
-        ...state,
-        width,
-      }))
-    }
-    await columns.actions.saveChanges()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveLeftRight"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    disabled={!allCols.length}
-    tooltip={$compact ? "Width" : null}
-  >
-    {$compact ? "" : "Width"}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        on:click={() => changeColumnWidth(option.size)}
-        selected={option.selected}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-    {#if custom}
-      <ActionButton selected={custom} quiet>Custom</ActionButton>
-    {/if}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index fb66b106c9..b8728156db 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -3,12 +3,13 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn, compact } = getContext("grid")
+  const { columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyHidden = $columns.some(col => !col.visible)
+  $: text = getText($columns)
 
   const toggleVisibility = (column, visible) => {
     columns.update(state => {
@@ -38,6 +39,11 @@
     })
     columns.actions.saveChanges()
   }
+
+  const getText = columns => {
+    const hidden = columns.filter(col => !col.visible).length
+    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+  }
 </script>
 
 <div bind:this={anchor}>
@@ -48,13 +54,12 @@
     on:click={() => (open = !open)}
     selected={open || anyHidden}
     disabled={!$columns.length}
-    tooltip={$compact ? "Columns" : ""}
   >
-    {$compact ? "" : "Columns"}
+    {text}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}
diff --git a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
deleted file mode 100644
index e9617ce0b6..0000000000
--- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import {
-    LargeRowHeight,
-    MediumRowHeight,
-    SmallRowHeight,
-  } from "../lib/constants"
-
-  const { rowHeight, columns, table, compact } = 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="MoveUpDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    tooltip={$compact ? "Height" : null}
-  >
-    {$compact ? "" : "Height"}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align={$compact ? "right" : "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/SizeButton.svelte b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
new file mode 100644
index 0000000000..eb9bf917d9
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
@@ -0,0 +1,135 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Label } from "@budibase/bbui"
+  import {
+    DefaultColumnWidth,
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
+
+  const { stickyColumn, columns, rowHeight, table } = getContext("grid")
+
+  // Some constants for column width options
+  const smallColSize = 120
+  const mediumColSize = DefaultColumnWidth
+  const largeColSize = DefaultColumnWidth * 1.5
+
+  // Row height sizes
+  const rowSizeOptions = [
+    {
+      label: "Small",
+      size: SmallRowHeight,
+    },
+    {
+      label: "Medium",
+      size: MediumRowHeight,
+    },
+    {
+      label: "Large",
+      size: LargeRowHeight,
+    },
+  ]
+
+  let open = false
+  let anchor
+
+  // Column width sizes
+  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
+  $: allSmall = allCols.every(col => col.width === smallColSize)
+  $: allMedium = allCols.every(col => col.width === mediumColSize)
+  $: allLarge = allCols.every(col => col.width === largeColSize)
+  $: custom = !allSmall && !allMedium && !allLarge
+  $: columnSizeOptions = [
+    {
+      label: "Small",
+      size: smallColSize,
+      selected: allSmall,
+    },
+    {
+      label: "Medium",
+      size: mediumColSize,
+      selected: allMedium,
+    },
+    {
+      label: "Large",
+      size: largeColSize,
+      selected: allLarge,
+    },
+  ]
+
+  const changeRowHeight = height => {
+    columns.actions.saveTable({
+      ...$table,
+      rowHeight: height,
+    })
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="MoveUpDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+    disabled={!allCols.length}
+  >
+    Size
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <div class="size">
+      <Label>Row height</Label>
+      <div class="options">
+        {#each rowSizeOptions as option}
+          <ActionButton
+            quiet
+            selected={$rowHeight === option.size}
+            on:click={() => changeRowHeight(option.size)}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+      </div>
+    </div>
+    <div class="size">
+      <Label>Column width</Label>
+      <div class="options">
+        {#each columnSizeOptions as option}
+          <ActionButton
+            quiet
+            on:click={() => columns.actions.changeAllColumnWidths(option.size)}
+            selected={option.selected}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+        {#if custom}
+          <ActionButton selected={custom} quiet>Custom</ActionButton>
+        {/if}
+      </div>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+  }
+  .size {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .size:first-child {
+    margin-bottom: 16px;
+  }
+  .options {
+    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
index 2018e83e44..bd75249216 100644
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, columns, stickyColumn, compact } = getContext("grid")
+  const { sort, columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
@@ -90,13 +90,12 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!columnOptions.length}
-    tooltip={$compact ? "Sort" : ""}
   >
-    {$compact ? "" : "Sort"}
+    Sort
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <Select
       placeholder={null}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 81f42ca257..e94cf5da93 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import { writable } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
@@ -17,11 +16,8 @@
   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 ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
+  import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
@@ -33,48 +29,37 @@
 
   export let API = null
   export let tableId = null
-  export let tableType = null
   export let schemaOverrides = null
+  export let columnWhitelist = 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
+  export let allowSchemaChanges = true
   export let stripeRows = false
   export let collaboration = true
   export let showAvatars = true
+  export let showControls = true
+  export let initialFilter = null
+  export let initialSortColumn = null
+  export let initialSortOrder = null
+  export let initialRowHeight = null
 
   // 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,
-    stripeRows,
-  })
-
   // Build up context
   let context = {
     API: API || createAPIClient(),
     rand,
-    config,
-    tableId: tableIdStore,
-    tableType,
-    schemaOverrides: schemaOverridesStore,
+    props: $$props,
   }
   context = { ...context, ...createEventManagers() }
   context = attachStores(context)
 
   // Reference some stores for local use
   const {
+    config,
     isResizing,
     isReordering,
     ui,
@@ -82,19 +67,27 @@
     loading,
     rowHeight,
     contentLines,
+    gridFocused,
   } = context
 
-  // Keep stores up to date
-  $: tableIdStore.set(tableId)
-  $: schemaOverridesStore.set(schemaOverrides)
+  // Keep config store up to date with props
   $: config.set({
+    tableId,
+    schemaOverrides,
+    columnWhitelist,
     allowAddRows,
-    allowAddColumns,
-    allowEditColumns,
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    allowSchemaChanges,
     stripeRows,
+    collaboration,
+    showAvatars,
+    showControls,
+    initialFilter,
+    initialSortColumn,
+    initialSortOrder,
+    initialRowHeight,
   })
 
   // Set context for children to consume
@@ -116,25 +109,27 @@
   id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  class:stripe={$config.stripeRows}
+  class:stripe={stripeRows}
+  on:mouseenter={() => gridFocused.set(true)}
+  on:mouseleave={() => gridFocused.set(false)}
   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" />
-      <SortButton />
-      <HideColumnsButton />
-      <ColumnWidthButton />
-      <RowHeightButton />
+  {#if showControls}
+    <div class="controls">
+      <div class="controls-left">
+        <slot name="filter" />
+        <SortButton />
+        <HideColumnsButton />
+        <SizeButton />
+        <slot name="controls" />
+      </div>
+      <div class="controls-right">
+        {#if showAvatars}
+          <UserAvatars />
+        {/if}
+      </div>
     </div>
-    <div class="controls-right">
-      {#if showAvatars}
-        <UserAvatars />
-      {/if}
-    </div>
-  </div>
+  {/if}
   {#if $loaded}
     <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
       <div class="grid-data-inner">
@@ -167,7 +162,20 @@
 </div>
 
 <style>
+  /* Core grid */
   .grid {
+    /* Variables */
+    --accent-color: var(--primaryColor, var(--spectrum-global-color-blue-400));
+    --grid-background: var(--spectrum-global-color-gray-50);
+    --grid-background-alt: var(--spectrum-global-color-gray-100);
+    --cell-background: var(--grid-background);
+    --cell-background-hover: var(--grid-background-alt);
+    --cell-background-alt: var(--cell-background);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-font-size: 14px;
+    --controls-height: 50px;
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -175,17 +183,7 @@
     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-background-alt: var(--cell-background);
-    --cell-padding: 8px;
-    --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
-    --cell-font-size: 14px;
-    --controls-height: 50px;
+    background: var(--grid-background);
   }
   .grid,
   .grid :global(*) {
@@ -201,6 +199,7 @@
     --cell-background-alt: var(--spectrum-global-color-gray-75);
   }
 
+  /* Data layers */
   .grid-data-outer,
   .grid-data-inner {
     flex: 1 1 auto;
@@ -234,7 +233,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--background);
+    background: var(--grid-background-alt);
     z-index: 2;
   }
   .controls-left,
@@ -270,7 +269,15 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--background);
+    background: var(--grid-background-alt);
     opacity: 0.6;
   }
+
+  /* Disable checkbox animation anywhere in the grid data */
+  .grid-data-outer :global(.spectrum-Checkbox-box:before),
+  .grid-data-outer :global(.spectrum-Checkbox-box:after),
+  .grid-data-outer :global(.spectrum-Checkbox-checkmark),
+  .grid-data-outer :global(.spectrum-Checkbox-partialCheckmark) {
+    transition: none;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index 016369df49..b5f6c38287 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -12,6 +12,7 @@
     config,
     hoveredRowId,
     dispatch,
+    isDragging,
   } = getContext("grid")
 
   let body
@@ -47,8 +48,8 @@
         class="blank"
         class:highlighted={$hoveredRowId === BlankRowID}
         style="width:{renderColumnsWidth}px"
-        on:mouseenter={() => ($hoveredRowId = BlankRowID)}
-        on:mouseleave={() => ($hoveredRowId = null)}
+        on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
+        on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         on:click={() => dispatch("add-row-inline")}
       />
     {/if}
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
index 0ccba0f170..fe74f05663 100644
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@@ -16,6 +16,7 @@
     focusedRow,
     columnHorizontalInversionIndex,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowSelected = !!$selectedRows[row._id]
@@ -27,8 +28,8 @@
 <div
   class="row"
   on:focus
-  on:mouseenter={() => ($hoveredRowId = row._id)}
-  on:mouseleave={() => ($hoveredRowId = null)}
+  on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+  on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
 >
   {#each $renderedColumns as column, columnIdx (column.name)}
     {@const cellId = `${row._id}-${column.name}`}
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index 04f0960057..7599135c63 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -12,6 +12,7 @@
     bounds,
     hoveredRowId,
     hiddenColumnsWidth,
+    menu,
   } = getContext("grid")
 
   export let scrollVertically = false
@@ -30,6 +31,11 @@
   const handleWheel = e => {
     e.preventDefault()
     debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
+
+    // If a context menu was visible, hide it
+    if ($menu.visible) {
+      menu.actions.close()
+    }
   }
   const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
     const { top, left } = $scroll
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index 9d6cc2275b..f31cc198fb 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -29,7 +29,7 @@
       {/each}
     </div>
   </GridScrollWrapper>
-  {#if $config.allowAddColumns}
+  {#if $config.allowSchemaChanges}
     <div
       class="add"
       style="left:{left}px"
@@ -42,7 +42,7 @@
 
 <style>
   .header {
-    background: var(--background);
+    background: var(--grid-background-alt);
     border-bottom: var(--cell-border);
     position: relative;
     height: var(--default-row-height);
@@ -60,7 +60,7 @@
     border-left: var(--cell-border);
     border-right: var(--cell-border);
     border-bottom: var(--cell-border);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
     z-index: 1;
   }
   .add:hover {
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 40e43c2ed9..b6b5925027 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -26,6 +26,8 @@
     maxScrollTop,
     rowVerticalInversionIndex,
     columnHorizontalInversionIndex,
+    selectedRows,
+    config,
   } = getContext("grid")
 
   let visible = false
@@ -37,6 +39,7 @@
   $: width = GutterWidth + ($stickyColumn?.width || 0)
   $: $tableId, (visible = false)
   $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
+  $: selectedRowCount = Object.values($selectedRows).length
 
   const shouldInvertY = (offset, inversionIndex, rows) => {
     if (offset === 0) {
@@ -75,7 +78,7 @@
   }
 
   const startAdding = async () => {
-    if (visible) {
+    if (visible || !firstColumn) {
       return
     }
 
@@ -129,9 +132,6 @@
         e.preventDefault()
         clear()
       }
-    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault()
-      addRow()
     }
   }
 
@@ -141,6 +141,18 @@
   })
 </script>
 
+<!-- New row FAB -->
+{#if !visible && !selectedRowCount && $config.allowAddRows && firstColumn}
+  <div
+    class="new-row-fab"
+    on:click={() => dispatch("add-row-inline")}
+    transition:fade|local={{ duration: 130 }}
+    class:offset={!$stickyColumn}
+  >
+    <Icon name="Add" size="S" />
+  </div>
+{/if}
+
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}
   <div
@@ -151,7 +163,7 @@
     <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
     <div class="underlay" transition:fade|local={{ duration: 130 }} />
     <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
-      <GutterCell on:expand={addViaModal} rowHovered>
+      <GutterCell expandable on:expand={addViaModal} rowHovered>
         <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
         {#if isAdding}
           <div in:fade={{ duration: 130 }} class="loading-overlay" />
@@ -227,6 +239,26 @@
 {/if}
 
 <style>
+  /* New row FAB */
+  .new-row-fab {
+    position: absolute;
+    top: var(--default-row-height);
+    left: calc(var(--gutter-width) / 2);
+    transform: translateX(6px) translateY(-50%);
+    background: var(--cell-background);
+    padding: 4px;
+    border-radius: 50%;
+    border: var(--cell-border);
+    z-index: 10;
+  }
+  .new-row-fab:hover {
+    background: var(--cell-background-hover);
+    cursor: pointer;
+  }
+  .new-row-fab.offset {
+    margin-left: -6px;
+  }
+
   .container {
     position: absolute;
     top: var(--default-row-height);
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 801772ed51..97b40e3e23 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -23,10 +23,11 @@
     scrollLeft,
     dispatch,
     contentLines,
+    isDragging,
   } = getContext("grid")
 
   $: rowCount = $rows.length
-  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: selectedRowCount = Object.values($selectedRows).length
   $: width = GutterWidth + ($stickyColumn?.width || 0)
 
   const selectAll = () => {
@@ -50,7 +51,6 @@
 >
   <div class="header row">
     <GutterCell
-      disableExpand
       disableNumber
       on:select={selectAll}
       defaultHeight
@@ -71,8 +71,8 @@
         {@const cellId = `${row._id}-${$stickyColumn?.name}`}
         <div
           class="row"
-          on:mouseenter={() => ($hoveredRowId = row._id)}
-          on:mouseleave={() => ($hoveredRowId = null)}
+          on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
         >
           <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
           {#if $stickyColumn}
@@ -96,11 +96,13 @@
       {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
         <div
           class="row new"
-          on:mouseenter={() => ($hoveredRowId = BlankRowID)}
-          on:mouseleave={() => ($hoveredRowId = null)}
+          on:mouseenter={$isDragging
+            ? null
+            : () => ($hoveredRowId = BlankRowID)}
+          on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
           on:click={() => dispatch("add-row-inline")}
         >
-          <GutterCell disableExpand rowHovered={$hoveredRowId === BlankRowID}>
+          <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
             <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
           </GutterCell>
           {#if $stickyColumn}
@@ -159,7 +161,7 @@
     z-index: 1;
   }
   .header :global(.cell) {
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--grid-background-alt);
   }
   .row {
     display: flex;
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
index f078ef7274..a6e6723463 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -1,6 +1,5 @@
-export const Padding = 256
-export const MaxCellRenderHeight = 252
-export const MaxCellRenderWidthOverflow = 200
+export const Padding = 246
+export const MaxCellRenderHeight = 222
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
@@ -12,3 +11,5 @@ export const DefaultRowHeight = SmallRowHeight
 export const NewRowID = "new"
 export const BlankRowID = "blank"
 export const RowPageSize = 100
+export const FocusedCellMinOffset = 48
+export const MaxCellRenderWidthOverflow = Padding - 3 * ScrollBarSize
diff --git a/packages/frontend-core/src/components/grid/lib/websocket.js b/packages/frontend-core/src/components/grid/lib/websocket.js
index 9de0199cfc..66863ca1f2 100644
--- a/packages/frontend-core/src/components/grid/lib/websocket.js
+++ b/packages/frontend-core/src/components/grid/lib/websocket.js
@@ -3,7 +3,7 @@ import { createWebsocket } from "../../../utils"
 import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
 
 export const createGridWebsocket = context => {
-  const { rows, tableId, users, focusedCellId, table } = context
+  const { rows, tableId, users, focusedCellId, table, API } = context
   const socket = createWebsocket("/socket/grid")
 
   const connectToTable = tableId => {
@@ -11,9 +11,10 @@ export const createGridWebsocket = context => {
       return
     }
     // Identify which table we are editing
+    const appId = API.getAppID()
     socket.emit(
       GridSocketEvent.SelectTable,
-      { tableId },
+      { tableId, appId },
       ({ users: gridUsers }) => {
         users.set(gridUsers)
       }
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index a210e125ff..c4b7c598cd 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -15,6 +15,7 @@
     selectedRows,
     config,
     menu,
+    gridFocused,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -24,6 +25,11 @@
 
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
+    // Ignore completely if the grid is not focused
+    if (!$gridFocused) {
+      return
+    }
+
     // Avoid processing events sourced from certain origins
     if (e.target?.closest) {
       for (let selector of ignoredOriginSelectors) {
diff --git a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
index 15ca08dbdf..36ea977913 100644
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@@ -72,7 +72,9 @@
       </MenuItem>
       <MenuItem
         icon="Maximize"
-        disabled={isNewRow || !$config.allowEditRows}
+        disabled={isNewRow ||
+          !$config.allowEditRows ||
+          !$config.allowExpandRows}
         on:click={() => dispatch("edit-row", $focusedRow)}
         on:click={menu.actions.close}
       >
diff --git a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
index f684f2bc9b..67cffa0940 100644
--- a/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ReorderOverlay.svelte
@@ -57,7 +57,7 @@
     position: absolute;
     top: 0;
     width: 2px;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
     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
index 42fb796ac9..33a0a0e2d3 100644
--- a/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ResizeOverlay.svelte
@@ -65,6 +65,6 @@
     margin-left: -1px;
     width: 2px;
     height: 100%;
-    background: var(--spectrum-global-color-blue-400);
+    background: var(--accent-color);
   }
 </style>
diff --git a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
index f92ae1b26b..315c3d21e5 100644
--- a/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/ScrollOverlay.svelte
@@ -15,11 +15,18 @@
     scrollLeft,
     scrollTop,
     height,
+    isDragging,
+    menu,
   } = getContext("grid")
 
   // State for dragging bars
   let initialMouse
   let initialScroll
+  let isDraggingV = false
+  let isDraggingH = false
+
+  // Update state to reflect if we are dragging
+  $: isDragging.set(isDraggingV || isDraggingH)
 
   // Calculate V scrollbar size and offset
   // Terminology is the same for both axes:
@@ -39,6 +46,13 @@
   $: availWidth = renderWidth - barWidth
   $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
 
+  // Helper to close the context menu if it's open
+  const closeMenu = () => {
+    if ($menu.visible) {
+      menu.actions.close()
+    }
+  }
+
   // V scrollbar drag handlers
   const startVDragging = e => {
     e.preventDefault()
@@ -46,6 +60,8 @@
     initialScroll = $scrollTop
     document.addEventListener("mousemove", moveVDragging)
     document.addEventListener("mouseup", stopVDragging)
+    isDraggingV = true
+    closeMenu()
   }
   const moveVDragging = domDebounce(e => {
     const delta = e.clientY - initialMouse
@@ -59,6 +75,7 @@
   const stopVDragging = () => {
     document.removeEventListener("mousemove", moveVDragging)
     document.removeEventListener("mouseup", stopVDragging)
+    isDraggingV = false
   }
 
   // H scrollbar drag handlers
@@ -68,6 +85,8 @@
     initialScroll = $scrollLeft
     document.addEventListener("mousemove", moveHDragging)
     document.addEventListener("mouseup", stopHDragging)
+    isDraggingH = true
+    closeMenu()
   }
   const moveHDragging = domDebounce(e => {
     const delta = e.clientX - initialMouse
@@ -81,6 +100,7 @@
   const stopHDragging = () => {
     document.removeEventListener("mousemove", moveHDragging)
     document.removeEventListener("mouseup", stopHDragging)
+    isDraggingH = false
   }
 </script>
 
@@ -89,6 +109,7 @@
     class="v-scrollbar"
     style="--size:{ScrollBarSize}px; top:{barTop}px; height:{barHeight}px;"
     on:mousedown={startVDragging}
+    class:dragging={isDraggingV}
   />
 {/if}
 {#if $showHScrollbar}
@@ -96,6 +117,7 @@
     class="h-scrollbar"
     style="--size:{ScrollBarSize}px; left:{barLeft}px; width:{barWidth}px;"
     on:mousedown={startHDragging}
+    class:dragging={isDraggingH}
   />
 {/if}
 
@@ -103,11 +125,12 @@
   div {
     position: absolute;
     background: var(--spectrum-global-color-gray-500);
-    opacity: 0.7;
+    opacity: 0.5;
     border-radius: 4px;
     transition: opacity 130ms ease-out;
   }
-  div:hover {
+  div:hover,
+  div.dragging {
     opacity: 1;
   }
   .v-scrollbar {
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 82a26d923c..664e67950e 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -46,7 +46,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch } = context
+  const { table, columns, stickyColumn, API, dispatch, config } = context
 
   // Updates the tables primary display column
   const changePrimaryDisplay = async column => {
@@ -56,6 +56,23 @@ export const deriveStores = context => {
     })
   }
 
+  // Updates the width of all columns
+  const changeAllColumnWidths = async width => {
+    columns.update(state => {
+      return state.map(col => ({
+        ...col,
+        width,
+      }))
+    })
+    if (get(stickyColumn)) {
+      stickyColumn.update(state => ({
+        ...state,
+        width,
+      }))
+    }
+    await saveChanges()
+  }
+
   // Persists column changes by saving metadata against table schema
   const saveChanges = async () => {
     const $columns = get(columns)
@@ -91,7 +108,9 @@ export const deriveStores = context => {
     table.set(newTable)
 
     // Update server
-    await API.saveTable(newTable)
+    if (get(config).allowSchemaChanges) {
+      await API.saveTable(newTable)
+    }
 
     // Broadcast change to external state can be updated, as this change
     // will not be received by the builder websocket because we caused it ourselves
@@ -105,17 +124,19 @@ export const deriveStores = context => {
         saveChanges,
         saveTable,
         changePrimaryDisplay,
+        changeAllColumnWidths,
       },
     },
   }
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides } = context
+  const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
+    context
 
   const schema = derived(
-    [table, schemaOverrides],
-    ([$table, $schemaOverrides]) => {
+    [table, schemaOverrides, columnWhitelist],
+    ([$table, $schemaOverrides, $columnWhitelist]) => {
       if (!$table?.schema) {
         return null
       }
@@ -142,6 +163,16 @@ export const initialise = context => {
           }
         }
       })
+
+      // Apply whitelist if specified
+      if ($columnWhitelist?.length) {
+        Object.keys(newSchema).forEach(key => {
+          if (!$columnWhitelist.includes(key)) {
+            delete newSchema[key]
+          }
+        })
+      }
+
       return newSchema
     }
   )
@@ -209,7 +240,7 @@ export const initialise = context => {
     }
     stickyColumn.set({
       name: primaryDisplay,
-      label: $schema[primaryDisplay].name || primaryDisplay,
+      label: $schema[primaryDisplay].displayName || primaryDisplay,
       schema: $schema[primaryDisplay],
       width: $schema[primaryDisplay].width || DefaultColumnWidth,
       visible: true,
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js
new file mode 100644
index 0000000000..2fe9bafa91
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/config.js
@@ -0,0 +1,27 @@
+import { writable } from "svelte/store"
+import { derivedMemo } from "../../../utils"
+
+export const createStores = context => {
+  const config = writable(context.props)
+  const getProp = prop => derivedMemo(config, $config => $config[prop])
+
+  // Derive and memoize some props so that we can react to them in isolation
+  const tableId = getProp("tableId")
+  const initialSortColumn = getProp("initialSortColumn")
+  const initialSortOrder = getProp("initialSortOrder")
+  const initialFilter = getProp("initialFilter")
+  const initialRowHeight = getProp("initialRowHeight")
+  const schemaOverrides = getProp("schemaOverrides")
+  const columnWhitelist = getProp("columnWhitelist")
+
+  return {
+    config,
+    tableId,
+    initialSortColumn,
+    initialSortOrder,
+    initialFilter,
+    initialRowHeight,
+    schemaOverrides,
+    columnWhitelist,
+  }
+}
diff --git a/packages/frontend-core/src/components/grid/stores/filter.js b/packages/frontend-core/src/components/grid/stores/filter.js
new file mode 100644
index 0000000000..76c6a86c21
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/filter.js
@@ -0,0 +1,19 @@
+import { writable } from "svelte/store"
+
+export const createStores = context => {
+  const { props } = context
+
+  // Initialise to default props
+  const filter = writable(props.initialFilter)
+
+  return {
+    filter,
+  }
+}
+
+export const initialise = context => {
+  const { filter, initialFilter } = context
+
+  // Reset filter when initial filter prop changes
+  initialFilter.subscribe(filter.set)
+}
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
index aa552a9ffe..588b568c8e 100644
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@@ -11,8 +11,14 @@ import * as Users from "./users"
 import * as Validation from "./validation"
 import * as Viewport from "./viewport"
 import * as Clipboard from "./clipboard"
+import * as Config from "./config"
+import * as Sort from "./sort"
+import * as Filter from "./filter"
 
 const DependencyOrderedStores = [
+  Config,
+  Sort,
+  Filter,
   Bounds,
   Scroll,
   Rows,
diff --git a/packages/frontend-core/src/components/grid/stores/menu.js b/packages/frontend-core/src/components/grid/stores/menu.js
index 3f34c0a266..f1d822aeaf 100644
--- a/packages/frontend-core/src/components/grid/stores/menu.js
+++ b/packages/frontend-core/src/components/grid/stores/menu.js
@@ -1,5 +1,4 @@
-import { writable, get } from "svelte/store"
-import { GutterWidth } from "../lib/constants"
+import { writable } from "svelte/store"
 
 export const createStores = () => {
   const menu = writable({
@@ -14,18 +13,25 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context
+  const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {
-    const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
-    const $rowHeight = get(rowHeight)
     e.preventDefault()
+
+    // Get DOM node for grid data wrapper to compute relative position to
+    const gridNode = document.getElementById(`grid-${rand}`)
+    const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
+    if (!dataNode) {
+      return
+    }
+
+    // Compute bounds of cell relative to outer data node
+    const targetBounds = e.target.getBoundingClientRect()
+    const dataBounds = dataNode.getBoundingClientRect()
     focusedCellId.set(cellId)
     menu.set({
-      left:
-        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
-      top: e.clientY - $bounds.top + $rowHeight,
+      left: targetBounds.left - dataBounds.left + e.offsetX,
+      top: targetBounds.top - dataBounds.top + e.offsetY,
       visible: true,
     })
   }
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 2020708fa8..1a98ef1848 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -4,18 +4,13 @@ import { notifications } from "@budibase/bbui"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import { tick } from "svelte"
 
-const initialSortState = {
-  column: null,
-  order: "ascending",
-}
+const SuppressErrors = true
 
 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({})
   const hasNextPage = writable(false)
@@ -47,10 +42,8 @@ export const createStores = () => {
     rows,
     rowLookupMap,
     table,
-    filter,
     loaded,
     loading,
-    sort,
     rowChangeCache,
     inProgressChanges,
     hasNextPage,
@@ -98,15 +91,18 @@ export const deriveStores = context => {
   // Reset everything when table ID changes
   let unsubscribe = null
   let lastResetKey = null
-  tableId.subscribe($tableId => {
+  tableId.subscribe(async $tableId => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
     loading.set(true)
 
-    // Reset state
-    filter.set([])
+    // Tick to allow other reactive logic to update stores when table ID changes
+    // before proceeding. This allows us to wipe filters etc if needed.
+    await tick()
+    const $filter = get(filter)
+    const $sort = get(sort)
 
     // Create new fetch model
     const newFetch = fetchData({
@@ -116,9 +112,9 @@ export const deriveStores = context => {
         tableId: $tableId,
       },
       options: {
-        filter: [],
-        sortColumn: initialSortState.column,
-        sortOrder: initialSortState.order,
+        filter: $filter,
+        sortColumn: $sort.column,
+        sortOrder: $sort.order,
         limit: RowPageSize,
         paginate: true,
       },
@@ -224,7 +220,10 @@ export const deriveStores = context => {
   const addRow = async (row, idx, bubble = false) => {
     try {
       // Create row
-      const newRow = await API.saveRow({ ...row, tableId: get(tableId) })
+      const newRow = await API.saveRow(
+        { ...row, tableId: get(tableId) },
+        SuppressErrors
+      )
 
       // Update state
       if (idx != null) {
@@ -351,7 +350,10 @@ export const deriveStores = context => {
         ...state,
         [rowId]: true,
       }))
-      const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
+      const saved = await API.saveRow(
+        { ...row, ...get(rowChangeCache)[rowId] },
+        SuppressErrors
+      )
 
       // Update state after a successful change
       if (saved?._id) {
diff --git a/packages/frontend-core/src/components/grid/stores/scroll.js b/packages/frontend-core/src/components/grid/stores/scroll.js
index c1ca19633a..89e759854f 100644
--- a/packages/frontend-core/src/components/grid/stores/scroll.js
+++ b/packages/frontend-core/src/components/grid/stores/scroll.js
@@ -1,6 +1,6 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
-import { Padding, GutterWidth } from "../lib/constants"
+import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants"
 
 export const createStores = () => {
   const scroll = writable({
@@ -138,14 +138,13 @@ export const initialise = context => {
     const $scroll = get(scroll)
     const $bounds = get(bounds)
     const $rowHeight = get(rowHeight)
-    const verticalOffset = 60
 
     // 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
+        $scroll.top + $bounds.height - $rowHeight - FocusedCellMinOffset
       let delta = rowYPos - bottomCutoff
       if (delta > 0) {
         scroll.update(state => ({
@@ -156,7 +155,7 @@ export const initialise = context => {
 
       // Ensure row is not above top of screen
       else {
-        const delta = $scroll.top - rowYPos + verticalOffset
+        const delta = $scroll.top - rowYPos + FocusedCellMinOffset
         if (delta > 0) {
           scroll.update(state => ({
             ...state,
@@ -171,13 +170,12 @@ export const initialise = context => {
     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
+    let delta = $scroll.left - column.left + FocusedCellMinOffset
     if (delta > 0) {
       scroll.update(state => ({
         ...state,
@@ -188,7 +186,7 @@ export const initialise = context => {
     // Ensure column is not cutoff on right edge
     else {
       const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - horizontalOffset
+      const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({
diff --git a/packages/frontend-core/src/components/grid/stores/sort.js b/packages/frontend-core/src/components/grid/stores/sort.js
new file mode 100644
index 0000000000..211124f640
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/sort.js
@@ -0,0 +1,27 @@
+import { writable } from "svelte/store"
+
+export const createStores = context => {
+  const { props } = context
+
+  // Initialise to default props
+  const sort = writable({
+    column: props.initialSortColumn,
+    order: props.initialSortOrder || "ascending",
+  })
+
+  return {
+    sort,
+  }
+}
+
+export const initialise = context => {
+  const { sort, initialSortColumn, initialSortOrder } = context
+
+  // Reset sort when initial sort props change
+  initialSortColumn.subscribe(newSortColumn => {
+    sort.update(state => ({ ...state, column: newSortColumn }))
+  })
+  initialSortOrder.subscribe(newSortOrder => {
+    sort.update(state => ({ ...state, order: newSortOrder }))
+  })
+}
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index b62e883437..ba780dee6c 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -8,13 +8,16 @@ import {
   NewRowID,
 } from "../lib/constants"
 
-export const createStores = () => {
+export const createStores = context => {
+  const { props } = context
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(DefaultRowHeight)
+  const rowHeight = writable(props.initialRowHeight || DefaultRowHeight)
   const previousFocusedRowId = writable(null)
+  const gridFocused = writable(false)
+  const isDragging = writable(false)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -46,6 +49,8 @@ export const createStores = () => {
     previousFocusedRowId,
     hoveredRowId,
     rowHeight,
+    gridFocused,
+    isDragging,
     selectedRows: {
       ...selectedRows,
       actions: {
@@ -94,9 +99,9 @@ export const deriveStores = context => {
 
   // Derive the amount of content lines to show in cells depending on row height
   const contentLines = derived(rowHeight, $rowHeight => {
-    if ($rowHeight === LargeRowHeight) {
+    if ($rowHeight >= LargeRowHeight) {
       return 3
-    } else if ($rowHeight === MediumRowHeight) {
+    } else if ($rowHeight >= MediumRowHeight) {
       return 2
     }
     return 1
@@ -129,6 +134,7 @@ export const initialise = context => {
     hoveredRowId,
     table,
     rowHeight,
+    initialRowHeight,
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
@@ -185,4 +191,13 @@ export const initialise = context => {
   table.subscribe($table => {
     rowHeight.set($table?.rowHeight || DefaultRowHeight)
   })
+
+  // Reset row height when initial row height prop changes
+  initialRowHeight.subscribe(height => {
+    if (height) {
+      rowHeight.set(height)
+    } else {
+      rowHeight.set(get(table)?.rowHeight || DefaultRowHeight)
+    }
+  })
 }
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index bda56dc34f..b03f10f8fa 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -108,11 +108,22 @@ export const deriveStores = context => {
   // 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
-      )
+    [height, rowHeight, scrollTop],
+    ([$height, $rowHeight, $scrollTop]) => {
+      const offset = $scrollTop % $rowHeight
+
+      // Compute the last row index with space to render popovers below it
+      const minBottom =
+        $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset
+      const lastIdx = Math.floor(minBottom / $rowHeight)
+
+      // Compute the first row index with space to render popovers above it
+      const minTop = MaxCellRenderHeight + offset
+      const firstIdx = Math.ceil(minTop / $rowHeight)
+
+      // Use the greater of the two indices so that we prefer content below,
+      // unless there is room to render the entire popover above
+      return Math.max(lastIdx, firstIdx)
     }
   )
 
@@ -125,7 +136,7 @@ export const deriveStores = context => {
       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) {
+        if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
           break
         }
       }
diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js
index 18a00c08d5..b456753d4a 100644
--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/packages/frontend-core/src/fetch/DataFetch.js
@@ -136,8 +136,10 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the primary display and fallback to first column
-    if (!this.options.sortColumn) {
+    // If no sort column, or an invalid sort column is provided, use the primary
+    // display and fallback to first column
+    const sortValid = this.options.sortColumn && schema[this.options.sortColumn]
+    if (!sortValid) {
       let newSortColumn
       if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
         newSortColumn = definition.primaryDisplay
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 16dc4f323a..26e44410ba 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -3,4 +3,5 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"
diff --git a/packages/frontend-core/src/utils/memo.js b/packages/frontend-core/src/utils/memo.js
new file mode 100644
index 0000000000..ba0e3f3490
--- /dev/null
+++ b/packages/frontend-core/src/utils/memo.js
@@ -0,0 +1,43 @@
+import { writable, get, derived } from "svelte/store"
+
+// A simple svelte store which deeply compares all changes and ensures that
+// subscribed children will only fire when a new value is actually set
+export const memo = initialValue => {
+  const store = writable(initialValue)
+
+  const tryUpdateValue = (newValue, currentValue) => {
+    // Sanity check for primitive equality
+    if (currentValue === newValue) {
+      return
+    }
+
+    // Otherwise deep compare via JSON stringify
+    const currentString = JSON.stringify(currentValue)
+    const newString = JSON.stringify(newValue)
+    if (currentString !== newString) {
+      store.set(newValue)
+    }
+  }
+
+  return {
+    subscribe: store.subscribe,
+    set: newValue => {
+      const currentValue = get(store)
+      tryUpdateValue(newValue, currentValue)
+    },
+    update: updateFn => {
+      const currentValue = get(store)
+      let mutableCurrentValue = JSON.parse(JSON.stringify(currentValue))
+      const newValue = updateFn(mutableCurrentValue)
+      tryUpdateValue(newValue, currentValue)
+    },
+  }
+}
+
+// Enriched version of svelte's derived store which returns a memo
+export const derivedMemo = (store, derivation) => {
+  const derivedStore = derived(store, derivation)
+  const memoStore = memo(get(derivedStore))
+  derivedStore.subscribe(memoStore.set)
+  return memoStore
+}
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
index 6731c2d899..2a797623cf 100644
--- a/packages/server/src/websockets/grid.ts
+++ b/packages/server/src/websockets/grid.ts
@@ -1,6 +1,6 @@
 import authorized from "../middleware/authorized"
 import { BaseSocket } from "./websocket"
-import { permissions } from "@budibase/backend-core"
+import { context, permissions } from "@budibase/backend-core"
 import http from "http"
 import Koa from "koa"
 import { getTableId } from "../api/controllers/row/utils"
@@ -8,20 +8,56 @@ import { Row, Table } from "@budibase/types"
 import { Socket } from "socket.io"
 import { GridSocketEvent } from "@budibase/shared-core"
 
+const { PermissionType, PermissionLevel } = permissions
+
 export default class GridSocket extends BaseSocket {
   constructor(app: Koa, server: http.Server) {
-    super(app, server, "/socket/grid", [authorized(permissions.BUILDER)])
+    super(app, server, "/socket/grid")
   }
 
   async onConnect(socket: Socket) {
     // Initial identification of connected spreadsheet
-    socket.on(GridSocketEvent.SelectTable, async ({ tableId }, callback) => {
-      await this.joinRoom(socket, tableId)
+    socket.on(
+      GridSocketEvent.SelectTable,
+      async ({ tableId, appId }, callback) => {
+        // Ignore if no table or app specified
+        if (!tableId || !appId) {
+          socket.disconnect(true)
+          return
+        }
 
-      // Reply with all users in current room
-      const sessions = await this.getRoomSessions(tableId)
-      callback({ users: sessions })
-    })
+        // Check if the user has permission to read this resource
+        const middleware = authorized(
+          PermissionType.TABLE,
+          PermissionLevel.READ
+        )
+        const ctx = {
+          appId,
+          resourceId: tableId,
+          roleId: socket.data.roleId,
+          user: { _id: socket.data._id },
+          isAuthenticated: socket.data.isAuthenticated,
+          request: {
+            url: "/fake",
+          },
+          get: () => null,
+          throw: () => {
+            // If they don't have access, immediately disconnect them
+            socket.disconnect(true)
+          },
+        }
+        await context.doInAppContext(appId, async () => {
+          await middleware(ctx, async () => {
+            const room = `${appId}-${tableId}`
+            await this.joinRoom(socket, room)
+
+            // Reply with all users in current room
+            const sessions = await this.getRoomSessions(room)
+            callback({ users: sessions })
+          })
+        })
+      }
+    )
 
     // Handle users selecting a new cell
     socket.on(GridSocketEvent.SelectCell, ({ cellId }) => {
@@ -31,7 +67,8 @@ export default class GridSocket extends BaseSocket {
 
   emitRowUpdate(ctx: any, row: Row) {
     const tableId = getTableId(ctx)
-    this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, {
+    const room = `${ctx.appId}-${tableId}`
+    this.emitToRoom(ctx, room, GridSocketEvent.RowChange, {
       id: row._id,
       row,
     })
@@ -39,17 +76,20 @@ export default class GridSocket extends BaseSocket {
 
   emitRowDeletion(ctx: any, id: string) {
     const tableId = getTableId(ctx)
-    this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, { id, row: null })
+    const room = `${ctx.appId}-${tableId}`
+    this.emitToRoom(ctx, room, GridSocketEvent.RowChange, { id, row: null })
   }
 
   emitTableUpdate(ctx: any, table: Table) {
-    this.emitToRoom(ctx, table._id!, GridSocketEvent.TableChange, {
+    const room = `${ctx.appId}-${table._id}`
+    this.emitToRoom(ctx, room, GridSocketEvent.TableChange, {
       id: table._id,
       table,
     })
   }
 
   emitTableDeletion(ctx: any, id: string) {
-    this.emitToRoom(ctx, id, GridSocketEvent.TableChange, { id, table: null })
+    const room = `${ctx.appId}-${id}`
+    this.emitToRoom(ctx, room, GridSocketEvent.TableChange, { id, table: null })
   }
 }
diff --git a/packages/server/src/websockets/websocket.ts b/packages/server/src/websockets/websocket.ts
index d8cc10bda4..52351aea36 100644
--- a/packages/server/src/websockets/websocket.ts
+++ b/packages/server/src/websockets/websocket.ts
@@ -4,12 +4,18 @@ import Koa from "koa"
 import Cookies from "cookies"
 import { userAgent } from "koa-useragent"
 import { auth, Header, redis } from "@budibase/backend-core"
-import currentApp from "../middleware/currentapp"
 import { createAdapter } from "@socket.io/redis-adapter"
 import { Socket } from "socket.io"
 import { getSocketPubSubClients } from "../utilities/redis"
 import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core"
 import { SocketSession } from "@budibase/types"
+import { v4 as uuid } from "uuid"
+
+const anonUser = () => ({
+  _id: uuid(),
+  email: "user@mail.com",
+  firstName: "Anonymous",
+})
 
 export class BaseSocket {
   io: Server
@@ -34,7 +40,6 @@ export class BaseSocket {
     const middlewares = [
       userAgent,
       authenticate,
-      currentApp,
       ...(additionalMiddlewares || []),
     ]
 
@@ -70,7 +75,8 @@ export class BaseSocket {
               // Middlewares are finished
               // Extract some data from our enriched koa context to persist
               // as metadata for the socket
-              const { _id, email, firstName, lastName } = ctx.user
+              const user = ctx.user?._id ? ctx.user : anonUser()
+              const { _id, email, firstName, lastName } = user
               socket.data = {
                 _id,
                 email,
@@ -78,6 +84,8 @@ export class BaseSocket {
                 lastName,
                 sessionId: socket.id,
                 connectedAt: Date.now(),
+                isAuthenticated: ctx.isAuthenticated,
+                roleId: ctx.roleId,
               }
               next()
             }