diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index fb323aca79..b0d19a2004 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -1,7 +1,7 @@
+
+
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 1b9bec0aae..5ecc74466b 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -2,52 +2,94 @@
// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
import AttachmentCell from './AttachmentCell/Button.svelte'
+import Select from './Select/Wrapper.svelte'
import { DatePicker } from "@budibase/bbui"
-export default new Map([
+const renderers = new Map([
["boolean", booleanRenderer],
["attachment", attachmentRenderer],
["datetime", dateRenderer],
+ ["options", optionsRenderer],
])
-function booleanRenderer(params) {
- const toggle = (e) => {
- params.value = !params.value
- params.setValue(e.currentTarget.checked)
- }
- let input = document.createElement("input")
- input.type = "checkbox"
- input.checked = params.value
- input.addEventListener("click", toggle)
-
- return input
-}
-function attachmentRenderer(params) {
- const container = document.createElement("div")
-
- const attachmentInstance = new AttachmentCell({
- target: container,
- props: {
- files: params.value || [],
+function booleanRenderer(options) {
+ return params => {
+ const toggle = (e) => {
+ params.value = !params.value
+ params.setValue(e.currentTarget.checked)
}
- });
+ let input = document.createElement("input")
+ input.type = "checkbox"
+ input.checked = params.value
+ input.addEventListener("click", toggle)
- return container
-}
-function dateRenderer(params) {
- const container = document.createElement("div")
- const toggle = (e) => {
- params.setValue(e.detail[0][0])
+ return input
}
+}
+function attachmentRenderer(options) {
+ return params => {
+ const container = document.createElement("div")
- const datePickerInstance = new DatePicker({
- target: container,
- props: {
- value: params.value,
+ const attachmentInstance = new AttachmentCell({
+ target: container,
+ props: {
+ files: params.value || [],
+ }
+ });
+
+ return container
+ }
+}
+function dateRenderer(options) {
+ return params => {
+ const container = document.createElement("div")
+ const toggle = (e) => {
+ params.setValue(e.detail[0][0])
}
- });
- datePickerInstance.$on('change', toggle)
+ const datePickerInstance = new DatePicker({
+ target: container,
+ props: {
+ value: params.value,
+ }
+ });
- return container
+ datePickerInstance.$on('change', toggle)
+
+ return container
+ }
+}
+
+
+function optionsRenderer(options) {
+ return params => {
+ const container = document.createElement("div")
+ const change = (e) => {
+ params.setValue(e.detail)
+ }
+
+ const selectInstance = new Select({
+ target: container,
+ props: {
+ value: params.value,
+ options
+ }
+ });
+
+ selectInstance.$on('change', change)
+
+ return container
+ }
+}
+
+export function getRenderer(type, options) {
+ // Complicated thing to set options for renderers
+ let customRenderer
+ if (type === "options" || type === 'datetime') {
+ customRenderer = renderers.get(type)(options)
+ } else {
+ let rendererGenerator = renderers.get(type)
+ customRenderer = rendererGenerator ? rendererGenerator() : false
+ }
+ return customRenderer
}
\ No newline at end of file