adds editable setting

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

@@ -326,6 +326,12 @@ export default {
                 key: "datasource",
                 control: ModelViewSelect,
               },
+              {
+                label: "Editable",
+                key: "editable",
+                valueKey: "checked",
+                control: Checkbox,
+              },
             ],
           },
           children: [],

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

@@ -1,75 +0,0 @@
-{
-  "categories": [
-    {
-      "name": "Basic",
-      "components": [
-        {
-          "component": "Container",
-          "description": "This component contains things within itself",
-          "icon": "ri-layout-row-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Text",
-          "description": "This is a simple text component",
-          "icon": "ri-t-box-fill",
-          "commonProps": {
-          },
-          "type": [
-            {
-              "_component": "@budibase/standard-components/header",
-              "name": "Headline",
-              "icon": "headline",
-              "props": {
-                "type": {
-                  "type": "options",
-                  "options": [
-                    "h1",
-                    "h2"
-                  ],
-                  "default": "h1"
-                }
-              }
-            },
-            {
-              "_component": "@budibase/standard-components/text",
-              "name": "Paragraph",
-              "icon": "paragraph",
-              "props": {
-              }
-            }
-          ]
-        },
-        {
-          "component": "Button",
-          "description": "A basic html button that is ready for styling",
-          "icon": "ri-radio-button-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Icon",
-          "description": "A basic component for displaying icons",
-          "icon": "ri-sun-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Avatar",
-          "description": "A basic component for rendering an avatar",
-          "icon": "ri-user-smile-fill",
-          "commonProps": {},
-          "type": []
-        },
-        {
-          "component": "Link",
-          "description": "A basic link component for internal and external links",
-          "icon": "ri-link",
-          "commonProps": {},
-          "type": []
-        }
-      ]
-    }
-  ]
-}

packages/standard-components/components.json

@@ -225,7 +225,8 @@
 		"description": "a datagrid component with functionality to add, remove and edit rows.",
 		"data": true,
 		"props": {
-			"datasource": "models"
+			"datasource": "models",
+			"editable": "bool"
 		}
 	},
 	"dataform": {

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

@@ -16,12 +16,22 @@
 
   export let _bb
   export let datasource = {}
+  export let editable
 
   let dataLoaded = false
   let data
   let columnDefs
   let selectedRows = []
   let model
+  let options = {
+    defaultColDef: {
+      flex: 1,
+      minWidth: 150,
+      filter: true,
+    },
+    rowSelection: editable ? "multiple" : "single",
+    suppressRowClickSelection: !editable,
+  }
 
   onMount(async () => {
     if (datasource.modelId) {
@@ -39,11 +49,13 @@
             field: key,
             hide: shouldHideField(key),
             sortable: true,
-            editable: isEditable(schema[key].type),
+            editable: editable && isEditable(schema[key].type),
-            cellRenderer: getRenderer(
+            cellRenderer:
-              schema[key].type, // type
+              editable &&
-              schema[key].constraints // options
+              getRenderer(
-            ),
+                schema[key].type, // type
+                schema[key].constraints // options
+              ),
             autoHeight: true,
           }
         })
@@ -97,16 +109,19 @@
 
 <div class="container">
   {#if dataLoaded}
-    <div class="controls">
+    {#if editable}
-      <CreateRowButton {_bb} {model} on:newRecord={handleNewRecord} />
+      <div class="controls">
-      {#if selectedRows.length > 0}
+        <CreateRowButton {_bb} {model} on:newRecord={handleNewRecord} />
-        <DeleteButton text small on:click={deleteRecords}>
+        {#if selectedRows.length > 0}
-          <Icon name="addrow" />
+          <DeleteButton text small on:click={deleteRecords}>
-          Delete {selectedRows.length} row(s)
+            <Icon name="addrow" />
-        </DeleteButton>
+            Delete {selectedRows.length} row(s)
-      {/if}
+          </DeleteButton>
-    </div>
+        {/if}
+      </div>
+    {/if}
     <AgGrid
+      {options}
       {data}
       {columnDefs}
       on:update={handleUpdate}

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

@@ -62,10 +62,11 @@ function dateRenderer(options) {
             target: container,
             props: {
                 value: params.value,
+                thin: true
             }
         });
 
-        datePickerInstance.$on('change', toggle)
+        // datePickerInstance.$on('change', toggle)
 
         return container
     }