Merge pull request #15457 from Budibase/grid-column-formatting

Table column "format" setting

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte

@@ -61,6 +61,7 @@
           anchor={primaryDisplayColumnAnchor}
           item={columns.primary}
           on:change={e => columns.update(e.detail)}
+          {bindings}
         />
       </div>
     </div>

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/PrimaryColumnFieldSetting.svelte

@@ -8,6 +8,7 @@
 
   export let item
   export let anchor
+  export let bindings
 
   let draggableStore = writable({
     selected: null,
@@ -48,6 +49,7 @@
       componentInstance={item}
       {parseSettings}
       on:change
+      {bindings}
     >
       <div slot="header" class="type-icon">
         <Icon name={icon} />

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/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -165,7 +165,7 @@
   }
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-700);
     grid-column: 2 / 2;
   }
 

packages/client/manifest.json

@@ -3089,6 +3089,12 @@
         "type": "tableConditions",
         "label": "Conditions",
         "key": "conditions"
+      },
+      {
+        "type": "text",
+        "label": "Format",
+        "key": "format",
+        "info": "Changing format will display values as text"
       }
     ]
   },
@@ -7685,7 +7691,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,13 @@
     return overrides
   }
 
+  const createFormatter = column => {
+    if (typeof column.format !== "string" || !column.format.trim().length) {
+      return null
+    }
+    return row => 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 TextCell from "./TextCell.svelte"
 
   const {
     rows,
@@ -36,11 +37,17 @@
 
   let api
 
+  // Get the appropriate cell renderer and value
+  $: hasCustomFormat = column.format && !row._isNewRow
+  $: renderer = hasCustomFormat ? TextCell : getCellRenderer(column)
+  $: 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)
 
   // Determine if the cell is editable
   $: readonly =
+    hasCustomFormat ||
     columns.actions.isReadonly(column) ||
     (!$config.canEditRows && !row._isNewRow)
 
@@ -69,7 +76,7 @@
     onKeyDown: (...params) => api?.onKeyDown?.(...params),
     isReadonly: () => readonly,
     getType: () => column.schema.type,
-    getValue: () => row[column.name],
+    getValue: () => value,
     setValue: (value, options = { apply: true }) => {
       validation.actions.setError(cellId, null)
       updateValue({
@@ -136,9 +143,9 @@
   }}
 >
   <svelte:component
-    this={getCellRenderer(column)}
+    this={renderer}
     bind:api
-    value={row[column.name]}
+    {value}
     schema={column.schema}
     onChange={cellAPI.setValue}
     {focused}

packages/frontend-core/src/components/grid/lib/renderers.ts

@@ -53,7 +53,6 @@ export const getCellRenderer = (column: UIColumn) => {
   if (column.calculationType) {
     return NumberCell
   }
-
   return (
     getCellRendererByType(column.schema?.cellRenderType) ||
     getCellRendererByType(column.schema?.type) ||

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/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,17 +115,19 @@ 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 relatedValues = relatedColumns.reduce<Record<string, string>>(
+          (map, column) => {
             const fromField = $enrichedSchema![column.related!.field]
             map[column.name] = getRelatedTableValues(
               row,
@@ -132,8 +135,24 @@ export const deriveStores = (context: StoreContext): RowDerivedStore => {
               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,9 +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?: (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"
 
@@ -27,6 +28,7 @@ export type UIFieldSchema = FieldSchema &
     columns?: Record<string, UIRelationSchemaField>
     cellRenderType?: string
     disabled?: boolean
+    format?: (row: UIRow) => any
   }
 
 interface UIRelationSchemaField extends RelationSchemaField {