Fix initial sorting state for tables and memoize sorting store to avoid loops

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

@@ -151,11 +151,6 @@ export const createActions = context => {
         // Reset state properties when dataset changes
         if (!$instanceLoaded || resetRows) {
           definition.set($fetch.definition)
-
-          // sort.set({
-          //   column: $fetch.sortColumn,
-          //   order: $fetch.sortOrder,
-          // })
         }
 
         // Reset scroll state when data changes

packages/frontend-core/src/components/grid/stores/sort.js

@@ -1,11 +1,12 @@
-import { writable, get } from "svelte/store"
+import { get } from "svelte/store"
+import { memo } from "../../../utils"
 
 export const createStores = context => {
   const { props } = context
   const $props = get(props)
 
   // Initialise to default props
-  const sort = writable({
+  const sort = memo({
     column: $props.initialSortColumn,
     order: $props.initialSortOrder || "ascending",
   })

packages/frontend-core/src/components/grid/stores/table.js

@@ -54,7 +54,7 @@ export const createActions = context => {
 }
 
 export const initialise = context => {
-  const { datasource, fetch, filter, sort } = context
+  const { datasource, fetch, filter, sort, definition } = context
 
   // Update fetch when filter changes
   filter.subscribe($filter => {
@@ -74,4 +74,20 @@ export const initialise = context => {
       })
     }
   })
+
+  // Ensure sorting UI reflects the fetch state whenever we reset the fetch,
+  // which triggers a new definition
+  definition.subscribe(() => {
+    if (get(datasource)?.type === "table") {
+      const $fetch = get(fetch)
+      if (!$fetch) {
+        return
+      }
+      const { sortColumn, sortOrder } = get($fetch)
+      sort.set({
+        column: sortColumn,
+        order: sortOrder,
+      })
+    }
+  })
 }

packages/frontend-core/src/components/grid/stores/viewV2.js

@@ -82,16 +82,10 @@ export const initialise = context => {
     if (!$definition || get(datasource)?.type !== "viewV2") {
       return
     }
-    const $sort = get(sort)
-    if (
-      $definition.sort?.field !== $sort?.column ||
-      $definition.sort?.order !== $sort?.order
-    ) {
-      sort.set({
-        column: $definition.sort?.field,
-        order: $definition.sort?.order,
-      })
-    }
+    sort.set({
+      column: $definition.sort?.field,
+      order: $definition.sort?.order,
+    })
   })
 
   // When sorting changes, ensure view definition is kept up to date