Add flags for controlling editing and adding rows in sheets

packages/frontend-core/src/components/sheet/HeaderRow.svelte

@@ -2,8 +2,9 @@
   import { getContext } from "svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
   import HeaderCell from "./cells/HeaderCell.svelte"
+  import { Icon } from "@budibase/bbui"
 
-  const { visibleColumns } = getContext("sheet")
+  const { visibleColumns, dispatch, config } = getContext("sheet")
 </script>
 
 <div class="header">
@@ -14,6 +15,11 @@
       {/each}
     </div>
   </SheetScrollWrapper>
+  {#if $config.allowAddColumns}
+    <div class="new-column" on:click={() => dispatch("add-column")}>
+      <Icon size="S" name="Add" />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -26,4 +32,19 @@
   .row {
     display: flex;
   }
+  .new-column {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: var(--cell-height);
+    background: var(--spectrum-global-color-gray-100);
+    display: grid;
+    place-items: center;
+    width: 40px;
+    border-left: var(--cell-border);
+  }
+  .new-column:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-200);
+  }
 </style>

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -26,6 +26,8 @@
   export let tableId
   export let allowAddRows = true
   export let allowSelectRows = true
+  export let allowAddColumns = true
+  export let allowEditColumns = true
 
   // Sheet constants
   const cellHeight = 36
@@ -36,6 +38,8 @@
     tableId,
     allowAddRows,
     allowSelectRows,
+    allowAddColumns,
+    allowEditColumns,
   })
 
   // Build up spreadsheet context
@@ -65,6 +69,8 @@
     tableId,
     allowAddRows,
     allowSelectRows,
+    allowAddColumns,
+    allowEditColumns,
   })
 
   // Set context for children to consume

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -7,8 +7,16 @@
   export let column
   export let orderable = true
 
-  const { reorder, isReordering, isResizing, rand, sort, columns, dispatch } =
-    getContext("sheet")
+  const {
+    reorder,
+    isReordering,
+    isResizing,
+    rand,
+    sort,
+    columns,
+    dispatch,
+    config,
+  } = getContext("sheet")
 
   let anchor
   let open = false
@@ -117,7 +125,9 @@
   animate={false}
 >
   <Menu>
-    <MenuItem icon="Edit" on:click={editColumn}>Edit column</MenuItem>
+    {#if $config.allowEditColumns}
+      <MenuItem icon="Edit" on:click={editColumn}>Edit column</MenuItem>
+    {/if}
     <MenuItem icon="SortOrderUp" on:click={sortAscending}>
       Sort ascending
     </MenuItem>