Add additional reorder options and improve beta button

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

@@ -80,8 +80,18 @@
     open = false
   }
 
-  const makeDisplayColumn = async () => {
+  const moveStart = () => {
-    await columns.actions.changePrimaryDisplay(column.name)
+    reorder.actions.moveColumnToStart(column.name)
+    open = false
+  }
+
+  const moveEnd = () => {
+    reorder.actions.moveColumnToEnd(column.name)
+    open = false
+  }
+
+  const makeDisplayColumn = () => {
+    columns.actions.changePrimaryDisplay(column.name)
     open = false
   }
 </script>
@@ -141,24 +151,40 @@
   animate={false}
 >
   <Menu>
-    {#if $config.allowEditColumns}
+    <MenuItem
-      <MenuItem icon="Edit" on:click={editColumn}>Edit column</MenuItem>
+      icon="Edit"
-    {/if}
+      on:click={editColumn}
-    <MenuItem icon="SortOrderUp" on:click={sortAscending}>Sort A-Z</MenuItem>
+      disabled={!$config.allowEditColumns}>Edit column</MenuItem
-    <MenuItem icon="SortOrderDown" on:click={sortDescending}>Sort Z-A</MenuItem>
+    >
-    <MenuItem disabled={!canMoveLeft} icon="ArrowLeft" on:click={moveLeft}>
-      Move left
-    </MenuItem>
-    <MenuItem disabled={!canMoveRight} icon="ArrowRight" on:click={moveRight}>
-      Move right
-    </MenuItem>
     <MenuItem
       icon="Label"
       on:click={makeDisplayColumn}
-      disabled={column.idx === "sticky"}
+      disabled={column.idx === "sticky" || !$config.allowEditColumns}
     >
       Use as display column
     </MenuItem>
+    <MenuItem icon="SortOrderUp" on:click={sortAscending}>Sort A-Z</MenuItem>
+    <MenuItem icon="SortOrderDown" on:click={sortDescending}>Sort Z-A</MenuItem>
+    <MenuItem
+      disabled={!canMoveLeft}
+      icon="ChevronDoubleLeft"
+      on:click={moveStart}
+    >
+      Move to start
+    </MenuItem>
+    <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
+      Move left
+    </MenuItem>
+    <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
+      Move right
+    </MenuItem>
+    <MenuItem
+      disabled={!canMoveRight}
+      icon="ChevronDoubleRight"
+      on:click={moveEnd}
+    >
+      Move to end
+    </MenuItem>
   </Menu>
 </Popover>
 

packages/frontend-core/src/components/sheet/controls/BetaButton.svelte

@@ -33,7 +33,7 @@
     transform: rotate(-20deg);
     background: linear-gradient(
       to top,
-      var(--cell-background) 10%,
+      var(--cell-background) 20%,
       transparent
     );
   }

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

@@ -1,5 +1,4 @@
 import { get, writable, derived } from "svelte/store"
-import { cloneDeep } from "lodash/fp"
 
 const reorderInitialState = {
   sourceColumn: null,
@@ -24,17 +23,8 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const {
+  const { reorder, columns, visibleColumns, scroll, bounds, stickyColumn, ui } =
-    reorder,
+    context
-    columns,
-    visibleColumns,
-    scroll,
-    bounds,
-    stickyColumn,
-    ui,
-    table,
-    API,
-  } = context
 
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (column, e) => {
@@ -132,6 +122,17 @@ export const deriveStores = context => {
     })
   }
 
+  const moveColumnToStart = async column => {
+    moveColumn(column, null)
+    await columns.actions.saveChanges()
+  }
+
+  const moveColumnToEnd = async column => {
+    const $visibleColumns = get(visibleColumns)
+    moveColumn(column, $visibleColumns[$visibleColumns.length - 1]?.name)
+    await columns.actions.saveChanges()
+  }
+
   // Moves a column one place left (as appears visually)
   const moveColumnLeft = async column => {
     const $visibleColumns = get(visibleColumns)
@@ -159,6 +160,8 @@ export const deriveStores = context => {
         stopReordering,
         moveColumnLeft,
         moveColumnRight,
+        moveColumnToStart,
+        moveColumnToEnd,
       },
     },
   }