adds ag-grid component to display data

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

@@ -313,6 +313,23 @@ export default {
           },
           children: [],
         },
+        {
+          name: "Grid",
+          _component: "@budibase/standard-components/datagrid",
+          description: "a datagrid component with functionality to add, remove and edit rows.",
+          icon: "ri-file-list-line",
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Source",
+                key: "datasource",
+                control: ModelViewSelect,
+              },
+            ],
+          },
+          children: [],
+        },
         {
           _component: "@budibase/standard-components/stackedlist",
           name: "Stacked List",

packages/standard-components/components.json

@@ -199,9 +199,15 @@
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
-			"icon": "string",	
-			"size": {"type": "string", "default": "fa-lg"},
-			"color": {"type": "string", "default": "#000"}
+			"icon": "string",
+			"size": {
+				"type": "string",
+				"default": "fa-lg"
+			},
+			"color": {
+				"type": "string",
+				"default": "#000"
+			}
 		}
 	},
 	"datatable": {
@@ -215,6 +221,13 @@
 			"color": "string"
 		}
 	},
+	"datagrid": {
+		"description": "a datagrid component with functionality to add, remove and edit rows.",
+		"data": true,
+		"props": {
+			"datasource": "models"
+		}
+	},
 	"dataform": {
 		"description": "an HTML table that fetches data from a table or view and displays it.",
 		"data": true,
@@ -535,19 +548,34 @@
 			"height": "number",
 			"axisTimeCombinations": "string",
 			"color": "string",
-			"grid": {"type":"string", "default": "horizontal"},
+			"grid": {
+				"type": "string",
+				"default": "horizontal"
+			},
 			"aspectRatio": "number",
 			"dateLabel": "string",
-			"isAnimated": {"type": "bool", "default": true},
+			"isAnimated": {
+				"type": "bool",
+				"default": true
+			},
 			"lineCurve": "string",
 			"locale": "string",
 			"numberFormat": "string",
-			"shouldShowAllDataPoints": {"type": "bool", "default": true},
+			"shouldShowAllDataPoints": {
+				"type": "bool",
+				"default": true
+			},
 			"topicLabel": "string",
 			"valueLabel": "string",
-			"xAxisValueType": {"type":"string", "default": "date"},
+			"xAxisValueType": {
+				"type": "string",
+				"default": "date"
+			},
 			"xAxisScale": "string",
-			"xAxisFormat": {"type":"string", "default": "custom"},
+			"xAxisFormat": {
+				"type": "string",
+				"default": "custom"
+			},
 			"xAxisCustomFormat": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",

packages/standard-components/package.json

@@ -37,8 +37,8 @@
   "dependencies": {
     "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.34.6",
+    "@budibase/svelte-ag-grid": "^0.0.6",
     "@fortawesome/fontawesome-free": "^5.14.0",
-    "@budibase/bbui": "^1.34.2",
     "britecharts": "^2.16.1",
     "d3-selection": "^1.4.2",
     "fast-sort": "^2.2.0",

packages/standard-components/src/DataGrid.svelte

@@ -0,0 +1,48 @@
+<script>
+  import fetchData from "./fetchData.js"
+  import { isEmpty } from "lodash/fp"
+  import { onMount } from "svelte"
+
+  import AgGrid from "@budibase/svelte-ag-grid"
+
+  export let datasource = {}
+
+  let dataLoaded = false
+  let data
+  let columnDefs
+
+  onMount(async () => {
+    if (!isEmpty(datasource)) {
+      data = await fetchData(datasource)
+      if (data) {
+        // Construct column definitions
+        columnDefs = Object.keys(data[0]).map(key => {
+          return {
+            headerName: key.charAt(0).toUpperCase() + key.slice(1), // Capitalise first letter
+            field: key,
+            hide: shouldHideField(key),
+            sortable: true,
+            editable: true,
+          }
+        })
+      }
+    }
+    dataLoaded = true
+  })
+
+  const shouldHideField = name => {
+    if (name.startsWith("_")) return true
+    // always 'record'
+    if (name === "type") return true
+    // tables are always tied to a single modelId, this is irrelevant
+    if (name === "modelId") return true
+
+    return false
+  }
+</script>
+
+{#if dataLoaded}
+  <AgGrid bind:data {columnDefs} />
+{/if}
+
+<pre>{JSON.stringify(data, 0, 2)}</pre>

packages/standard-components/src/index.js

@@ -15,6 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as Navigation } from "./Navigation.svelte"
+export { default as datagrid } from "./DataGrid.svelte"
 export { default as datatable } from "./DataTable.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"