Make detail column sticky and left orientated and fix crash with options inside grid

packages/standard-components/components.json

@@ -240,7 +240,7 @@
 			},
 			"height": {
 				"type": "number",
-				"default": "500"
+				"default": "540"
 			},
 			"pagination": {
 				"type": "bool",

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

@@ -81,19 +81,29 @@
           autoHeight: true,
         }
       })
-      columnDefs = [...columnDefs, {
+
-          headerName: 'Details',
+      if (detailUrl) {
-          field: '_id',
+        columnDefs = [
-          width: 25,
+          ...columnDefs,
-          flex: 0,
+          {
-          editable: false,
+            headerName: "Detail",
-          sortable: false,
+            field: "_id",
-          cellRenderer: getRenderer({
+            minWidth: 100,
-            type: '_id',
+            width: 100,
-            options: detailUrl
+            flex: 0,
-          }),
+            editable: false,
-          autoHeight: true,
+            sortable: false,
-      }]
+            cellRenderer: getRenderer({
+              type: "_id",
+              options: detailUrl,
+            }),
+            autoHeight: true,
+            pinned: "left",
+            filter: false,
+          },
+        ]
+      }
+
       dataLoaded = true
     }
   })
@@ -148,7 +158,7 @@
     href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
 </svelte:head>
 
-<div style="--grid-height: {height}px">
+<div class="container" style="--grid-height: {height}px">
   {#if dataLoaded}
     {#if canAddDelete}
       <div class="controls">
@@ -182,6 +192,16 @@
 </div>
 
 <style>
+  .container :global(.ag-pinned-left-header) {
+    border-right-color: #dde2eb !important;
+  }
+  .container :global(.ag-pinned-left-header .ag-header-cell-label) {
+    justify-content: center;
+  }
+  .container :global(.ag-cell-last-left-pinned) {
+    border-right-color: #dde2eb !important;
+  }
+
   .controls {
     margin-bottom: var(--spacing-s);
     display: grid;

packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte

@@ -1,12 +1,17 @@
 <script>
-    import { Icon } from '@budibase/bbui'
+  import { createEventDispatcher } from "svelte"
-    export let url
+  import { Icon, Button } from "@budibase/bbui"
+  const dispatch = createEventDispatcher()
+
+  export let url
+  let link
 </script>
 
-<a href={url}><Icon name="view" /></a>
+<a href={url} bind:this={link} />
+<Button small secondary on:click={() => link.click()}>View</Button>
 
 <style>
-    a {
+  a {
-        color: var(--grey-6)
+    display: none;
-    }
+  }
-</style>
+</style>

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

@@ -17,14 +17,18 @@ const renderers = new Map([
 
 export function getRenderer(schema, editable) {
   if (renderers.get(schema.type)) {
-    return renderers.get(schema.type)(schema.options, editable)
+    return renderers.get(schema.type)(
+      schema.options,
+      schema.constraints,
+      editable
+    )
   } else {
     return false
   }
 }
 
 /* eslint-disable no-unused-vars */
-function booleanRenderer(options, editable) {
+function booleanRenderer(options, constraints, editable) {
   return params => {
     const toggle = e => {
       params.value = !params.value
@@ -46,7 +50,7 @@ function booleanRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function attachmentRenderer(options, editable) {
+function attachmentRenderer(options, constraints, editable) {
   return params => {
     const container = document.createElement("div")
 
@@ -68,7 +72,7 @@ function attachmentRenderer(options, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function dateRenderer(options, editable) {
+function dateRenderer(options, constraints, editable) {
   return function(params) {
     const container = document.createElement("div")
     const toggle = e => {
@@ -88,7 +92,7 @@ function dateRenderer(options, editable) {
   }
 }
 
-function optionsRenderer({ inclusion }, editable) {
+function optionsRenderer(options, constraints, editable) {
   return params => {
     if (!editable) return params.value
     const container = document.createElement("div")
@@ -103,7 +107,7 @@ function optionsRenderer({ inclusion }, editable) {
       target: container,
       props: {
         value: params.value,
-        options: inclusion,
+        options: constraints.inclusion,
       },
     })
 
@@ -113,7 +117,7 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(options, editable) {
+function linkedRowRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
@@ -133,11 +137,11 @@ function linkedRowRenderer(options, editable) {
 }
 
 /* eslint-disable no-unused-vars */
-function viewDetailsRenderer(options) {
+function viewDetailsRenderer(options, constraints, editable) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
-    container.style.placeItems = "center"
+    container.style.alignItems = "center"
     container.style.height = "100%"
 
     new ViewDetails({