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: [],
|
||||
},
|
||||
{
|
||||
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",
|
||||
|
|
|
@ -200,8 +200,14 @@
|
|||
"description": "A HTML icon tag",
|
||||
"props": {
|
||||
"icon": "string",
|
||||
"size": {"type": "string", "default": "fa-lg"},
|
||||
"color": {"type": "string", "default": "#000"}
|
||||
"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",
|
||||
|
|
|
@ -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",
|
||||
|
|
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 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"
|
||||
|
|
Loading…
Reference in a new issue