Add ability to link rows in tables, and link rows in the table with search block

packages/client/manifest.json

@@ -2457,12 +2457,12 @@
     "settings": [
       {
         "type": "dataProvider",
-        "label": "Provider",
+        "label": "Data provider",
         "key": "dataProvider"
       },
       {
         "type": "number",
-        "label": "Row Count",
+        "label": "Row count",
         "key": "rowCount",
         "defaultValue": 8
       },
@@ -2496,9 +2496,36 @@
       },
       {
         "type": "boolean",
-        "label": "Auto Columns",
+        "label": "Show auto columns",
         "key": "showAutoColumns",
         "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Link table rows",
+        "key": "linkRows"
+      },
+      {
+        "type": "boolean",
+        "label": "Open link screens in modal",
+        "key": "linkPeek"
+      },
+      {
+        "type": "url",
+        "label": "Link screen",
+        "key": "linkURL"
+      },
+      {
+        "section": true,
+        "name": "Advanced",
+        "settings": [
+          {
+            "type": "field",
+            "label": "ID column for linking (appended to URL)",
+            "key": "linkColumn",
+            "placeholder": "Default"
+          }
+        ]
       }
     ],
     "context": {
@@ -2662,8 +2689,22 @@
           {
             "type": "boolean",
             "label": "Show auto columns",
-            "key": "showAutoColumns",
+            "key": "showAutoColumns"
-            "defaultValue": false
+          },
+          {
+            "type": "boolean",
+            "label": "Link table rows",
+            "key": "linkRows"
+          },
+          {
+            "type": "boolean",
+            "label": "Open link in modal",
+            "key": "linkPeek"
+          },
+          {
+            "type": "url",
+            "label": "Link screen",
+            "key": "linkURL"
           }
         ]
       },
@@ -2684,10 +2725,22 @@
           },
           {
             "type": "event",
-            "label": "Title Button Action",
+            "label": "Title button action",
             "key": "titleButtonOnClick"
           }
         ]
+      },
+      {
+        "section": true,
+        "name": "Advanced",
+        "settings": [
+          {
+            "type": "field",
+            "label": "ID column for linking (appended to URL)",
+            "key": "linkColumn",
+            "placeholder": "Default"
+          }
+        ]
       }
     ],
     "context": {

packages/client/src/components/app/blocks/TableWithSearch.svelte

@@ -16,6 +16,10 @@
   export let rowCount
   export let quiet
   export let size
+  export let linkRows
+  export let linkURL
+  export let linkColumn
+  export let linkPeek
   export let showTitleButton
   export let titleButtonText
   export let titleButtonOnClick
@@ -138,6 +142,10 @@
             rowCount,
             quiet,
             size,
+            linkRows,
+            linkURL,
+            linkColumn,
+            linkPeek,
           }}
         />
       </BlockComponent>

packages/client/src/components/app/table/Table.svelte

@@ -9,9 +9,13 @@
   export let rowCount
   export let quiet
   export let size
+  export let linkRows
+  export let linkURL
+  export let linkColumn
+  export let linkPeek
 
   const component = getContext("component")
-  const { styleable, getAction, ActionTypes } = getContext("sdk")
+  const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
   const setSorting = getAction(
     dataProvider?.id,
     ActionTypes.SetDataProviderSorting
@@ -81,6 +85,19 @@
       order: e.detail.order,
     })
   }
+
+  const onClick = e => {
+    if (!linkRows || !linkURL) {
+      return
+    }
+    const col = linkColumn || "_id"
+    const id = e.detail?.[col]
+    if (!id) {
+      return
+    }
+    const split = linkURL.split("/:")
+    routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
+  }
 </script>
 
 <div use:styleable={$component.styles} class={size}>
@@ -97,6 +114,7 @@
     showAutoColumns={true}
     disableSorting
     on:sort={onSort}
+    on:click={onClick}
   >
     <slot />
   </Table>

packages/client/src/stores/routes.js

@@ -1,6 +1,8 @@
-import { writable } from "svelte/store"
+import { get, writable } from "svelte/store"
 import { push } from "svelte-spa-router"
 import * as API from "../api"
+import { peekStore } from "./peek"
+import { builderStore } from "./builder"
 
 const createRouteStore = () => {
   const initialState = {
@@ -59,7 +61,25 @@ const createRouteStore = () => {
       return state
     })
   }
-  const navigate = push
+  const navigate = (url, peek) => {
+    if (get(builderStore).inBuilder) {
+      return
+    }
+    if (url) {
+      // If we're already peeking, don't peek again
+      const isPeeking = get(store).queryParams?.peek
+      if (peek && !isPeeking) {
+        peekStore.actions.showPeek(url)
+      } else {
+        const external = !url.startsWith("/")
+        if (external) {
+          window.location.href = url
+        } else {
+          push(url)
+        }
+      }
+    }
+  }
   const setRouterLoaded = () => {
     store.update(state => ({ ...state, routerLoaded: true }))
   }

packages/client/src/utils/buttonActions.js

@@ -42,20 +42,7 @@ const triggerAutomationHandler = async action => {
 
 const navigationHandler = action => {
   const { url, peek } = action.parameters
-  if (url) {
+  routeStore.actions.navigate(url, peek)
-    // If we're already peeking, don't peek again
-    const isPeeking = get(routeStore).queryParams?.peek
-    if (peek && !isPeeking) {
-      peekStore.actions.showPeek(url)
-    } else {
-      const external = !url.startsWith("/")
-      if (external) {
-        window.location.href = url
-      } else {
-        routeStore.actions.navigate(action.parameters.url)
-      }
-    }
-  }
 }
 
 const queryExecutionHandler = async action => {