Make sticky column the primary display and fix opening options cells

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

@@ -41,6 +41,14 @@
       }
     }
   }
+
+  const toggleOpen = () => {
+    if (multi) {
+      open = true
+    } else {
+      open = !open
+    }
+  }
 </script>
 
 <div
@@ -48,7 +56,7 @@
   class:multi
   class:editable
   class:open
-  on:click={editable ? () => (open = true) : null}
+  on:click={editable ? toggleOpen : null}
 >
   <div class="values">
     {#each values as val (val)}

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

@@ -36,11 +36,12 @@
     query,
     limit,
   })
-  $: fields = Object.keys($fetch.schema || {})
+  $: schema = $fetch.schema
+  $: primaryDisplay = $fetch.definition?.primaryDisplay
+  $: fields = getFields(schema, primaryDisplay)
   $: fieldCount = fields.length
   $: fieldCount, initWidths()
   $: gridStyles = getGridStyles(widths)
-  $: schema = $fetch.schema
   $: rowCount = $fetch.rows?.length || 0
   $: selectedRowCount = Object.values(selectedRows).filter(x => !!x).length
   $: rows = getSortedRows($fetch.rows, newRows)
@@ -59,6 +60,14 @@
     })
   }
 
+  const getFields = (schema, primaryDisplay) => {
+    let fields = Object.keys(schema || {})
+    if (primaryDisplay) {
+      fields = [primaryDisplay, ...fields.filter(x => x !== primaryDisplay)]
+    }
+    return fields
+  }
+
   const initWidths = () => {
     widths = fields.map(() => defaultWidth)
   }
@@ -293,7 +302,7 @@
           <div
             class="cell"
             class:row-selected={rowSelected}
-            class:sticky={fieldIdx === 0}
+            class:sticky={field === primaryDisplay}
             class:hovered={rowHovered}
             class:selected={selectedCell === cellIdx}
             class:shadow={horizontallyScrolled}
@@ -328,7 +337,7 @@
       {#each fields as field, fieldIdx}
         <div
           class="cell new"
-          class:sticky={fieldIdx === 0}
+          class:sticky={field === primaryDisplay}
           class:shadow={horizontallyScrolled}
           class:hovered={hoveredRow === "new"}
           on:click={() => addRow(field)}