Reduce frequency of column formatter invocation by caching formatted display values into rows

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

@@ -115,12 +115,10 @@
   }
 
   const createFormatter = column => {
-    if (!column.format?.length) {
+    if (typeof column.format !== "string" || !column.format.trim().length) {
       return null
     }
-    return row => {
+    return row => processStringSync(column.format, { [id]: row })
-      return processStringSync(column.format, { [id]: row })
-    }
   }
 
   const enrichButtons = buttons => {

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

@@ -40,7 +40,7 @@
   // Get the appropriate cell renderer and value
   $: hasCustomFormat = column.format && !row._isNewRow
   $: renderer = hasCustomFormat ? TextCell : getCellRenderer(column)
-  $: value = hasCustomFormat ? column.format(row) : row[column.name]
+  $: value = hasCustomFormat ? row.__formatted?.[column.name] : row[column.name]
 
   // Get the error for this cell if the cell is focused or selected
   $: error = getErrorStore(rowFocused, cellId)

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

@@ -16,6 +16,7 @@ import { Store as StoreContext } from "."
 
 interface IndexedUIRow extends UIRow {
   __idx: number
+  __formatted: Record<string, any>
 }
 
 interface RowStore {
@@ -114,26 +115,44 @@ export const createStores = (): RowStore => {
 export const deriveStores = (context: StoreContext): RowDerivedStore => {
   const { rows, enrichedSchema } = context
 
-  // Enrich rows with an index property and any pending changes
+  // Enrich rows with an index property and additional values
   const enrichedRows = derived(
     [rows, enrichedSchema],
     ([$rows, $enrichedSchema]) => {
-      const customColumns = Object.values($enrichedSchema || {}).filter(
+      // Find columns which require additional processing
-        f => f.related
+      const cols = Object.values($enrichedSchema || {})
-      )
+      const relatedColumns = cols.filter(col => col.related)
-      return $rows.map<IndexedUIRow>((row, idx) => ({
+      const formattedColumns = cols.filter(col => col.format)
-        ...row,
+
-        __idx: idx,
+      return $rows.map<IndexedUIRow>((row, idx) => {
-        ...customColumns.reduce<Record<string, string>>((map, column) => {
+        // Derive any values that need enriched from related rows
-          const fromField = $enrichedSchema![column.related!.field]
+        const relatedValues = relatedColumns.reduce<Record<string, string>>(
-          map[column.name] = getRelatedTableValues(
+          (map, column) => {
-            row,
+            const fromField = $enrichedSchema![column.related!.field]
-            { ...column, related: column.related! },
+            map[column.name] = getRelatedTableValues(
-            fromField
+              row,
-          )
+              { ...column, related: column.related! },
-          return map
+              fromField
-        }, {}),
+            )
-      }))
+            return map
+          },
+          {}
+        )
+        // Derive any display-only formatted values for this row
+        const formattedValues = formattedColumns.reduce<Record<string, any>>(
+          (map, column) => {
+            map[column.name] = column.format!(row)
+            return map
+          },
+          {}
+        )
+        return {
+          ...row,
+          ...relatedValues,
+          __formatted: formattedValues,
+          __idx: idx,
+        }
+      })
     }
   )
 
@@ -791,6 +810,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     let clone: Row = { ...row }
     delete clone.__idx
     delete clone.__metadata
+    delete clone.__formatted
     if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id!)) {
       delete clone._id
     }

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

@@ -1,10 +1,10 @@
-import { CalculationType, FieldSchema, FieldType } from "@budibase/types"
+import { CalculationType, FieldSchema, FieldType, UIRow } from "@budibase/types"
 
 export type UIColumn = FieldSchema & {
   label: string
   readonly: boolean
   conditions: any
-  format?: () => any
+  format?: (row: UIRow) => any
   related?: {
     field: string
     subField: string

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

@@ -5,6 +5,7 @@ import {
   RelationSchemaField,
   SortOrder,
   Table,
+  UIRow,
   UISearchFilter,
 } from "@budibase/types"
 
@@ -24,9 +25,10 @@ export interface UITable extends Table {
 export type UIFieldSchema = FieldSchema &
   BasicViewFieldMetadata & {
     related?: { field: string; subField: string }
-    columns?: Record<string, UIRelationSchemaField>
+    columns?: Record<string, UIRelationSchFemaField>
     cellRenderType?: string
     disabled?: boolean
+    format?: (row: UIRow) => any
   }
 
 interface UIRelationSchemaField extends RelationSchemaField {