Allow reordering columns to be the first column after sticky column

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

@@ -14,9 +14,9 @@
       {#each $visibleColumns as column}
         <SheetCell
           header
-          reorderSource={$reorder.columnIdx === column.idx}
+          reorderSource={$reorder.sourceColumn === column.name}
-          reorderTarget={$reorder.swapColumnIdx === column.idx}
+          reorderTarget={$reorder.targetColumn === column.name}
-          on:mousedown={e => reorder.actions.startReordering(column.idx, e)}
+          on:mousedown={e => reorder.actions.startReordering(column.name, e)}
           width={column.width}
           left={column.left}
         >

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

@@ -22,8 +22,8 @@
       on:click={() => addRow(column)}
       width={column.width}
       left={column.left}
-      reorderSource={$reorder.columnIdx === column.idx}
+      reorderSource={$reorder.sourceColumn === column.name}
-      reorderTarget={$reorder.swapColumnIdx === column.idx}
+      reorderTarget={$reorder.targetColumn === column.name}
     />
   {/each}
 </div>

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

@@ -25,8 +25,8 @@
       {rowSelected}
       {rowHovered}
       selected={$selectedCellId === cellIdx}
-      reorderSource={$reorder.columnIdx === column.idx}
+      reorderSource={$reorder.sourceColumn === column.name}
-      reorderTarget={$reorder.swapColumnIdx === column.idx}
+      reorderTarget={$reorder.targetColumn === column.name}
       on:click={() => ($selectedCellId = cellIdx)}
       width={column.width}
       left={column.left}

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

@@ -89,7 +89,6 @@
 
 <style>
   div {
-    overflow: hidden;
     min-width: 100%;
     min-height: 100%;
   }

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

@@ -14,6 +14,7 @@
     selectedCellId,
     hoveredRowId,
     scroll,
+    reorder,
   } = getContext("spreadsheet")
 
   $: scrollLeft = $scroll.left
@@ -66,6 +67,7 @@
         sticky
         width={$stickyColumn.width}
         left={$stickyColumn.left}
+        reorderTarget={$reorder.targetColumn === $stickyColumn.name}
       >
         <Icon
           size="S"
@@ -110,6 +112,7 @@
               on:click={() => ($selectedCellId = cellIdx)}
               width={$stickyColumn.width}
               left="40"
+              reorderTarget={$reorder.targetColumn === $stickyColumn.name}
             >
               <svelte:component
                 this={getCellRenderer($stickyColumn)}
@@ -139,6 +142,7 @@
             on:click={addRow}
             width={$stickyColumn.width}
             rowHovered={$hoveredRowId === "new"}
+            reorderTarget={$reorder.targetColumn === $stickyColumn.name}
           />
         {/if}
       </div>

packages/frontend-core/src/components/sheet/stores/reorder.js

@@ -1,29 +1,39 @@
 import { get, writable } from "svelte/store"
 
 export const createReorderStores = context => {
-  const { columns, rand, scroll, bounds } = context
+  const { columns, rand, scroll, bounds, stickyColumn } = context
   const reorderInitialState = {
-    columnIdx: null,
+    sourceColumn: null,
-    swapColumnIdx: null,
+    targetColumn: null,
     breakpoints: [],
     initialMouseX: null,
   }
   const reorder = writable(reorderInitialState)
 
   // Callback when dragging on a colum header and starting reordering
-  const startReordering = (columnIdx, e) => {
+  const startReordering = (column, e) => {
     const $columns = get(columns)
     const $bounds = get(bounds)
     const $scroll = get(scroll)
+    const $stickyColumn = get(stickyColumn)
 
     // Generate new breakpoints for the current columns
-    let breakpoints = $columns.map(col => col.left + col.width)
+    let breakpoints = $columns.map(col => ({
+      x: col.left + col.width,
+      column: col.name,
+    }))
+    if ($stickyColumn) {
+      breakpoints.unshift({
+        x: 0,
+        column: $stickyColumn.name,
+      })
+    }
 
     // Update state
     reorder.set({
-      columnIdx,
+      sourceColumn: column,
+      targetColumn: null,
       breakpoints,
-      swapColumnIdx: null,
       initialMouseX: e.clientX,
       scrollLeft: $scroll.left,
       sheetLeft: $bounds.left,
@@ -41,26 +51,23 @@ export const createReorderStores = context => {
   // Callback when moving the mouse when reordering columns
   const onReorderMouseMove = e => {
     const $reorder = get(reorder)
-    if ($reorder.columnIdx == null) {
-      return
-    }
 
     // Compute the closest breakpoint to the current position
-    let swapColumnIdx
+    let targetColumn
     let minDistance = Number.MAX_SAFE_INTEGER
     const mouseX = e.clientX - $reorder.sheetLeft + $reorder.scrollLeft
-    $reorder.breakpoints.forEach((point, idx) => {
+    $reorder.breakpoints.forEach(point => {
-      const distance = Math.abs(point - mouseX)
+      const distance = Math.abs(point.x - mouseX)
       if (distance < minDistance) {
         minDistance = distance
-        swapColumnIdx = idx
+        targetColumn = point.column
       }
     })
 
-    if (swapColumnIdx !== $reorder.swapColumnIdx) {
+    if (targetColumn !== $reorder.targetColumn) {
       reorder.update(state => ({
         ...state,
-        swapColumnIdx: swapColumnIdx,
+        targetColumn,
       }))
     }
   }
@@ -68,14 +75,17 @@ export const createReorderStores = context => {
   // Callback when stopping reordering columns
   const stopReordering = () => {
     // Swap position of columns
-    let { columnIdx, swapColumnIdx } = get(reorder)
+    const $columns = get(columns)
-    swapColumnIdx++
+    let { sourceColumn, targetColumn } = get(reorder)
+    let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
+    let targetIdx = $columns.findIndex(x => x.name === targetColumn)
+    targetIdx++
     columns.update(state => {
-      const removed = state.splice(columnIdx, 1)
+      const removed = state.splice(sourceIdx, 1)
-      if (--swapColumnIdx < columnIdx) {
+      if (--targetIdx < sourceIdx) {
-        swapColumnIdx++
+        targetIdx++
       }
-      state.splice(swapColumnIdx, 0, removed[0])
+      state.splice(targetIdx, 0, removed[0])
       let offset = 0
       return state.map((col, idx) => {
         const newCol = {