diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index f3a7678cf2..8c66d9ecfc 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -1,95 +1,17 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Icon, notifications } from "@budibase/bbui"
-  import { getColumnIcon } from "../lib/utils"
-  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
-  import { helpers } from "@budibase/shared-core"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
 
   export let allowViewReadonlyColumns = false
 
-  const { columns, datasource, dispatch } = getContext("grid")
+  const { columns } = getContext("grid")
 
   let open = false
   let anchor
 
-  $: restrictedColumns = $columns.filter(col => !col.visible || col.readonly)
-  $: anyRestricted = restrictedColumns.length
+  $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
   $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
-
-  const toggleColumn = async (column, permission) => {
-    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    const readonly = permission === PERMISSION_OPTIONS.READONLY
-
-    await datasource.actions.addSchemaMutation(column.name, {
-      visible,
-      readonly,
-    })
-    try {
-      await datasource.actions.saveSchemaMutations()
-    } catch (e) {
-      notifications.error(e.message)
-    } finally {
-      await datasource.actions.resetSchemaMutations()
-      await datasource.actions.refreshDefinition()
-    }
-    dispatch(visible ? "show-column" : "hide-column")
-  }
-
-  const PERMISSION_OPTIONS = {
-    WRITABLE: "writable",
-    READONLY: "readonly",
-    HIDDEN: "hidden",
-  }
-
-  $: displayColumns = $columns.map(c => {
-    const isRequired = helpers.schema.isRequired(c.schema.constraints)
-    const requiredTooltip = isRequired && "Required columns must be writable"
-    const editEnabled =
-      !isRequired ||
-      columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
-    const options = [
-      {
-        icon: "Edit",
-        value: PERMISSION_OPTIONS.WRITABLE,
-        tooltip: (!editEnabled && requiredTooltip) || "Writable",
-        disabled: !editEnabled,
-      },
-    ]
-    if ($datasource.type === "viewV2") {
-      options.push({
-        icon: "Visibility",
-        value: PERMISSION_OPTIONS.READONLY,
-        tooltip: allowViewReadonlyColumns
-          ? requiredTooltip || "Read only"
-          : "Read only (premium feature)",
-        disabled: !allowViewReadonlyColumns || isRequired,
-      })
-    }
-
-    options.push({
-      icon: "VisibilityOff",
-      value: PERMISSION_OPTIONS.HIDDEN,
-      disabled: c.primaryDisplay || isRequired,
-      tooltip:
-        (c.primaryDisplay && "Display column cannot be hidden") ||
-        requiredTooltip ||
-        "Hidden",
-    })
-
-    return { ...c, options }
-  })
-
-  function columnToPermissionOptions(column) {
-    if (!column.schema.visible) {
-      return PERMISSION_OPTIONS.HIDDEN
-    }
-
-    if (column.schema.readonly) {
-      return PERMISSION_OPTIONS.READONLY
-    }
-
-    return PERMISSION_OPTIONS.WRITABLE
-  }
 </script>
 
 <div bind:this={anchor}>
@@ -106,51 +28,5 @@
 </div>
 
 <Popover bind:open {anchor} align="left">
-  <div class="content">
-    <div class="columns">
-      {#each displayColumns as column}
-        <div class="column">
-          <Icon size="S" name={getColumnIcon(column)} />
-          <div class="column-label" title={column.label}>
-            {column.label}
-          </div>
-        </div>
-        <ToggleActionButtonGroup
-          on:click={e => toggleColumn(column, e.detail)}
-          value={columnToPermissionOptions(column)}
-          options={column.options}
-        />
-      {/each}
-    </div>
-  </div>
+  <ColumnsSettingContent columns={$columns} {allowViewReadonlyColumns} />
 </Popover>
-
-<style>
-  .content {
-    padding: 12px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-  .columns {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 1fr auto;
-    grid-row-gap: 8px;
-    grid-column-gap: 24px;
-  }
-  .columns :global(.spectrum-Switch) {
-    margin-right: 0;
-  }
-  .column {
-    display: flex;
-    gap: 8px;
-  }
-  .column-label {
-    min-width: 80px;
-    max-width: 200px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte
new file mode 100644
index 0000000000..b825ac1891
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingContent.svelte
@@ -0,0 +1,134 @@
+<script>
+  import { getContext } from "svelte"
+  import { Icon, notifications } from "@budibase/bbui"
+  import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
+  import { helpers } from "@budibase/shared-core"
+
+  export let allowViewReadonlyColumns = false
+
+  const { columns, datasource, dispatch } = getContext("grid")
+
+  const toggleColumn = async (column, permission) => {
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
+    const readonly = permission === PERMISSION_OPTIONS.READONLY
+
+    await datasource.actions.addSchemaMutation(column.name, {
+      visible,
+      readonly,
+    })
+    try {
+      await datasource.actions.saveSchemaMutations()
+    } catch (e) {
+      notifications.error(e.message)
+    } finally {
+      await datasource.actions.resetSchemaMutations()
+      await datasource.actions.refreshDefinition()
+    }
+    dispatch(visible ? "show-column" : "hide-column")
+  }
+
+  const PERMISSION_OPTIONS = {
+    WRITABLE: "writable",
+    READONLY: "readonly",
+    HIDDEN: "hidden",
+  }
+
+  $: displayColumns = $columns.map(c => {
+    const isRequired = helpers.schema.isRequired(c.schema.constraints)
+    const requiredTooltip = isRequired && "Required columns must be writable"
+    const editEnabled =
+      !isRequired ||
+      columnToPermissionOptions(c) !== PERMISSION_OPTIONS.WRITABLE
+    const options = [
+      {
+        icon: "Edit",
+        value: PERMISSION_OPTIONS.WRITABLE,
+        tooltip: (!editEnabled && requiredTooltip) || "Writable",
+        disabled: !editEnabled,
+      },
+    ]
+    if ($datasource.type === "viewV2") {
+      options.push({
+        icon: "Visibility",
+        value: PERMISSION_OPTIONS.READONLY,
+        tooltip: allowViewReadonlyColumns
+          ? requiredTooltip || "Read only"
+          : "Read only (premium feature)",
+        disabled: !allowViewReadonlyColumns || isRequired,
+      })
+    }
+
+    options.push({
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      disabled: c.primaryDisplay || isRequired,
+      tooltip:
+        (c.primaryDisplay && "Display column cannot be hidden") ||
+        requiredTooltip ||
+        "Hidden",
+    })
+
+    return { ...c, options }
+  })
+
+  function columnToPermissionOptions(column) {
+    if (!column.schema.visible) {
+      return PERMISSION_OPTIONS.HIDDEN
+    }
+
+    if (column.schema.readonly) {
+      return PERMISSION_OPTIONS.READONLY
+    }
+
+    return PERMISSION_OPTIONS.WRITABLE
+  }
+</script>
+
+<div class="content">
+  <div class="columns">
+    {#each displayColumns as column}
+      <div class="column">
+        <Icon size="S" name={getColumnIcon(column)} />
+        <div class="column-label" title={column.label}>
+          {column.label}
+        </div>
+      </div>
+      <ToggleActionButtonGroup
+        on:click={e => toggleColumn(column, e.detail)}
+        value={columnToPermissionOptions(column)}
+        options={column.options}
+      />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .content {
+    padding: 12px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .columns {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    grid-row-gap: 8px;
+    grid-column-gap: 24px;
+  }
+  .columns :global(.spectrum-Switch) {
+    margin-right: 0;
+  }
+  .column {
+    display: flex;
+    gap: 8px;
+  }
+  .column-label {
+    min-width: 80px;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+</style>