Add ability to customise format of grid columns via bindings

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js

@@ -69,6 +69,7 @@ const toGridFormat = draggableListColumns => {
     active: entry.active,
     width: entry.width,
     conditions: entry.conditions,
+    format: entry.format,
   }))
 }
 
@@ -85,6 +86,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         columnType: column.columnType || schema[column.field].type,
         width: column.width,
         conditions: column.conditions,
+        format: column.format,
       },
       {}
     )

packages/client/manifest.json

@@ -3089,6 +3089,11 @@
         "type": "tableConditions",
         "label": "Conditions",
         "key": "conditions"
+      },
+      {
+        "type": "text",
+        "label": "Format",
+        "key": "format"
       }
     ]
   },
@@ -7685,7 +7690,8 @@
           {
             "type": "columns/grid",
             "key": "columns",
-            "resetOn": "table"
+            "resetOn": "table",
+            "nested": true
           }
         ]
       },

packages/client/src/components/app/GridBlock.svelte

@@ -5,6 +5,7 @@
   import { get, derived, readable } from "svelte/store"
   import { featuresStore } from "stores"
   import { Grid } from "@budibase/frontend-core"
+  import { processStringSync } from "@budibase/string-templates"
 
   // table is actually any datasource, but called table for legacy compatibility
   export let table
@@ -42,6 +43,7 @@
   let gridContext
   let minHeight = 0
 
+  $: id = $component.id
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
@@ -65,7 +67,6 @@
     const clean = gridContext?.rows.actions.cleanRow || (x => x)
     const cleaned = rows.map(clean)
     const goldenRow = generateGoldenSample(cleaned)
-    const id = get(component).id
     return {
       // Not sure what this one is for...
       [id]: goldenRow,
@@ -104,6 +105,7 @@
         order: idx,
         conditions: column.conditions,
         visible: !!column.active,
+        format: createFormatter(column),
       }
       if (column.width) {
         overrides[column.field].width = column.width
@@ -112,6 +114,16 @@
     return overrides
   }
 
+  const createFormatter = column => {
+    if (!column.format?.length) {
+      return null
+    }
+    return row => {
+      console.log("processStringSync")
+      return processStringSync(column.format, { [id]: row })
+    }
+  }
+
   const enrichButtons = buttons => {
     if (!buttons?.length) {
       return null

packages/frontend-core/src/components/grid/cells/DataCell.svelte

@@ -3,6 +3,7 @@
   import GridCell from "./GridCell.svelte"
   import { getCellRenderer } from "../lib/renderers"
   import { derived, writable } from "svelte/store"
+  import { processStringSync } from "@budibase/string-templates"
 
   const {
     rows,
@@ -36,6 +37,8 @@
 
   let api
 
+  $: value = column.format ? column.format(row) : row[column.name]
+
   // Get the error for this cell if the cell is focused or selected
   $: error = getErrorStore(rowFocused, cellId)
 
@@ -138,7 +141,7 @@
   <svelte:component
     this={getCellRenderer(column)}
     bind:api
-    value={row[column.name]}
+    {value}
     schema={column.schema}
     onChange={cellAPI.setValue}
     {focused}

packages/frontend-core/src/components/grid/stores/columns.ts

@@ -188,6 +188,7 @@ export const initialise = (context: StoreContext) => {
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            format: fieldSchema.format,
             __left: undefined as any, // TODO
             __idx: undefined as any, // TODO
           }

packages/types/src/ui/stores/grid/columns.ts

@@ -4,6 +4,7 @@ export type UIColumn = FieldSchema & {
   label: string
   readonly: boolean
   conditions: any
+  format?: () => any
   related?: {
     field: string
     subField: string