From 64b92329ecf91f54565fbdc47d5049d74eb52fba Mon Sep 17 00:00:00 2001
From: Peter Evans <peter@baserow.io>
Date: Mon, 15 Dec 2025 07:43:35 +0000
Subject: [PATCH] Ensure that table element fields can be styled. (#4427)

* Ensure that nested styles work in the new custom style components.
---
 .../contrib/builder/elements/element_types.py |  6 ++-
 ...evented_the_table_element_fields_from.json |  9 ++++
 .../collectionField/form/BooleanFieldForm.vue |  1 +
 .../collectionField/form/LinkFieldForm.vue    |  1 +
 .../collectionField/form/TagsFieldForm.vue    |  1 +
 .../collectionField/form/TextFieldForm.vue    |  1 +
 .../forms/style/CustomStyleButton.vue         |  8 +++-
 .../forms/style/CustomStyleForm.vue           |  6 +--
 .../page/sidePanels/GeneralSidePanel.vue      | 41 +++++++++++++------
 .../builder/mixins/collectionFieldForm.js     | 25 +++++++++++
 .../builder/mixins/elementSidePanel.js        |  2 +-
 11 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 changelog/entries/unreleased/bug/resolved_a_bug_which_prevented_the_table_element_fields_from.json

diff --git a/backend/src/baserow/contrib/builder/elements/element_types.py b/backend/src/baserow/contrib/builder/elements/element_types.py
index e4e8549ec6..46a05485ce 100644
--- a/backend/src/baserow/contrib/builder/elements/element_types.py
+++ b/backend/src/baserow/contrib/builder/elements/element_types.py
@@ -322,6 +322,7 @@ def serializer_field_overrides(self):
         )
         from baserow.contrib.builder.theme.theme_config_block_types import (
             ButtonThemeConfigBlockType,
+            TypographyThemeConfigBlockType,
         )
 
         return {
@@ -336,7 +337,10 @@ def serializer_field_overrides(self):
                 property_name=["button", "table", "header_button"],
                 theme_config_block_type_name=[
                     ButtonThemeConfigBlockType.type,
-                    TableThemeConfigBlockType.type,
+                    [
+                        TableThemeConfigBlockType.type,
+                        TypographyThemeConfigBlockType.type,
+                    ],
                     ButtonThemeConfigBlockType.type,
                 ],
                 serializer_kwargs={"required": False},
diff --git a/changelog/entries/unreleased/bug/resolved_a_bug_which_prevented_the_table_element_fields_from.json b/changelog/entries/unreleased/bug/resolved_a_bug_which_prevented_the_table_element_fields_from.json
new file mode 100644
index 0000000000..9c9308f029
--- /dev/null
+++ b/changelog/entries/unreleased/bug/resolved_a_bug_which_prevented_the_table_element_fields_from.json
@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Resolved a bug which prevented the table element fields from being styled.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2025-12-11"
+}
\ No newline at end of file
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
index a4ed9519ff..bef536429e 100644
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, noAlignment: true }"
           variant="normal"
         />
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
index 1141cd8297..661e336fd9 100644
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
@@ -18,6 +18,7 @@
           style-key="cell"
           :config-block-types="linkFieldBlockTypes"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, noAlignment: true }"
           variant="normal"
         />
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
index 91cf9d588d..e4ebfd5fa2 100644
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table', 'typography']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, onlyBody: true, noAlignment: true }"
           variant="normal"
         />
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
index 21a287ace1..5959547104 100644
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table', 'typography']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, onlyBody: true, noAlignment: true }"
           variant="normal"
         />
diff --git a/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleButton.vue b/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleButton.vue
index daf3f731dc..8831dd69c6 100644
--- a/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleButton.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleButton.vue
@@ -48,6 +48,11 @@ export default {
       required: false,
       default: () => null,
     },
+    onStylesChanged: {
+      type: Function,
+      required: false,
+      default: null,
+    },
   },
   methods: {
     /**
@@ -59,8 +64,9 @@ export default {
         theme: this.theme,
         styleKey: this.styleKey,
         extraArgs: this.extraArgs,
+        onStylesChanged: this.onStylesChanged,
         configBlockTypes: this.configBlockTypes,
-        defaultValues: this.value?.[this.styleKey],
+        defaultStyleValues: this.value?.[this.styleKey],
       })
     },
   },
diff --git a/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleForm.vue b/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleForm.vue
index b05b4f89f1..89fa658537 100644
--- a/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleForm.vue
@@ -16,9 +16,9 @@
         <div class="custom-style__config-block-content">
           <ThemeConfigBlock
             ref="configBlocks"
-            :theme="customStylesContext.theme"
-            :default-values="customStylesContext.defaultValues"
             :preview="false"
+            :theme="customStylesContext.theme"
+            :default-values="customStylesContext.defaultStyleValues"
             :theme-config-block-type="themeConfigBlock"
             :extra-args="customStylesContext.extraArgs"
             @values-changed="$emit('values-changed', $event)"
@@ -41,7 +41,7 @@ export default {
      * @property {object} theme - The current theme object.
      * @property {string} styleKey - The key of the style being edited.
      * @property {object|null} extraArgs - Any extra args needed for the blocks.
-     * @property {object} defaultValues - The default values for the styles.
+     * @property {object} defaultStyleValues - The default values for the styles.
      * @property {Array<string>} configBlockTypes - The types of config blocks
      *  to render for this custom style form.
      */
diff --git a/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue b/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue
index 2f3d95e968..73a39f1fda 100644
--- a/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue
+++ b/web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue
@@ -2,7 +2,7 @@
   <div class="general-side-panel">
     <component
       :is="elementType.generalFormComponent"
-      v-show="elementFormVisible"
+      v-if="elementFormVisible"
       :key="`element-form-${element.id}`"
       ref="panelForm"
       class="element-form"
@@ -10,7 +10,7 @@
       @values-changed="onChange($event)"
     />
     <CustomStyleForm
-      v-if="!elementFormVisible"
+      v-else
       :key="`style-form-${element.id}`"
       :custom-styles-context="customStylesContext"
       @hide="elementFormVisible = true"
@@ -39,12 +39,14 @@ export default {
         theme: {},
         styleKey: '',
         extraArgs: null,
-        defaultValues: {},
+        defaultStyleValues: {},
         configBlockTypes: [],
+        // Optional callback to allow the form component to
+        // modify the final object before sending it to onChange.
+        onStylesChanged: null,
       },
     }
   },
-
   methods: {
     /**
      * The handler that is injected into the element's general form
@@ -57,17 +59,32 @@ export default {
       this.elementFormVisible = !this.elementFormVisible
     },
     /**
-     * Called when the values in the `CustomStyleForm` change. It merges
-     * the new values with the default values and emits the `onChange`
-     * event to update the element's styles.
+     * Called when the values in the `CustomStyleForm` change. If the form
+     * component provided an onStylesChanged callback, use that to build the
+     * update object. Otherwise, apply to root element styles (default behavior).
      */
-    onThemeValuesChanged(newValues) {
-      const { styleKey, defaultValues } = this.customStylesContext
-      this.onChange({
+    onThemeValuesChanged(newStyleValues) {
+      const { styleKey, onStylesChanged } = this.customStylesContext
+
+      // The default behaviour is to just update the styles on the root element.
+      let updatedElement = {
         styles: {
-          [styleKey]: { ...defaultValues, ...newValues },
+          ...this.element.styles,
+          [styleKey]: newStyleValues,
         },
-      })
+      }
+      if (onStylesChanged) {
+        // If we have an onStylesChanged callback, use that to build the final update
+        // object. This is probably going to be for a table element's field styles.
+        updatedElement = onStylesChanged(
+          newStyleValues,
+          this.customStylesContext
+        )
+      }
+      this.onChange(updatedElement)
+      // Update the context so that other theme blocks
+      // are aware of the new default style values.
+      this.customStylesContext.defaultStyleValues = newStyleValues
     },
   },
 }
diff --git a/web-frontend/modules/builder/mixins/collectionFieldForm.js b/web-frontend/modules/builder/mixins/collectionFieldForm.js
index c2abc3e90e..2ab0c4fd4c 100644
--- a/web-frontend/modules/builder/mixins/collectionFieldForm.js
+++ b/web-frontend/modules/builder/mixins/collectionFieldForm.js
@@ -13,4 +13,29 @@ export default {
       required: true,
     },
   },
+  methods: {
+    /**
+     * Handles the field style changes made in the form. When the custom style form
+     * is changed, this method is called with the new style values and the context
+     * of the custom styles. It updates the styles of the specific field within the
+     * element's fields array and returns the updated table element.
+     * @param newStyleValues - The new style values to be applied to the field.
+     * @param customStylesContext - The custom style context
+     * @return {object} - The updated table element with the modified field styles.
+     */
+    onFieldStylesChanged(newStyleValues, customStylesContext) {
+      const elementToUpdate = { ...this.element }
+      const { styleKey } = customStylesContext
+      elementToUpdate.fields = elementToUpdate.fields.map((field) => {
+        if (field.id === this.defaultValues.id) {
+          return {
+            ...field,
+            styles: { ...field.styles, [styleKey]: newStyleValues },
+          }
+        }
+        return field
+      })
+      return elementToUpdate
+    },
+  },
 }
diff --git a/web-frontend/modules/builder/mixins/elementSidePanel.js b/web-frontend/modules/builder/mixins/elementSidePanel.js
index e7b0f1d7ed..1a82d1103a 100644
--- a/web-frontend/modules/builder/mixins/elementSidePanel.js
+++ b/web-frontend/modules/builder/mixins/elementSidePanel.js
@@ -63,7 +63,7 @@ export default {
           this.element,
           this.workspace.id
         ) ||
-        !this.$refs.panelForm?.isFormValid(true)
+        (this.$refs.panelForm && !this.$refs.panelForm?.isFormValid(true))
       ) {
         return
       }