Improve sorting

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

@@ -163,8 +163,20 @@
     >
       Use as display column
     </MenuItem>
-    <MenuItem icon="SortOrderUp" on:click={sortAscending}>Sort A-Z</MenuItem>
+    <MenuItem
-    <MenuItem icon="SortOrderDown" on:click={sortDescending}>Sort Z-A</MenuItem>
+      icon="SortOrderUp"
+      on:click={sortAscending}
+      disabled={column.name === $sort.column && $sort.order === "ascending"}
+    >
+      Sort A-Z
+    </MenuItem>
+    <MenuItem
+      icon="SortOrderDown"
+      on:click={sortDescending}
+      disabled={column.name === $sort.column && $sort.order === "descending"}
+    >
+      Sort Z-A
+    </MenuItem>
     <MenuItem
       disabled={!canMoveLeft}
       icon="ChevronDoubleLeft"

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

@@ -76,7 +76,7 @@
 <Popover bind:open {anchor} align="left">
   <div class="content">
     <Select
-      placeholder="Default"
+      placeholder={null}
       value={$sort.column}
       options={columnOptions}
       autoWidth

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

@@ -192,7 +192,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--spectrum-global-color-gray-100);
+    background: var(--background);
   }
   .controls-left,
   .controls-right {

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

@@ -88,7 +88,6 @@ export const deriveStores = context => {
     instanceLoaded.set(false)
 
     // Reset state
-    sort.set(initialSortState)
     filter.set([])
 
     // Create new fetch model
@@ -110,19 +109,25 @@ export const deriveStores = context => {
     // Subscribe to changes of this fetch model
     unsubscribe = newFetch.subscribe($fetch => {
       if ($fetch.loaded && !$fetch.loading) {
+        const $instanceLoaded = get(instanceLoaded)
         const resetRows = $fetch.resetKey !== lastResetKey
         lastResetKey = $fetch.resetKey
 
-        // Reset scroll state when data changes
+        // Reset state properties when dataset changes
-        if (!get(instanceLoaded)) {
+        if (!$instanceLoaded || resetRows) {
           table.set($fetch.definition)
+          sort.set({
+            column: $fetch.sortColumn,
+            order: $fetch.sortOrder,
+          })
+        }
 
+        // Reset scroll state when data changes
+        if (!$instanceLoaded) {
           // Reset both top and left for a new table ID
           instanceLoaded.set(true)
           scroll.set({ top: 0, left: 0 })
         } else if (resetRows) {
-          table.set($fetch.definition)
-
           // Only reset top scroll position when resetting rows
           scroll.update(state => ({ ...state, top: 0 }))
         }