diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index eb235ad153..7bedc769c8 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -40,6 +40,15 @@
     {
       label: "Colors",
       colors: [
+        "red-100",
+        "orange-100",
+        "yellow-100",
+        "green-100",
+        "seafoam-100",
+        "blue-100",
+        "indigo-100",
+        "magenta-100",
+
         "red-400",
         "orange-400",
         "yellow-400",
@@ -108,12 +117,17 @@
 
   const getCheckColor = value => {
     // Use dynamic color for theme grays
-    if (value?.includes("gray")) {
+    if (value?.includes("-gray-")) {
       return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
         ? "var(--spectrum-global-color-gray-900)"
         : "var(--spectrum-global-color-gray-50)"
     }
 
+    // Use contrasating check for the dim colours
+    if (value?.includes("-100")) {
+      return "var(--spectrum-global-color-gray-900)"
+    }
+
     // Use black check for static white
     if (value?.includes("static-black")) {
       return "var(--spectrum-global-color-static-gray-50)"
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 0111bd6bcf..3806281438 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -62,7 +62,9 @@
       return placeholder || "Choose an option"
     }
 
-    return getFieldAttribute(getOptionLabel, value, options)
+    return (
+      getFieldAttribute(getOptionLabel, value, options) || "Choose an option"
+    )
   }
 
   const selectOption = value => {
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index d60a3e18ea..dd0588818e 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -111,17 +111,38 @@ a {
 /* Custom theme additions */
 .spectrum--darkest {
   --drop-shadow: rgba(0, 0, 0, 0.6);
-  --spectrum-global-color-blue-100: rgb(30, 36, 50);
+  --spectrum-global-color-red-100: #570000;
+  --spectrum-global-color-orange-100: #481801;
+  --spectrum-global-color-yellow-100: #352400;
+  --spectrum-global-color-green-100: #002f07;
+  --spectrum-global-color-seafoam-100: #122b2a;
+  --spectrum-global-color-blue-100: #002651;
+  --spectrum-global-color-indigo-100: #1a1d61;
+  --spectrum-global-color-magenta-100: #530329;
+  --translucent-grey: rgba(255, 255, 255, 0.1);
 }
 .spectrum--dark {
   --drop-shadow: rgba(0, 0, 0, 0.3);
-  --spectrum-global-color-blue-100: rgb(42, 47, 57);
-}
-.spectrum--light {
-  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+  --spectrum-global-color-red-100: #7b0000;
+  --spectrum-global-color-orange-100: #662500;
+  --spectrum-global-color-yellow-100: #4c3600;
+  --spectrum-global-color-green-100: #00450a;
+  --spectrum-global-color-seafoam-100: #12413f;
+  --spectrum-global-color-blue-100: #003877;
+  --spectrum-global-color-indigo-100: #282c8c;
+  --spectrum-global-color-magenta-100: #76003a;
+  --translucent-grey: rgba(255, 255, 255, 0.065);
 }
+.spectrum--light,
 .spectrum--lightest {
-  --drop-shadow: rgba(0, 0, 0, 0.05);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-red-100: #ffddd6;
+  --spectrum-global-color-orange-100: #ffdfad;
+  --spectrum-global-color-yellow-100: #fbf198;
+  --spectrum-global-color-green-100: #cef8e0;
+  --spectrum-global-color-seafoam-100: #cef7f3;
+  --spectrum-global-color-blue-100: #e0f2ff;
+  --spectrum-global-color-indigo-100: #edeeff;
+  --spectrum-global-color-magenta-100: #ffeaf1;
+  --translucent-grey: rgba(0, 0, 0, 0.085);
 }
diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 4e5789b563..4aa7ced9dc 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -5,6 +5,7 @@
 
   export let bindings = []
   export let value = ""
+  export let allowHBS = true
   export let allowJS = false
   export let allowHelpers = true
   export let autofocusEditor = false
@@ -31,6 +32,7 @@
   context={{ ...$previewStore.selectedComponentContext, ...context }}
   snippets={$snippets}
   {value}
+  {allowHBS}
   {allowJS}
   {allowHelpers}
   {autofocusEditor}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 9c482dbc0a..65831b652a 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -16,6 +16,7 @@
   export let placeholder
   export let label
   export let disabled = false
+  export let allowHBS = true
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
@@ -100,6 +101,7 @@
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
+    {allowHBS}
     {allowJS}
     {allowHelpers}
     {context}
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index e174a2e6f7..f5ab1cb157 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -30,6 +30,7 @@ import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte
 import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
 import FormStepControls from "./controls/FormStepControls.svelte"
 import PaywalledSetting from "./controls/PaywalledSetting.svelte"
+import TableConditionEditor from "./controls/TableConditionEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -61,6 +62,7 @@ const componentMap = {
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,
+  tableConditions: TableConditionEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
index 0ba7de42c2..2bfa7d39fd 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@@ -12,6 +12,7 @@
   export let listItemKey
   export let draggable = true
   export let focus
+  export let bindings = []
 
   let zoneType = generate()
 
@@ -126,6 +127,7 @@
           anchor={anchors[draggableItem.id]}
           item={draggableItem.item}
           {...listTypeProps}
+          {bindings}
           on:change={onItemChanged}
         />
       </div>
diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index 116867caf8..a491561f93 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -10,7 +10,6 @@
   export let componentBindings
   export let bindings
   export let parseSettings
-  export let disabled
 
   const draggable = getContext("draggable")
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index a16fe9273e..149ec7265a 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -4,9 +4,12 @@
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { FIELDS } from "constants/backend"
+  import { Constants } from "@budibase/frontend-core"
+  import { FieldType } from "@budibase/types"
 
   export let item
   export let anchor
+  export let bindings
 
   const dispatch = createEventDispatcher()
 
@@ -28,19 +31,30 @@
   }
 
   const parseSettings = settings => {
-    return settings
+    let columnSettings = settings
       .filter(setting => setting.key !== "field")
       .map(setting => {
         return { ...setting, nested: true }
       })
+
+    // Filter out conditions for invalid types.
+    // Allow formulas as we have all the data already loaded in the table.
+    if (
+      Constants.BannedSearchTypes.includes(item.columnType) &&
+      item.columnType !== FieldType.FORMULA
+    ) {
+      return columnSettings.filter(x => x.key !== "conditions")
+    }
+    return columnSettings
   }
 </script>
 
 <div class="list-item-body">
   <div class="list-item-left">
     <EditComponentPopover
-      {anchor}
       componentInstance={item}
+      {bindings}
+      {anchor}
       {parseSettings}
       on:change
     >
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
index 19d61e1f2a..87a4174e60 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
@@ -9,6 +9,7 @@
 
   export let value
   export let componentInstance
+  export let bindings
 
   const dispatch = createEventDispatcher()
   let primaryDisplayColumnAnchor
@@ -63,6 +64,7 @@
   items={columns.sortable}
   listItemKey={"_id"}
   listType={FieldSetting}
+  {bindings}
 />
 
 <style>
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 4af3e48110..148055d727 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -68,6 +68,7 @@ const toGridFormat = draggableListColumns => {
     field: entry.field,
     active: entry.active,
     width: entry.width,
+    conditions: entry.conditions,
   }))
 }
 
@@ -83,6 +84,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         label: column.label,
         columnType: schema[column.field].type,
         width: column.width,
+        conditions: column.conditions,
       },
       {}
     )
@@ -106,12 +108,12 @@ const getColumns = ({
     createComponent,
     schema
   )
-  const primary = draggableList.find(
-    entry => entry.field === primaryDisplayColumnName
-  )
-  const sortable = draggableList.filter(
-    entry => entry.field !== primaryDisplayColumnName
-  )
+  const primary = draggableList
+    .filter(entry => entry.field === primaryDisplayColumnName)
+    .map(instance => ({ ...instance, schema }))[0]
+  const sortable = draggableList
+    .filter(entry => entry.field !== primaryDisplayColumnName)
+    .map(instance => ({ ...instance, schema }))
 
   return {
     primary,
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
index 8b1875b389..1d5d2feaa9 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
@@ -72,6 +72,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -81,6 +83,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -90,6 +94,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -101,6 +107,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })
@@ -126,6 +134,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "three",
@@ -135,6 +145,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -144,6 +156,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -155,6 +169,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
 
@@ -188,6 +204,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -197,6 +215,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -206,6 +226,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -217,6 +239,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })
@@ -247,6 +271,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -256,6 +282,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -265,6 +293,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -276,6 +306,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })
diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
new file mode 100644
index 0000000000..d58cb1d4ba
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -0,0 +1,309 @@
+<script>
+  import {
+    ActionButton,
+    Drawer,
+    Button,
+    DrawerContent,
+    Layout,
+    Select,
+    Icon,
+    DatePicker,
+    Combobox,
+    Multiselect,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash"
+  import ColorPicker from "./ColorPicker.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { QueryUtils, Constants, FilterUsers } from "@budibase/frontend-core"
+  import { generate } from "shortid"
+  import { FieldType, FormulaType } from "@budibase/types"
+  import { dndzone } from "svelte-dnd-action"
+  import { flip } from "svelte/animate"
+
+  export let componentInstance
+  export let bindings
+  export let value
+
+  const dispatch = createEventDispatcher()
+  const flipDuration = 130
+  const targetOptions = [
+    {
+      label: "Cell",
+      value: "cell",
+    },
+    {
+      label: "Row",
+      value: "row",
+    },
+  ]
+  const conditionOptions = [
+    {
+      label: "Background color",
+      value: "backgroundColor",
+    },
+    {
+      label: "Text color",
+      value: "textColor",
+    },
+  ]
+
+  let tempValue = []
+  let drawer
+  let dragDisabled = true
+
+  $: count = value?.length
+  $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
+  $: type = componentInstance.columnType
+  $: valueTypeOptions = getValueTypeOptions(type)
+  $: hasValueOption = type !== FieldType.STRING
+  $: operatorOptions = QueryUtils.getValidOperatorsForType({
+    type,
+
+    // We can filter on any formula columns here since we already have the data
+    // on the page, so adding this ensures formula columns get operators
+    formulaType: FormulaType.STATIC,
+  })
+
+  const getValueTypeOptions = type => {
+    let options = [
+      {
+        label: "Binding",
+        value: FieldType.STRING,
+      },
+    ]
+    if (type !== FieldType.STRING) {
+      options.push({
+        label: "Value",
+        value: type,
+      })
+    }
+    return options
+  }
+
+  const openDrawer = () => {
+    tempValue = cloneDeep(value || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    dispatch("change", tempValue)
+    drawer.hide()
+  }
+
+  const addCondition = () => {
+    const condition = {
+      id: generate(),
+      target: targetOptions[0].value,
+      metadataKey: conditionOptions[0].value,
+      operator: operatorOptions[0]?.value,
+      valueType: FieldType.STRING,
+    }
+    tempValue = [...tempValue, condition]
+  }
+
+  const duplicateCondition = condition => {
+    const dupe = { ...condition, id: generate() }
+    tempValue = [...tempValue, dupe]
+  }
+
+  const removeCondition = condition => {
+    tempValue = tempValue.filter(c => c.id !== condition.id)
+  }
+
+  const onOperatorChange = (condition, newOperator) => {
+    const noValueOptions = [
+      Constants.OperatorOptions.Empty.value,
+      Constants.OperatorOptions.NotEmpty.value,
+    ]
+    condition.noValue = noValueOptions.includes(newOperator)
+    if (condition.noValue) {
+      condition.referenceValue = null
+      condition.valueType = "string"
+    }
+  }
+
+  const onValueTypeChange = condition => {
+    condition.referenceValue = null
+  }
+
+  const updateConditions = e => {
+    tempValue = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateConditions(e)
+    dragDisabled = true
+  }
+</script>
+
+<ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<Drawer
+  bind:this={drawer}
+  title="{componentInstance.field} conditions"
+  on:drawerShow
+  on:drawerHide
+>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="container">
+      <Layout noPadding>
+        Update the appearance of cells and rows based on their value.
+        {#if tempValue.length}
+          <div
+            class="conditions"
+            use:dndzone={{
+              items: tempValue,
+              flipDurationMs: flipDuration,
+              dropTargetStyle: { outline: "none" },
+              dragDisabled,
+            }}
+            on:consider={updateConditions}
+            on:finalize={handleFinalize}
+          >
+            {#each tempValue as condition (condition.id)}
+              <div
+                class="condition"
+                class:update={condition.action === "update"}
+                class:with-value-option={hasValueOption}
+                animate:flip={{ duration: flipDuration }}
+              >
+                <div
+                  class="handle"
+                  aria-label="drag-handle"
+                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                  on:mousedown={() => (dragDisabled = false)}
+                >
+                  <Icon name="DragHandle" size="XL" />
+                </div>
+                <span>Update</span>
+                <Select
+                  placeholder={null}
+                  options={targetOptions}
+                  bind:value={condition.target}
+                />
+                <Select
+                  placeholder={null}
+                  options={conditionOptions}
+                  bind:value={condition.metadataKey}
+                />
+                <span>to</span>
+                <ColorPicker
+                  value={condition.metadataValue}
+                  on:change={e => (condition.metadataValue = e.detail)}
+                />
+                <span>if value</span>
+                <Select
+                  placeholder={null}
+                  options={operatorOptions}
+                  bind:value={condition.operator}
+                  on:change={e => onOperatorChange(condition, e.detail)}
+                />
+                {#if hasValueOption}
+                  <Select
+                    disabled={condition.noValue}
+                    options={valueTypeOptions}
+                    bind:value={condition.valueType}
+                    placeholder={null}
+                    on:change={() => onValueTypeChange(condition)}
+                  />
+                {/if}
+                {#if type === FieldType.DATETIME && condition.valueType === type}
+                  <DatePicker
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    bind:value={condition.referenceValue}
+                  />
+                {:else if type === FieldType.BOOLEAN && condition.valueType === type}
+                  <Select
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    options={["True", "False"]}
+                    bind:value={condition.referenceValue}
+                  />
+                {:else if (type === FieldType.OPTIONS || type === FieldType.ARRAY) && condition.valueType === type}
+                  {#if condition.operator === Constants.OperatorOptions.In.value}
+                    <Multiselect
+                      disabled={condition.noValue}
+                      options={componentInstance.schema?.[
+                        componentInstance.field
+                      ]?.constraints?.inclusion || []}
+                      bind:value={condition.referenceValue}
+                    />
+                  {:else}
+                    <Combobox
+                      disabled={condition.noValue}
+                      options={componentInstance.schema?.[
+                        componentInstance.field
+                      ]?.constraints?.inclusion || []}
+                      bind:value={condition.referenceValue}
+                    />
+                  {/if}
+                {:else if (type === FieldType.BB_REFERENCE || type === FieldType.BB_REFERENCE_SINGLE) && condition.valueType === type}
+                  <FilterUsers
+                    bind:value={condition.referenceValue}
+                    multiselect={[
+                      Constants.OperatorOptions.In.value,
+                      Constants.OperatorOptions.ContainsAny.value,
+                    ].includes(condition.operator)}
+                    disabled={condition.noValue}
+                    type={condition.valueType}
+                  />
+                {:else}
+                  <DrawerBindableInput
+                    {bindings}
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    value={condition.referenceValue}
+                    on:change={e => (condition.referenceValue = e.detail)}
+                  />
+                {/if}
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateCondition(condition)}
+                />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeCondition(condition)}
+                />
+              </div>
+            {/each}
+          </div>
+        {/if}
+        <div>
+          <Button secondary icon="Add" on:click={addCondition}>
+            Add condition
+          </Button>
+        </div>
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .conditions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .condition {
+    display: grid;
+    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr auto auto;
+    align-items: center;
+    grid-column-gap: var(--spacing-l);
+  }
+  .condition.with-value-option {
+    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr 1fr auto auto;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index bc71f8b696..fc862a19c8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -8,8 +8,11 @@
   } from "@budibase/bbui"
   import { componentStore } from "stores/builder"
   import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
 
   export let componentInstance
+  export let componentDefinition
+  export let componentBindings
   export let bindings
 
   let tempValue
@@ -35,6 +38,19 @@
   } set`
 </script>
 
+<!--
+  Load any general settings or sections tagged as "condition"
+-->
+<ComponentSettingsSection
+  {componentInstance}
+  {componentDefinition}
+  isScreen={false}
+  showInstanceName={false}
+  {bindings}
+  {componentBindings}
+  tag="condition"
+/>
+
 <DetailSummary name={"Conditions"} collapsible={false}>
   <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
 </DetailSummary>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7a9d1a5695..37f9c681d6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2879,6 +2879,11 @@
         "placeholder": "Auto",
         "min": 80,
         "max": 9999
+      },
+      {
+        "type": "tableConditions",
+        "label": "Conditions",
+        "key": "conditions"
       }
     ]
   },
@@ -7303,7 +7308,6 @@
           {
             "type": "columns/grid",
             "key": "columns",
-            "nested": true,
             "resetOn": "table"
           }
         ]
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 2035b03391..e86f163dba 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -42,7 +42,6 @@
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
-  $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: selectedRows = deriveSelectedRows(gridContext)
@@ -62,7 +61,13 @@
     const goldenRow = generateGoldenSample(rows)
     const id = get(component).id
     return {
+      // Not sure what this one is for...
       [id]: goldenRow,
+
+      // For row conditions context
+      row: goldenRow,
+
+      // For button action context
       eventContext: {
         row: goldenRow,
       },
@@ -91,6 +96,8 @@
       overrides[column.field] = {
         displayName: column.label,
         order: idx,
+        conditions: column.conditions,
+        visible: !!column.active,
       }
       if (column.width) {
         overrides[column.field].width = column.width
@@ -163,7 +170,6 @@
     {initialSortColumn}
     {initialSortOrder}
     {fixedRowHeight}
-    {columnWhitelist}
     {schemaOverrides}
     canAddRows={allowAddRows}
     canEditRows={allowEditRows}
@@ -187,7 +193,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index 372563995a..5d5f06872d 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -130,6 +130,10 @@
   on:mouseup={stopSelectionCallback}
   on:click={handleClick}
   width={column.width}
+  metadata={{
+    ...row.__metadata?.row,
+    ...row.__metadata?.cell[column.name],
+  }}
 >
   <svelte:component
     this={getCellRenderer(column)}
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 4e914e2b80..7b5deccb35 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -11,13 +11,20 @@
   export let center = false
   export let readonly = false
   export let hidden = false
+  export let metadata = null
 
-  $: style = getStyle(width, selectedUser)
+  $: style = getStyle(width, selectedUser, metadata)
 
-  const getStyle = (width, selectedUser) => {
+  const getStyle = (width, selectedUser, metadata) => {
     let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--user-color:${selectedUser.color};`
+      style += `--user-color :${selectedUser.color};`
+    }
+    if (metadata?.backgroundColor) {
+      style += `--cell-background: ${metadata.backgroundColor};`
+    }
+    if (metadata?.textColor) {
+      style += `--cell-font-color: ${metadata.textColor};`
     }
     return style
   }
@@ -43,7 +50,7 @@
   on:mouseup
   on:click
   on:contextmenu
-  on:touchstart
+  on:touchstart|passive
   on:touchend
   on:touchcancel
   on:mouseenter
@@ -72,7 +79,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--cell-font-color);
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
@@ -94,9 +101,9 @@
   }
 
   /* Cell border */
-  .cell.focused:after,
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
+  .cell.focused::after,
+  .cell.error::after,
+  .cell.selected-other:not(.focused)::after {
     content: " ";
     position: absolute;
     top: 0;
@@ -109,14 +116,30 @@
     box-sizing: border-box;
   }
 
+  /* Cell background overlay */
+  .cell.selected::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    height: calc(100% + 1px);
+    width: calc(100% + 1px);
+    opacity: 0.16;
+    background: var(--spectrum-global-color-blue-400);
+    z-index: 2;
+    pointer-events: none;
+  }
+
   /* Cell border for cells with labels */
-  .cell.error:after {
+  .cell.error::after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell.top.error:after {
+  .cell.top.error::after {
     border-radius: 2px 2px 2px 0;
   }
-  .cell.selected-other:not(.focused):after {
+  .cell.selected-other:not(.focused)::after {
     border-radius: 2px;
   }
 
@@ -151,15 +174,10 @@
   .cell.focused.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
   }
-
-  .cell.highlighted:not(.focused),
+  .cell.highlighted:not(.focused):not(.selected),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
   }
-  .cell.selected.focused,
-  .cell.selected:not(.focused) {
-    --cell-background: var(--spectrum-global-color-blue-100);
-  }
 
   /* Label for additional text */
   .label {
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 0cb9502322..349fea332c 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -54,6 +54,7 @@
   selected={rowSelected}
   {defaultHeight}
   rowIdx={row?.__idx}
+  metadata={row?.__metadata?.row}
 >
   <div class="gutter">
     {#if $$slots.default}
@@ -115,7 +116,7 @@
     margin: 3px 0 0 0;
   }
   .number {
-    color: var(--spectrum-global-color-gray-500);
+    color: val(--cell-font-color, var(--spectrum-global-color-gray-500));
   }
   .checkbox.visible,
   .number.visible {
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 159f0dbd45..f448460a96 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -70,6 +70,7 @@
             rowIdx={row.__idx}
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
+            metadata={row.__metadata?.row}
           >
             <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 878a9805c0..04a11da812 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -37,7 +37,6 @@
   export let API = null
   export let datasource = null
   export let schemaOverrides = null
-  export let columnWhitelist = null
   export let canAddRows = true
   export let canExpandRows = true
   export let canEditRows = true
@@ -59,6 +58,7 @@
   export let darkMode
   export let isCloud = null
   export let allowViewReadonlyColumns = false
+  export let rowConditions = null
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -93,7 +93,6 @@
   $: props.set({
     datasource,
     schemaOverrides,
-    columnWhitelist,
     canAddRows,
     canExpandRows,
     canEditRows,
@@ -114,6 +113,8 @@
     buttons,
     darkMode,
     isCloud,
+    allowViewReadonlyColumns,
+    rowConditions,
   })
 
   // Derive min height and make available in context
@@ -231,6 +232,7 @@
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
+    --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
@@ -286,7 +288,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: var(--cell-border);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
     background: var(--grid-background-alt);
diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index d3cce30092..36b5a7da5c 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -31,7 +31,7 @@
   const generateStyle = (scrollLeft, scrollTop, rowHeight) => {
     const offsetX = scrollHorizontally ? -1 * scrollLeft : 0
     const offsetY = scrollVertically ? -1 * (scrollTop % rowHeight) : 0
-    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+    return `transform: translate(${offsetX}px, ${offsetY}px);`
   }
 
   // Handles a mouse wheel event and updates scroll state
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index f240f964fa..a920b346d3 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -162,7 +162,7 @@
 
   /* Don't show borders between cells in the sticky column */
   .sticky-column :global(.cell:not(:last-child)) {
-    border-right: none;
+    border-right-color: transparent;
   }
 
   .header {
@@ -171,6 +171,9 @@
   .header :global(.cell) {
     background: var(--grid-background-alt);
   }
+  .header :global(.cell::before) {
+    display: none;
+  }
   .row {
     display: flex;
     flex-direction: row;
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 085f6e4387..0073754a5d 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -144,6 +144,7 @@ export const initialise = context => {
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
+            conditions: fieldSchema.conditions,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
new file mode 100644
index 0000000000..3800f21df1
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -0,0 +1,157 @@
+import { writable, get } from "svelte/store"
+import { derivedMemo, QueryUtils } from "../../../utils"
+import { FieldType, EmptyFilterOption } from "@budibase/types"
+
+export const createStores = () => {
+  const metadata = writable({})
+  return {
+    metadata,
+  }
+}
+
+export const deriveStores = context => {
+  const { columns } = context
+
+  // Derive and memoize the cell conditions present in our columns so that we
+  // only recompute condition metadata when absolutely necessary
+  const conditions = derivedMemo(columns, $columns => {
+    let newConditions = []
+    for (let column of $columns) {
+      for (let condition of column.conditions || []) {
+        newConditions.push({
+          ...condition,
+          column: column.name,
+          type: column.schema.type,
+        })
+      }
+    }
+    return newConditions
+  })
+
+  return {
+    conditions,
+  }
+}
+
+export const initialise = context => {
+  const { metadata, conditions, rows } = context
+
+  // Recompute all metadata if conditions change
+  conditions.subscribe($conditions => {
+    let newMetadata = {}
+    if ($conditions?.length) {
+      for (let row of get(rows)) {
+        newMetadata[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    metadata.set(newMetadata)
+  })
+
+  // Recompute metadata for specific rows when they change
+  rows.subscribe($rows => {
+    const $conditions = get(conditions)
+    if (!$conditions?.length) {
+      return
+    }
+    const $metadata = get(metadata)
+    let metadataUpdates = {}
+    for (let row of $rows) {
+      if (!row._rev || $metadata[row._id]?.version !== row._rev) {
+        metadataUpdates[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    if (Object.keys(metadataUpdates).length) {
+      metadata.update(state => ({
+        ...state,
+        ...metadataUpdates,
+      }))
+    }
+  })
+}
+
+const TypeCoercionMap = {
+  [FieldType.NUMBER]: parseFloat,
+  [FieldType.DATETIME]: val => {
+    if (val) {
+      return new Date(val).toISOString()
+    }
+    return null
+  },
+  [FieldType.BOOLEAN]: val => {
+    if (`${val}`.toLowerCase().trim() === "true") {
+      return true
+    }
+    if (`${val}`.toLowerCase().trim() === "false") {
+      return false
+    }
+    return null
+  },
+}
+
+// Evaluates an array of cell conditions against a certain row and returns the
+// resultant metadata
+const evaluateConditions = (row, conditions) => {
+  let metadata = {
+    version: row._rev,
+    row: {},
+    cell: {},
+  }
+  for (let condition of conditions) {
+    try {
+      let {
+        column,
+        type,
+        referenceValue,
+        operator,
+        metadataKey,
+        metadataValue,
+        target,
+      } = condition
+      let value = row[column]
+
+      // Coerce values into correct types for primitives
+      let coercedType = type
+      if (type === FieldType.FORMULA) {
+        // For formulas we want to ensure that the reference type matches the
+        // real type
+        if (value === true || value === false) {
+          coercedType = FieldType.BOOLEAN
+        } else if (typeof value === "number") {
+          coercedType = FieldType.NUMBER
+        }
+      }
+      const coerce = TypeCoercionMap[coercedType]
+      if (coerce) {
+        value = coerce(value)
+        referenceValue = coerce(referenceValue)
+      }
+
+      // Build lucene compatible condition expression
+      const luceneFilter = {
+        operator,
+        type,
+        field: "value",
+        value: referenceValue,
+      }
+      let query = QueryUtils.buildQuery([luceneFilter])
+      query.onEmptyFilter = EmptyFilterOption.RETURN_NONE
+      const result = QueryUtils.runQuery([{ value }], query)
+      if (result.length > 0) {
+        if (target === "row") {
+          metadata.row = {
+            ...metadata.row,
+            [metadataKey]: metadataValue,
+          }
+        } else {
+          metadata.cell[column] = {
+            ...metadata.cell[column],
+            [metadataKey]: metadataValue,
+          }
+        }
+      }
+    } catch {
+      // Swallow
+    }
+  }
+  return metadata
+}
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js
index 6da6ebf11e..fc0435f92d 100644
--- a/packages/frontend-core/src/components/grid/stores/config.js
+++ b/packages/frontend-core/src/components/grid/stores/config.js
@@ -12,9 +12,9 @@ export const createStores = context => {
   const initialFilter = getProp("initialFilter")
   const fixedRowHeight = getProp("fixedRowHeight")
   const schemaOverrides = getProp("schemaOverrides")
-  const columnWhitelist = getProp("columnWhitelist")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
+  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -23,9 +23,9 @@ export const createStores = context => {
     initialFilter,
     fixedRowHeight,
     schemaOverrides,
-    columnWhitelist,
     notifySuccess,
     notifyError,
+    rowConditions,
   }
 }
 
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 8b8ffdf2cf..12a3bd5afe 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -13,14 +13,8 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const {
-    API,
-    definition,
-    schemaOverrides,
-    columnWhitelist,
-    datasource,
-    schemaMutations,
-  } = context
+  const { API, definition, schemaOverrides, datasource, schemaMutations } =
+    context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -46,17 +40,13 @@ export const deriveStores = context => {
   // Derives the total enriched schema, made up of the saved schema and any
   // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, schemaMutations, columnWhitelist],
-    ([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
+    [schema, schemaOverrides, schemaMutations],
+    ([$schema, $schemaOverrides, $schemaMutations]) => {
       if (!$schema) {
         return null
       }
       let enrichedSchema = {}
       Object.keys($schema).forEach(field => {
-        // Apply whitelist if provided
-        if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
-          return
-        }
         enrichedSchema[field] = {
           ...$schema[field],
           ...$schemaOverrides?.[field],
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
index f086f0a51b..6671cc729c 100644
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@@ -20,6 +20,7 @@ import * as Table from "./datasources/table"
 import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
+import * as Conditions from "./conditions"
 
 const DependencyOrderedStores = [
   Sort,
@@ -33,6 +34,7 @@ const DependencyOrderedStores = [
   Scroll,
   Validation,
   Rows,
+  Conditions,
   UI,
   Resize,
   Viewport,
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 7459059d1e..fb7a487c8e 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -5,6 +5,7 @@ import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
+import { FieldType } from "@budibase/types"
 
 export const createStores = () => {
   const rows = writable([])
@@ -17,27 +18,6 @@ export const createStores = () => {
   const error = writable(null)
   const fetch = writable(null)
 
-  // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(
-    [rows, rowChangeCache],
-    ([$rows, $rowChangeCache]) => {
-      return $rows.map((row, idx) => ({
-        ...row,
-        ...$rowChangeCache[row._id],
-        __idx: idx,
-      }))
-    }
-  )
-
-  // Generate a lookup map to quick find a row by ID
-  const rowLookupMap = derived(enrichedRows, $enrichedRows => {
-    let map = {}
-    for (let i = 0; i < $enrichedRows.length; i++) {
-      map[$enrichedRows[i]._id] = $enrichedRows[i]
-    }
-    return map
-  })
-
   // Mark loaded as true if we've ever stopped loading
   let hasStartedLoading = false
   loading.subscribe($loading => {
@@ -49,12 +29,8 @@ export const createStores = () => {
   })
 
   return {
-    rows: {
-      ...rows,
-      subscribe: enrichedRows.subscribe,
-    },
+    rows,
     fetch,
-    rowLookupMap,
     loaded,
     refreshing,
     loading,
@@ -65,6 +41,35 @@ export const createStores = () => {
   }
 }
 
+export const deriveStores = context => {
+  const { rows } = context
+
+  // Enrich rows with an index property and any pending changes
+  const enrichedRows = derived(rows, $rows => {
+    return $rows.map((row, idx) => ({
+      ...row,
+      __idx: idx,
+    }))
+  })
+
+  // Generate a lookup map to quick find a row by ID
+  const rowLookupMap = derived(enrichedRows, $enrichedRows => {
+    let map = {}
+    for (let i = 0; i < $enrichedRows.length; i++) {
+      map[$enrichedRows[i]._id] = $enrichedRows[i]
+    }
+    return map
+  })
+
+  return {
+    rows: {
+      ...rows,
+      subscribe: enrichedRows.subscribe,
+    },
+    rowLookupMap,
+  }
+}
+
 export const createActions = context => {
   const {
     rows,
@@ -367,7 +372,7 @@ export const createActions = context => {
     // Get index of row to check if it exists
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
-    const index = $rowLookupMap[id].__idx
+    const index = $rowLookupMap[id]?.__idx
 
     // Process as either an update, addition or deletion
     if (row) {
@@ -417,8 +422,21 @@ export const createActions = context => {
   // valid pending change was made or not
   const stashRowChanges = (rowId, changes) => {
     const $rowLookupMap = get(rowLookupMap)
+    const $columnLookupMap = get(columnLookupMap)
     const row = $rowLookupMap[rowId]
 
+    // Coerce some values into the correct types
+    for (let column of Object.keys(changes || {})) {
+      const type = $columnLookupMap[column]?.schema?.type
+
+      // Stringify objects
+      if (type === FieldType.STRING || type == FieldType.LONGFORM) {
+        if (changes[column] != null && typeof changes[column] !== "string") {
+          changes[column] = JSON.stringify(changes[column])
+        }
+      }
+    }
+
     // Check this is a valid change
     if (!row || !changesAreValid(row, changes)) {
       return false
@@ -643,6 +661,7 @@ export const createActions = context => {
   const cleanRow = row => {
     let clone = { ...row }
     delete clone.__idx
+    delete clone.__metadata
     if (!get(hasBudibaseIdentifiers)) {
       delete clone._id
     }
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index e1a8ec0473..0797f38b55 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -10,6 +10,8 @@ export const deriveStores = context => {
     scrollLeft,
     width,
     height,
+    rowChangeCache,
+    metadata,
   } = context
 
   // Derive visible rows
@@ -19,25 +21,31 @@ export const deriveStores = context => {
     [scrollTop, rowHeight],
     ([$scrollTop, $rowHeight]) => {
       return Math.floor($scrollTop / $rowHeight)
-    },
-    0
+    }
   )
   const visualRowCapacity = derived(
     [height, rowHeight],
     ([$height, $rowHeight]) => {
       return Math.ceil($height / $rowHeight) + 1
-    },
-    0
+    }
   )
   const renderedRows = derived(
-    [rows, scrolledRowCount, visualRowCapacity],
-    ([$rows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $rows.slice(
-        $scrolledRowCount,
-        $scrolledRowCount + $visualRowCapacity
-      )
-    },
-    []
+    [rows, scrolledRowCount, visualRowCapacity, rowChangeCache, metadata],
+    ([
+      $rows,
+      $scrolledRowCount,
+      $visualRowCapacity,
+      $rowChangeCache,
+      $metadata,
+    ]) => {
+      return $rows
+        .slice($scrolledRowCount, $scrolledRowCount + $visualRowCapacity)
+        .map(row => ({
+          ...row,
+          ...$rowChangeCache[row._id],
+          __metadata: $metadata[row._id],
+        }))
+    }
   )
 
   // Derive visible columns
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 06e1348988..d494abb82d 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -8,3 +8,4 @@ export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as FilterBuilder } from "./FilterBuilder.svelte"
+export { default as FilterUsers } from "./FilterUsers.svelte"
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 8dc0b41375..22e5e8583a 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -12,6 +12,7 @@ import { FieldType, BBReferenceFieldSubType } from "@budibase/types"
 
 export const BannedSearchTypes = [
   FieldType.LINK,
+  FieldType.ATTACHMENT_SINGLE,
   FieldType.ATTACHMENTS,
   FieldType.FORMULA,
   FieldType.JSON,
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index 30132e11e2..b2b9bd2ac6 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -16,5 +16,6 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.25) !important;
-  --spectrum-global-color-blue-100: rgba(36, 44, 64) !important;
+  --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
+  --translucent-grey: rgba(255, 255, 255, 0.075) !important;
 }
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index a99812b146..5cf73e8238 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -49,5 +49,6 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.15) !important;
-  --spectrum-global-color-blue-100: rgb(56, 65, 90) !important;
+  --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
+  --translucent-grey: hsla(213, 36%, 80%, 0.11) !important;
 }