adds ag-grid component to display data
This commit is contained in:
parent
6a568156dc
commit
ed69526375
5 changed files with 103 additions and 9 deletions
|
@ -313,6 +313,23 @@ export default {
|
||||||
},
|
},
|
||||||
children: [],
|
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",
|
_component: "@budibase/standard-components/stackedlist",
|
||||||
name: "Stacked List",
|
name: "Stacked List",
|
||||||
|
|
|
@ -199,9 +199,15 @@
|
||||||
"icon": {
|
"icon": {
|
||||||
"description": "A HTML icon tag",
|
"description": "A HTML icon tag",
|
||||||
"props": {
|
"props": {
|
||||||
"icon": "string",
|
"icon": "string",
|
||||||
"size": {"type": "string", "default": "fa-lg"},
|
"size": {
|
||||||
"color": {"type": "string", "default": "#000"}
|
"type": "string",
|
||||||
|
"default": "fa-lg"
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "#000"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"datatable": {
|
"datatable": {
|
||||||
|
@ -215,6 +221,13 @@
|
||||||
"color": "string"
|
"color": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"datagrid": {
|
||||||
|
"description": "a datagrid component with functionality to add, remove and edit rows.",
|
||||||
|
"data": true,
|
||||||
|
"props": {
|
||||||
|
"datasource": "models"
|
||||||
|
}
|
||||||
|
},
|
||||||
"dataform": {
|
"dataform": {
|
||||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||||
"data": true,
|
"data": true,
|
||||||
|
@ -535,19 +548,34 @@
|
||||||
"height": "number",
|
"height": "number",
|
||||||
"axisTimeCombinations": "string",
|
"axisTimeCombinations": "string",
|
||||||
"color": "string",
|
"color": "string",
|
||||||
"grid": {"type":"string", "default": "horizontal"},
|
"grid": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "horizontal"
|
||||||
|
},
|
||||||
"aspectRatio": "number",
|
"aspectRatio": "number",
|
||||||
"dateLabel": "string",
|
"dateLabel": "string",
|
||||||
"isAnimated": {"type": "bool", "default": true},
|
"isAnimated": {
|
||||||
|
"type": "bool",
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
"lineCurve": "string",
|
"lineCurve": "string",
|
||||||
"locale": "string",
|
"locale": "string",
|
||||||
"numberFormat": "string",
|
"numberFormat": "string",
|
||||||
"shouldShowAllDataPoints": {"type": "bool", "default": true},
|
"shouldShowAllDataPoints": {
|
||||||
|
"type": "bool",
|
||||||
|
"default": true
|
||||||
|
},
|
||||||
"topicLabel": "string",
|
"topicLabel": "string",
|
||||||
"valueLabel": "string",
|
"valueLabel": "string",
|
||||||
"xAxisValueType": {"type":"string", "default": "date"},
|
"xAxisValueType": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "date"
|
||||||
|
},
|
||||||
"xAxisScale": "string",
|
"xAxisScale": "string",
|
||||||
"xAxisFormat": {"type":"string", "default": "custom"},
|
"xAxisFormat": {
|
||||||
|
"type": "string",
|
||||||
|
"default": "custom"
|
||||||
|
},
|
||||||
"xAxisCustomFormat": "string",
|
"xAxisCustomFormat": "string",
|
||||||
"xAxisLabel": "string",
|
"xAxisLabel": "string",
|
||||||
"yAxisLabel": "string",
|
"yAxisLabel": "string",
|
||||||
|
|
|
@ -37,8 +37,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@beyonk/svelte-googlemaps": "^2.2.0",
|
"@beyonk/svelte-googlemaps": "^2.2.0",
|
||||||
"@budibase/bbui": "^1.34.6",
|
"@budibase/bbui": "^1.34.6",
|
||||||
|
"@budibase/svelte-ag-grid": "^0.0.6",
|
||||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||||
"@budibase/bbui": "^1.34.2",
|
|
||||||
"britecharts": "^2.16.1",
|
"britecharts": "^2.16.1",
|
||||||
"d3-selection": "^1.4.2",
|
"d3-selection": "^1.4.2",
|
||||||
"fast-sort": "^2.2.0",
|
"fast-sort": "^2.2.0",
|
||||||
|
|
48
packages/standard-components/src/DataGrid.svelte
Normal file
48
packages/standard-components/src/DataGrid.svelte
Normal file
|
@ -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>
|
|
@ -15,6 +15,7 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
|
||||||
export { default as link } from "./Link.svelte"
|
export { default as link } from "./Link.svelte"
|
||||||
export { default as image } from "./Image.svelte"
|
export { default as image } from "./Image.svelte"
|
||||||
export { default as Navigation } from "./Navigation.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 datatable } from "./DataTable.svelte"
|
||||||
export { default as dataform } from "./DataForm.svelte"
|
export { default as dataform } from "./DataForm.svelte"
|
||||||
export { default as dataformwide } from "./DataFormWide.svelte"
|
export { default as dataformwide } from "./DataFormWide.svelte"
|
||||||
|
|
Loading…
Reference in a new issue