Allow bindings for table cell values and break out cell settings into its own drawer component

packages/bbui/package.json

@@ -38,6 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^1.0.66-alpha.0",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",

packages/bbui/src/Table/CellRenderer.svelte

@@ -6,6 +6,7 @@
   import AttachmentRenderer from "./AttachmentRenderer.svelte"
   import ArrayRenderer from "./ArrayRenderer.svelte"
   import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"
 
   export let row
   export let schema
@@ -29,10 +30,24 @@
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
   $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
 </script>
 
-{#if renderer && (customRenderer || (value != null && value !== ""))}
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
-  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+  <svelte:component
+    this={renderer}
+    {row}
+    {schema}
+    value={cellValue}
+    on:clickrelationship
+  >
     <slot />
   </svelte:component>
 {/if}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -58,7 +58,7 @@
   const updateValue = val => {
     valid = isValid(readableToRuntimeBinding(bindings, val))
     if (valid) {
-      dispatch("change", value)
+      dispatch("change", val)
     }
   }
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellDrawer.svelte

@@ -0,0 +1,66 @@
+<script>
+  import {
+    Input,
+    Select,
+    ColorPicker,
+    DrawerContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
+  import { store } from "builderStore"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+
+  export let column
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="S">
+      <Input bind:value={column.width} label="Width" placeholder="Auto" />
+      <Select
+        label="Alignment"
+        bind:value={column.align}
+        options={["Left", "Center", "Right"]}
+        placeholder="Default"
+      />
+      <DrawerBindableInput
+        label="Value"
+        value={column.template}
+        on:change={e => (column.template = e.detail)}
+        placeholder={`{{ Value }}`}
+        bindings={[
+          {
+            readableBinding: "Value",
+            runtimeBinding: "[value]",
+          },
+        ]}
+      />
+      <Layout noPadding gap="XS">
+        <Label>Background color</Label>
+        <ColorPicker
+          value={column.background}
+          on:change={e => (column.background = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+      <Layout noPadding gap="XS">
+        <Label>Text color</Label>
+        <ColorPicker
+          value={column.color}
+          on:change={e => (column.color = e.detail)}
+          alignRight
+          spectrumTheme={$store.theme}
+        />
+      </Layout>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/CellEditor.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Drawer, Button, Icon } from "@budibase/bbui"
+  import CellDrawer from "./CellDrawer.svelte"
+
+  export let column
+
+  let boundValue
+  let drawer
+
+  $: updateBoundValue(column)
+
+  const updateBoundValue = value => {
+    boundValue = { ...value }
+  }
+
+  const open = () => {
+    updateBoundValue(column)
+    drawer.show()
+  }
+
+  const save = () => {
+    column = boundValue
+    drawer.hide()
+  }
+</script>
+
+<Icon name="Settings" hoverable size="S" on:click={open} />
+<Drawer bind:this={drawer} title="Table Columns">
+  <svelte:fragment slot="description">
+    "{column.name}" column settings
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <CellDrawer slot="body" bind:column={boundValue} />
+</Drawer>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte

@@ -4,16 +4,15 @@
     Icon,
     DrawerContent,
     Layout,
-    Input,
     Select,
     Label,
     Body,
-    ColorPicker,
+    Input,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
   import { generate } from "shortid"
-  import { store } from "builderStore"
+  import CellEditor from "./CellEditor.svelte"
 
   export let columns = []
   export let options = []
@@ -65,10 +64,11 @@
   }
 
   const addAllColumns = () => {
-    let newColumns = []
+    let newColumns = columns || []
     options.forEach(field => {
       const fieldSchema = schema[field]
-      if (!fieldSchema?.autocolumn) {
+      const hasCol = columns && columns.findIndex(x => x.name === field) !== -1
+      if (!fieldSchema?.autocolumn && !hasCol) {
         newColumns.push({
           name: field,
           displayName: field,
@@ -92,15 +92,7 @@
             <div />
             <Label size="L">Column</Label>
             <Label size="L">Label</Label>
-            <Label size="L">Width</Label>
+            <div />
-            <Label size="L">Alignment</Label>
-            <Label size="L">Format</Label>
-            <div class="center">
-              <Label size="L">Background</Label>
-            </div>
-            <div class="center">
-              <Label size="L">Text color</Label>
-            </div>
             <div />
           </div>
           <div
@@ -131,33 +123,7 @@
                   on:change={e => (column.displayName = e.detail)}
                 />
                 <Input bind:value={column.displayName} placeholder="Label" />
-                <Input bind:value={column.width} placeholder="Auto" />
+                <CellEditor bind:column />
-                <Select
-                  bind:value={column.align}
-                  options={["Left", "Center", "Right"]}
-                  placeholder="Default"
-                />
-                <Select
-                  bind:value={column.format}
-                  options={["Left"]}
-                  placeholder="Default"
-                />
-                <div class="center">
-                  <ColorPicker
-                    value={column.background}
-                    on:change={e => (column.background = e.detail)}
-                    alignRight
-                    spectrumTheme={$store.theme}
-                  />
-                </div>
-                <div class="center">
-                  <ColorPicker
-                    value={column.color}
-                    on:change={e => (column.color = e.detail)}
-                    alignRight
-                    spectrumTheme={$store.theme}
-                  />
-                </div>
                 <Icon
                   name="Close"
                   hoverable
@@ -199,7 +165,7 @@
 <style>
   .container {
     width: 100%;
-    max-width: 1200px;
+    max-width: 600px;
     margin: 0 auto;
   }
   .columns {
@@ -212,7 +178,7 @@
   .column {
     gap: var(--spacing-l);
     display: grid;
-    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 72px 72px 20px;
+    grid-template-columns: 20px 1fr 1fr auto auto;
     align-items: center;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte

@@ -56,13 +56,18 @@
     })
   }
 
+  const open = () => {
+    updateBoundValue(sanitisedValue)
+    drawer.show()
+  }
+
   const save = () => {
     dispatch("change", getValidColumns(boundValue, options))
     drawer.hide()
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure columns</ActionButton>
+<ActionButton on:click={open}>Configure columns</ActionButton>
 <Drawer bind:this={drawer} title="Table Columns">
   <svelte:fragment slot="description">
     Configure the columns in your table.

packages/client/manifest.json

@@ -2679,7 +2679,8 @@
         "type": "columns",
         "label": "Columns",
         "key": "columns",
-        "dependsOn": "dataProvider"
+        "dependsOn": "dataProvider",
+        "nested": true
       },
       {
         "type": "select",