diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 296ae26606..ff52882188 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/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",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index e600b264be..a78fd5ec5e 100644
--- a/packages/standard-components/components.json
+++ b/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",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index ba3305d293..71bc33cac8 100644
--- a/packages/standard-components/package.json
+++ b/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",
diff --git a/packages/standard-components/src/DataGrid.svelte b/packages/standard-components/src/DataGrid.svelte
new file mode 100644
index 0000000000..712e51c430
--- /dev/null
+++ b/packages/standard-components/src/DataGrid.svelte
@@ -0,0 +1,48 @@
+
+
+{#if dataLoaded}
+
{JSON.stringify(data, 0, 2)}diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 0ce5088cb8..955bdfe25e 100644 --- a/packages/standard-components/src/index.js +++ b/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"