Add readonly option in view columns

packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte

@@ -28,6 +28,7 @@
     showAvatars={false}
     on:updatedatasource={handleGridViewUpdate}
     isCloud={$admin.cloud}
+    allowReadonlyColumns
   >
     <svelte:fragment slot="filter">
       <GridFilterButton />

packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -1,9 +1,11 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon, notifications } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
   import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
+  export let allowReadonlyColumns = false
+
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
   let open = false
@@ -14,9 +16,14 @@
 
   const toggleColumn = async (column, permission) => {
     const visible = permission !== PERMISSION_OPTIONS.HIDDEN
+    const readonly = permission === PERMISSION_OPTIONS.READONLY
 
-    datasource.actions.addSchemaMutation(column.name, { visible })
+    datasource.actions.addSchemaMutation(column.name, { visible, readonly })
+    try {
       await datasource.actions.saveSchemaMutations()
+    } catch (e) {
+      notifications.error(e.message)
+    }
     dispatch(visible ? "show-column" : "hide-column")
   }
 
@@ -27,17 +34,29 @@
 
   const PERMISSION_OPTIONS = {
     WRITABLE: "writable",
+    READONLY: "readonly",
     HIDDEN: "hidden",
   }
 
-  const options = [
+  const EDIT_OPTION = {
-    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    icon: "Edit",
-    {
+    value: PERMISSION_OPTIONS.WRITABLE,
+    tooltip: "Writable",
+  }
+  const READONLY_OPTION = {
+    icon: "Visibility",
+    value: PERMISSION_OPTIONS.READONLY,
+    tooltip: "Read only",
+  }
+  const HIDDEN_OPTION = {
     icon: "VisibilityOff",
     value: PERMISSION_OPTIONS.HIDDEN,
     tooltip: "Hidden",
-    },
+  }
-  ]
+
+  $: options = allowReadonlyColumns
+    ? [EDIT_OPTION, READONLY_OPTION, HIDDEN_OPTION]
+    : [EDIT_OPTION, HIDDEN_OPTION]
 
   function columnToPermissionOptions(column) {
     if (!column.visible) {

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -57,6 +57,7 @@
   export let buttons = null
   export let darkMode
   export let isCloud = null
+  export let allowReadonlyColumns = false
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -153,7 +154,7 @@
       <div class="controls-left">
         <slot name="filter" />
         <SortButton />
-        <ColumnsSettingButton />
+        <ColumnsSettingButton {allowReadonlyColumns} />
         <SizeButton />
         <slot name="controls" />
       </div>