From e7378ede975aba32d88ffe7450142c050510b23a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 24 Jan 2025 14:50:27 +0000
Subject: [PATCH] Add ability to customise format of grid columns via bindings

---
 .../controls/GridColumnConfiguration/getColumns.js |  2 ++
 packages/client/manifest.json                      |  8 +++++++-
 .../client/src/components/app/GridBlock.svelte     | 14 +++++++++++++-
 .../src/components/grid/cells/DataCell.svelte      |  5 ++++-
 .../src/components/grid/stores/columns.ts          |  1 +
 packages/types/src/ui/stores/grid/columns.ts       |  1 +
 6 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index d3f081756d..638c41e0ec 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/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,
       },
       {}
     )
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c236dd1ad9..a2db6eca6d 100644
--- a/packages/client/manifest.json
+++ b/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
           }
         ]
       },
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 4a8dfb4fcb..03494d24dd 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/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
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index cd6b61af80..cdd0d50093 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/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}
diff --git a/packages/frontend-core/src/components/grid/stores/columns.ts b/packages/frontend-core/src/components/grid/stores/columns.ts
index 1b3f6624e1..8ea9544ed6 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.ts
+++ b/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
           }
diff --git a/packages/types/src/ui/stores/grid/columns.ts b/packages/types/src/ui/stores/grid/columns.ts
index 2517d2a3e0..aa5124ba04 100644
--- a/packages/types/src/ui/stores/grid/columns.ts
+++ b/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