adds detail link column to grid component

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -327,6 +327,12 @@ export default {
                 key: "datasource",
                 control: TableViewSelect,
               },
+              {
+                label: "Detail URL",
+                key: "detailUrl",
+                placeholder: "tableName/",
+                control: Input,
+              },
               {
                 label: "Editable",
                 key: "editable",

packages/standard-components/components.json

@@ -245,7 +245,8 @@
 			"pagination": {
 				"type": "bool",
 				"default": true
-			}
+			},
+			"detailUrl": "string"
 		}
 	},
 	"dataform": {

packages/standard-components/src/DataGrid/Component.svelte

@@ -20,7 +20,7 @@
   export let theme = "alpine"
   export let height = 500
   export let pagination
-  export let detailUrl = 'https://someurl.com/'
+  export let detailUrl
 
   // These can never change at runtime so don't need to be reactive
   let canEdit = editable && datasource && datasource.type !== "view"
@@ -60,6 +60,10 @@
         const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
         table = await jsonTable.json()
         schema = table.schema
+        // schema._id = {
+        //   type: '_id',
+        //   options: detailUrl
+        // }
       }
 
       columnDefs = Object.keys(schema).map((key, i) => {
@@ -76,6 +80,18 @@
           autoHeight: true,
         }
       })
+      columnDefs = [...columnDefs, {
+          headerName: 'Details',
+          field: '_id',
+          width: 50,
+          flex: 0,
+          editable: false,
+          cellRenderer: getRenderer({
+            type: '_id',
+            options: detailUrl || 'someTableName'
+          }),
+          autoHeight: true,
+      }]
       dataLoaded = true
     }
   })
@@ -92,7 +108,7 @@
     // always 'row'
     if (name === "type") return true
     // tables are always tied to a single tableId, this is irrelevant
-    // if (name === "tableId") return true
+    if (name === "tableId") return true
 
     return false
   }

packages/standard-components/src/DataGrid/customRenderer.js

@@ -12,7 +12,7 @@ const renderers = new Map([
   ["attachment", attachmentRenderer],
   ["options", optionsRenderer],
   ["link", linkedRowRenderer],
-  ["tableId", viewDetailsRenderer]
+  ["_id", viewDetailsRenderer]
 ])
 
 export function getRenderer(schema, editable) {
@@ -135,7 +135,6 @@ function linkedRowRenderer(options, editable) {
 /* eslint-disable no-unused-vars */
 function viewDetailsRenderer(options) {
   return params => {
-    console.log('Params: ', params)
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.placeItems = "center"
@@ -144,7 +143,7 @@ function viewDetailsRenderer(options) {
     new ViewDetails({
       target: container,
       props: {
-        url: options.url + params.value
+        url: `${options}${params.data._id}`
       },
     })