Allow configuring selecting rows and adding rows

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

@@ -18,8 +18,9 @@
 
   export let API
   export let tableId
-  export let allowAddColumns
+  export let allowAddColumns = true
-  export let allowAddRows
+  export let allowAddRows = true
+  export let allowSelectRows = true
   // export let filter
   // export let sortColumn
   // export let sortOrder
@@ -29,7 +30,12 @@
   const rand = Math.random()
 
   // State stores
-  const config = writable({ tableId, allowAddRows, allowAddColumns })
+  const config = writable({
+    tableId,
+    allowAddRows,
+    allowAddColumns,
+    allowSelectRows,
+  })
   const selectedCellId = writable()
   const selectedRows = writable({})
   const hoveredRowId = writable()
@@ -71,6 +77,7 @@
     tableId,
     allowAddColumns,
     allowAddRows,
+    allowSelectRows,
   })
 
   // Set context for children to consume
@@ -87,7 +94,9 @@
         {#each $visibleRows as row}
           <SheetRow {row} />
         {/each}
-        <NewRow />
+        {#if allowAddRows}
+          <NewRow />
+        {/if}
       </SheetBody>
     </div>
     <ResizeOverlay />

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

@@ -15,6 +15,7 @@
     hoveredRowId,
     scroll,
     reorder,
+    config,
   } = getContext("spreadsheet")
 
   $: scrollLeft = $scroll.left
@@ -57,8 +58,15 @@
 >
   <div class="header row">
     <!-- Field headers -->
-    <SheetCell header label on:click={selectAll} width="40">
+    <SheetCell
-      <Checkbox value={rowCount && selectedRowCount === rowCount} />
+      header
+      label
+      width="40"
+      on:click={$config.allowSelectRows && selectAll}
+    >
+      {#if $config.allowSelectRows}
+        <Checkbox value={rowCount && selectedRowCount === rowCount} />
+      {/if}
     </SheetCell>
 
     {#if $stickyColumn}
@@ -86,17 +94,20 @@
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
         <div class="row" on:mouseenter={() => ($hoveredRowId = row._id)}>
-          <SheetCell
+          <SheetCell label {rowSelected} {rowHovered} width="40">
-            label
+            <div
-            {rowSelected}
+              on:click={() => selectRow(row._id)}
-            {rowHovered}
+              class="checkbox"
-            on:click={() => selectRow(row._id)}
+              class:visible={$config.allowSelectRows &&
-            width="40"
+                (rowSelected || rowHovered)}
-          >
+            >
-            <div class="checkbox" class:visible={rowSelected || rowHovered}>
               <Checkbox value={rowSelected} />
             </div>
-            <div class="number" class:visible={!(rowSelected || rowHovered)}>
+            <div
+              class="number"
+              class:visible={!$config.allowSelectRows ||
+                !(rowSelected || rowHovered)}
+            >
               {row.__idx + 1}
             </div>
           </SheetCell>
@@ -126,24 +137,26 @@
         </div>
       {/each}
 
-      <div class="row new" on:mouseover={() => ($hoveredRowId = "new")}>
+      {#if $config.allowAddRows}
-        <SheetCell
+        <div class="row new" on:mouseover={() => ($hoveredRowId = "new")}>
-          rowHovered={$hoveredRowId === "new"}
-          label
-          on:click={addRow}
-          width="40"
-        >
-          <Icon hoverable name="Add" size="S" />
-        </SheetCell>
-        {#if $stickyColumn}
           <SheetCell
-            on:click={addRow}
-            width={$stickyColumn.width}
             rowHovered={$hoveredRowId === "new"}
-            reorderTarget={$reorder.targetColumn === $stickyColumn.name}
+            label
-          />
+            on:click={addRow}
-        {/if}
+            width="40"
-      </div>
+          >
+            <Icon hoverable name="Add" size="S" />
+          </SheetCell>
+          {#if $stickyColumn}
+            <SheetCell
+              on:click={addRow}
+              width={$stickyColumn.width}
+              rowHovered={$hoveredRowId === "new"}
+              reorderTarget={$reorder.targetColumn === $stickyColumn.name}
+            />
+          {/if}
+        </div>
+      {/if}
     </SheetScrollWrapper>
   </div>
 </div>
@@ -195,7 +208,4 @@
   .number.visible {
     display: flex;
   }
-  .row:hover .number {
-    display: none;
-  }
 </style>