Disable editing autocolumns

packages/client/src/components/app/spreadsheet/DateCell.svelte

@@ -4,8 +4,9 @@
 
   export let value
   export let schema
-  export let selected
   export let onChange
+  export let selected = false
+  export let readonly = false
 
   // adding the 0- will turn a string like 00:00:00 into a valid ISO
   // date, but will make actual ISO dates invalid
@@ -17,18 +18,19 @@
     : dateOnly
     ? "MMM D YYYY"
     : "MMM D YYYY, HH:mm"
+  $: editable = selected && !readonly
 </script>
 
 <div class="container">
   <div class="value">
     {dayjs(timeOnly ? time : value).format(format)}
   </div>
-  {#if selected}
+  {#if editable}
     <Icon name="Calendar" />
   {/if}
 </div>
 
-{#if selected}
+{#if editable}
   <div class="picker">
     <CoreDatePicker
       {value}

packages/client/src/components/app/spreadsheet/OptionsCell.svelte

@@ -3,14 +3,16 @@
 
   export let value
   export let schema
-  export let selected = false
   export let onChange
+  export let selected = false
   export let multi = false
+  export let readonly = false
 
   const options = schema?.constraints?.inclusion || []
 
   let open = false
 
+  $: editable = selected && !readonly
   $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
   $: unselectedOptions = options.filter(x => !values.includes(x))
   $: {
@@ -44,9 +46,9 @@
 <div
   class="container"
   class:multi
-  class:selected
+  class:editable
   class:open
-  on:click={selected ? () => (open = true) : null}
+  on:click={editable ? () => (open = true) : null}
 >
   <div class="values">
     {#each values as val (val)}
@@ -62,7 +64,7 @@
       {/if}
     {/each}
   </div>
-  {#if selected}
+  {#if editable}
     <Icon name="ChevronDown" />
   {/if}
   {#if open}
@@ -101,7 +103,7 @@
     overflow: hidden;
     gap: 4px;
   }
-  .container.selected:hover {
+  .container.editable:hover {
     cursor: pointer;
   }
   .values {

packages/client/src/components/app/spreadsheet/Spreadsheet.svelte

@@ -37,7 +37,8 @@
     limit,
   })
   $: fields = Object.keys($fetch.schema || {})
-  $: initWidths(fields)
+  $: fieldCount = fields.length
+  $: fieldCount, initWidths()
   $: gridStyles = getGridStyles(widths)
   $: schema = $fetch.schema
   $: rowCount = $fetch.rows?.length || 0
@@ -58,7 +59,7 @@
     })
   }
 
-  const initWidths = fields => {
+  const initWidths = () => {
     widths = fields.map(() => defaultWidth)
   }
 
@@ -306,6 +307,7 @@
               schema={schema[field]}
               selected={selectedCell === cellIdx}
               onChange={val => handleChange(row._id, field, val)}
+              readonly={schema[field]?.autocolumn}
             />
           </div>
         {/each}

packages/client/src/components/app/spreadsheet/TextCell.svelte

@@ -3,13 +3,16 @@
   export let selected = false
   export let onChange
   export let type = "text"
+  export let readonly = false
+
+  $: editable = selected && !readonly
 
   const handleChange = e => {
     onChange(e.target.value)
   }
 </script>
 
-{#if selected}
+{#if editable}
   <input {type} value={value || ""} on:change={handleChange} />
 {:else}
   <div class="text-cell">