From a0c703288c24cc2af7478f455cd4161a74b859a0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 10 Feb 2022 11:46:57 +0000
Subject: [PATCH 1/6] Fix button layout in drawers

---
 packages/bbui/src/Drawer/Drawer.svelte                    | 8 ++++++++
 .../PropertyControls/ColumnEditor/ColumnDrawer.svelte     | 0
 .../PropertyControls/ColumnEditor/ColumnEditor.svelte     | 0
 3 files changed, 8 insertions(+)
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
 create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 4bc8a69445..b4a73544c5 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -74,4 +74,12 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
new file mode 100644
index 0000000000..e69de29bb2

From b94ed3d23b3d156bc853ec5b8625a55f7666c5ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 10 Feb 2022 16:41:43 +0000
Subject: [PATCH 2/6] Add new setting component for configuring table column
 order and display names

---
 .../ColumnEditor/ColumnDrawer.svelte          | 145 ++++++++++++++++++
 .../ColumnEditor/ColumnEditor.svelte          |  64 ++++++++
 .../NavigationEditor/NavigationEditor.svelte  |   2 +-
 .../PropertyControls/componentSettings.js     |   2 +
 4 files changed, 212 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
index e69de29bb2..00927d522d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@@ -0,0 +1,145 @@
+<script>
+  import {
+    Button,
+    Icon,
+    DrawerContent,
+    Layout,
+    Input,
+    Select,
+  } from "@budibase/bbui"
+  import { flip } from "svelte/animate"
+  import { dndzone } from "svelte-dnd-action"
+  import { generate } from "shortid"
+
+  export let columns = []
+  export let options = []
+
+  const flipDurationMs = 150
+  let dragDisabled = true
+
+  $: unselectedColumns = getUnselectedColumns(options, columns)
+  $: columns.forEach(column => {
+    if (!column.id) {
+      column.id = generate()
+    }
+  })
+
+  const getUnselectedColumns = (allColumns, selectedColumns) => {
+    let optionsObj = {}
+    allColumns.forEach(option => {
+      optionsObj[option] = true
+    })
+    selectedColumns?.forEach(column => {
+      delete optionsObj[column.name]
+    })
+    return Object.keys(optionsObj)
+  }
+
+  const getRemainingColumnOptions = selectedColumn => {
+    if (!selectedColumn || unselectedColumns.includes(selectedColumn)) {
+      return unselectedColumns
+    }
+    return [selectedColumn, ...unselectedColumns]
+  }
+
+  const addColumn = () => {
+    columns = [...columns, {}]
+  }
+
+  const removeColumn = id => {
+    columns = columns.filter(column => column.id !== id)
+  }
+
+  const updateColumnOrder = e => {
+    columns = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateColumnOrder(e)
+    dragDisabled = true
+  }
+</script>
+
+<DrawerContent>
+  <div class="container">
+    <Layout noPadding gap="S">
+      {#if columns?.length}
+        <div
+          class="columns"
+          use:dndzone={{
+            items: columns,
+            flipDurationMs,
+            dropTargetStyle: { outline: "none" },
+            dragDisabled,
+          }}
+          on:finalize={handleFinalize}
+          on:consider={updateColumnOrder}
+        >
+          {#each columns as column (column.id)}
+            <div class="column" animate:flip={{ duration: flipDurationMs }}>
+              <div
+                class="handle"
+                aria-label="drag-handle"
+                style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                on:mousedown={() => (dragDisabled = false)}
+              >
+                <Icon name="DragHandle" size="XL" />
+              </div>
+              <Select
+                bind:value={column.name}
+                placeholder="Column"
+                options={getRemainingColumnOptions(column.name)}
+                on:change={e => (column.displayName = e.detail)}
+              />
+              <Input bind:value={column.displayName} placeholder="Label" />
+              <Icon
+                name="Close"
+                hoverable
+                size="S"
+                on:click={() => removeColumn(column.id)}
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+      <div>
+        <Button secondary icon="Add" on:click={addColumn}>Add Column</Button>
+      </div>
+    </Layout>
+  </div>
+</DrawerContent>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  .columns {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .column {
+    gap: var(--spacing-l);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--border-radius-s);
+    transition: background-color ease-in-out 130ms;
+  }
+  .column:hover {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
+  .column > :global(.spectrum-Form-item) {
+    flex: 1 1 auto;
+    width: 0;
+  }
+  .handle {
+    display: grid;
+    place-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
index e69de29bb2..8cebf5a657 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnEditor.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { Button, ActionButton, Drawer } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import ColumnDrawer from "./ColumnDrawer.svelte"
+  import { cloneDeep } from "lodash/fp"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { currentAsset } from "builderStore"
+
+  export let componentInstance
+  export let value = []
+
+  const dispatch = createEventDispatcher()
+
+  let drawer
+  let boundValue
+
+  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: schema = getSchemaForDatasource($currentAsset, datasource).schema
+  $: options = Object.keys(schema || {})
+  $: sanitisedValue = getValidColumns(value, options)
+  $: updateBoundValue(sanitisedValue)
+
+  const updateBoundValue = value => {
+    boundValue = cloneDeep(value)
+  }
+
+  const getValidColumns = (columns, options) => {
+    // If no columns then default to all columns
+    if (!Array.isArray(columns) || !columns.length) {
+      return options.map(col => ({
+        name: col,
+        displayName: col,
+      }))
+    }
+    // We need to account for legacy configs which would just be an array
+    // of strings
+    if (typeof columns[0] === "string") {
+      columns = columns.map(col => ({
+        name: col,
+        displayName: col,
+      }))
+    }
+    return columns.filter(column => {
+      return options.includes(column.name)
+    })
+  }
+
+  const save = () => {
+    dispatch("change", getValidColumns(boundValue, options))
+    drawer.hide()
+  }
+</script>
+
+<ActionButton on:click={drawer.show}>Configure columns</ActionButton>
+<Drawer bind:this={drawer} title="Table Columns">
+  <svelte:fragment slot="description">
+    Configure the columns in your table.
+  </svelte:fragment>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <ColumnDrawer slot="body" bind:columns={boundValue} {options} />
+</Drawer>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
index 40357f50be..33a82d1886 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationEditor.svelte
@@ -15,7 +15,7 @@
   }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure Links</ActionButton>
+<ActionButton on:click={drawer.show}>Configure links</ActionButton>
 <Drawer bind:this={drawer} title={"Navigation Links"}>
   <svelte:fragment slot="description">
     Configure the links in your navigation bar.
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
index 15aa670fa9..23a0a312bc 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@@ -18,6 +18,7 @@ import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./FormFieldSelect.svelte"
 import ValidationEditor from "./ValidationEditor/ValidationEditor.svelte"
 import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+import ColumnEditor from "./ColumnEditor/ColumnEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableCombobox,
@@ -40,6 +41,7 @@ const componentMap = {
   navigation: NavigationEditor,
   filter: FilterEditor,
   url: URLSelect,
+  columns: ColumnEditor,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
   "field/options": FormFieldSelect,

From 5f72066dde3adda8da6029ad81f769fddf284422 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 10 Feb 2022 16:42:15 +0000
Subject: [PATCH 3/6] Update table component to use new settings component and
 support new column config setting structure

---
 packages/client/manifest.json                    |  5 ++---
 .../client/src/components/app/table/Table.svelte | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 06dbaad660..5d73d3b95c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2680,11 +2680,10 @@
         "defaultValue": 8
       },
       {
-        "type": "multifield",
+        "type": "columns",
         "label": "Columns",
         "key": "columns",
-        "dependsOn": "dataProvider",
-        "placeholder": "All columns"
+        "dependsOn": "dataProvider"
       },
       {
         "type": "select",
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index f462b93551..1662f5fa09 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -40,7 +40,8 @@
     // Check for an invalid column selection
     let invalid = false
     customColumns?.forEach(column => {
-      if (schema[column] == null) {
+      const columnName = typeof column === "string" ? column : column.name
+      if (schema[columnName] == null) {
         invalid = true
       }
     })
@@ -75,9 +76,16 @@
     }
 
     fields.forEach(field => {
-      newSchema[field] = schema[field]
-      if (schema[field] && UnsortableTypes.indexOf(schema[field].type) !== -1) {
-        newSchema[field].sortable = false
+      const columnName = typeof field === "string" ? field : field.name
+      if (!schema[columnName]) {
+        return
+      }
+      newSchema[columnName] = schema[columnName]
+      if (UnsortableTypes.includes(schema[columnName].type)) {
+        newSchema[columnName].sortable = false
+      }
+      if (field?.displayName) {
+        newSchema[columnName].displayName = field?.displayName
       }
     })
     return newSchema

From 4f00e7a3b15e67617ef16c032ae96b8418bada1a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Feb 2022 11:47:48 +0000
Subject: [PATCH 4/6] Add labels to column config drawer

---
 .../ColumnEditor/ColumnDrawer.svelte          | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
index 00927d522d..3f2f75a206 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@@ -6,6 +6,7 @@
     Layout,
     Input,
     Select,
+    Label,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
@@ -75,6 +76,12 @@
           on:finalize={handleFinalize}
           on:consider={updateColumnOrder}
         >
+          <div class="column">
+            <div />
+            <Label size="L">Column</Label>
+            <Label size="L">Label</Label>
+            <div />
+          </div>
           {#each columns as column (column.id)}
             <div class="column" animate:flip={{ duration: flipDurationMs }}>
               <div
@@ -102,7 +109,8 @@
           {/each}
         </div>
       {/if}
-      <div>
+      <div class="column">
+        <div />
         <Button secondary icon="Add" on:click={addColumn}>Add Column</Button>
       </div>
     </Layout>
@@ -124,9 +132,8 @@
   }
   .column {
     gap: var(--spacing-l);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 20px 1fr 1fr 20px;
     align-items: center;
     border-radius: var(--border-radius-s);
     transition: background-color ease-in-out 130ms;
@@ -134,10 +141,6 @@
   .column:hover {
     background-color: var(--spectrum-global-color-gray-100);
   }
-  .column > :global(.spectrum-Form-item) {
-    flex: 1 1 auto;
-    width: 0;
-  }
   .handle {
     display: grid;
     place-items: center;

From 6c1701830fedb7913290b3ea5b9cf40f3de96a67 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Feb 2022 13:06:32 +0000
Subject: [PATCH 5/6] Improve layout and edge cases around using column editor
 drawer

---
 .../ColumnEditor/ColumnDrawer.svelte          | 106 +++++++++++-------
 1 file changed, 68 insertions(+), 38 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
index 3f2f75a206..ef4726751b 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ColumnEditor/ColumnDrawer.svelte
@@ -7,6 +7,7 @@
     Input,
     Select,
     Label,
+    Body,
   } from "@budibase/bbui"
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
@@ -59,59 +60,81 @@
     updateColumnOrder(e)
     dragDisabled = true
   }
+
+  const reset = () => {
+    columns = options.map(col => ({
+      name: col,
+      displayName: col,
+    }))
+  }
 </script>
 
 <DrawerContent>
   <div class="container">
     <Layout noPadding gap="S">
       {#if columns?.length}
-        <div
-          class="columns"
-          use:dndzone={{
-            items: columns,
-            flipDurationMs,
-            dropTargetStyle: { outline: "none" },
-            dragDisabled,
-          }}
-          on:finalize={handleFinalize}
-          on:consider={updateColumnOrder}
-        >
+        <Layout noPadding gap="XS">
           <div class="column">
             <div />
             <Label size="L">Column</Label>
             <Label size="L">Label</Label>
             <div />
           </div>
-          {#each columns as column (column.id)}
-            <div class="column" animate:flip={{ duration: flipDurationMs }}>
-              <div
-                class="handle"
-                aria-label="drag-handle"
-                style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
-                on:mousedown={() => (dragDisabled = false)}
-              >
-                <Icon name="DragHandle" size="XL" />
+          <div
+            class="columns"
+            use:dndzone={{
+              items: columns,
+              flipDurationMs,
+              dropTargetStyle: { outline: "none" },
+              dragDisabled,
+            }}
+            on:finalize={handleFinalize}
+            on:consider={updateColumnOrder}
+          >
+            {#each columns as column (column.id)}
+              <div class="column" animate:flip={{ duration: flipDurationMs }}>
+                <div
+                  class="handle"
+                  aria-label="drag-handle"
+                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                  on:mousedown={() => (dragDisabled = false)}
+                >
+                  <Icon name="DragHandle" size="XL" />
+                </div>
+                <Select
+                  bind:value={column.name}
+                  placeholder="Column"
+                  options={getRemainingColumnOptions(column.name)}
+                  on:change={e => (column.displayName = e.detail)}
+                />
+                <Input bind:value={column.displayName} placeholder="Label" />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeColumn(column.id)}
+                  disabled={columns.length === 1}
+                />
               </div>
-              <Select
-                bind:value={column.name}
-                placeholder="Column"
-                options={getRemainingColumnOptions(column.name)}
-                on:change={e => (column.displayName = e.detail)}
-              />
-              <Input bind:value={column.displayName} placeholder="Label" />
-              <Icon
-                name="Close"
-                hoverable
-                size="S"
-                on:click={() => removeColumn(column.id)}
-              />
-            </div>
-          {/each}
+            {/each}
+          </div>
+        </Layout>
+      {:else}
+        <div class="column">
+          <div />
+          <Body size="S">Add the first column to your table.</Body>
         </div>
       {/if}
-      <div class="column">
-        <div />
-        <Button secondary icon="Add" on:click={addColumn}>Add Column</Button>
+      <div class="columns">
+        <div class="column">
+          <div />
+          <div class="buttons">
+            <Button secondary icon="Add" on:click={addColumn}>
+              Add column
+            </Button>
+            <Button secondary quiet on:click={reset}>Reset columns</Button>
+          </div>
+        </div>
       </div>
     </Layout>
   </div>
@@ -145,4 +168,11 @@
     display: grid;
     place-items: center;
   }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>

From f433343dc42c139039000bc7c897ec26c3071db8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Feb 2022 13:11:01 +0000
Subject: [PATCH 6/6] Update table block to use new column config setting

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 5d73d3b95c..d578c7056d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2950,7 +2950,7 @@
             "defaultValue": 8
           },
           {
-            "type": "multifield",
+            "type": "columns",
             "label": "Table Columns",
             "key": "tableColumns",
             "dependsOn": "dataSource",