From c3b14dac270e6d2ed6d58797ebc675e6e71f5647 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <133095394+nakulnagargade@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:51:11 +0530
Subject: [PATCH] feat: Introduce table styles property to set the casing of
 table column names (#11424)

* feat: Introduce table styles property to set the casing of table column names

* Update table default data keys

* Fix
---
 .../AppBuilder/WidgetManager/widgets/table.js    | 16 ++++++++++++++++
 .../Widgets/Table/Components/TableHeader.jsx     |  2 ++
 frontend/src/AppBuilder/Widgets/Table/Table.jsx  |  2 ++
 .../Widgets/Table/load-properties-and-styles.js  |  2 ++
 .../src/Editor/WidgetManager/configs/table.js    | 16 ++++++++++++++++
 server/src/helpers/widget-config/table.js        | 16 ++++++++++++++++
 6 files changed, 54 insertions(+)

diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/table.js b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
index 9be59e9dc3..ff815bab07 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/table.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/table.js
@@ -310,6 +310,16 @@ export const tableConfig = {
         { displayName: 'Wrap', value: 'wrap' },
       ],
     },
+    headerCasing: {
+      type: 'switch',
+      displayName: 'Header casing',
+      validation: { schema: { type: 'string' } },
+      accordian: 'Data',
+      options: [
+        { displayName: 'AA', value: 'uppercase' },
+        { displayName: 'As typed', value: 'none' },
+      ],
+    },
     tableType: {
       type: 'select',
       displayName: 'Row style',
@@ -529,6 +539,7 @@ export const tableConfig = {
         value: [
           {
             name: 'id',
+            key: 'id',
             id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
             autogenerated: true,
             fxActiveFields: [],
@@ -548,6 +559,7 @@ export const tableConfig = {
           },
           {
             name: 'name',
+            key: 'name',
             id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
             autogenerated: true,
             fxActiveFields: [],
@@ -556,6 +568,7 @@ export const tableConfig = {
           },
           {
             name: 'email',
+            key: 'email',
             id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
             autogenerated: true,
             fxActiveFields: [],
@@ -564,6 +577,7 @@ export const tableConfig = {
           },
           {
             name: 'date',
+            key: 'date',
             id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
             autogenerated: true,
             fxActiveFields: [],
@@ -576,6 +590,7 @@ export const tableConfig = {
           },
           {
             name: 'mobile_number',
+            key: 'mobile_number',
             id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
             autogenerated: true,
             fxActiveFields: [],
@@ -652,6 +667,7 @@ export const tableConfig = {
     styles: {
       textColor: { value: '#000' },
       columnHeaderWrap: { value: 'fixed' },
+      headerCasing: { value: 'uppercase' },
       actionButtonRadius: { value: '0' },
       cellSize: { value: 'regular' },
       borderRadius: { value: '8' },
diff --git a/frontend/src/AppBuilder/Widgets/Table/Components/TableHeader.jsx b/frontend/src/AppBuilder/Widgets/Table/Components/TableHeader.jsx
index 3df604e06d..3c8ba0258c 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Components/TableHeader.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Components/TableHeader.jsx
@@ -17,6 +17,7 @@ export const TableHeader = ({
   columnHeaderWrap,
   setResizingColumnId,
   resizingColumnId,
+  headerCasing,
 }) => {
   const calculateWidthOfActionColumnHeader = (position) => {
     let totalWidth = null;
@@ -193,6 +194,7 @@ export const TableHeader = ({
                                       'text-truncate': getResolvedValue(columnHeaderWrap) === 'fixed',
                                       'wrap-wrapper': getResolvedValue(columnHeaderWrap) === 'wrap',
                                     })}
+                                    style={{ textTransform: headerCasing === 'uppercase' ? 'uppercase' : 'none' }}
                                   >
                                     {column.render('Header')}
                                   </div>
diff --git a/frontend/src/AppBuilder/Widgets/Table/Table.jsx b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
index 986edca4f5..c38294eab7 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Table.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Table.jsx
@@ -135,6 +135,7 @@ export const Table = React.memo(
       borderColor,
       isMaxRowHeightAuto,
       columnHeaderWrap,
+      headerCasing,
     } = loadPropertiesAndStyles(properties, styles, darkMode);
     const updatedDataReference = useRef([]);
     const preSelectRow = useRef(false);
@@ -1096,6 +1097,7 @@ export const Table = React.memo(
               columnHeaderWrap={columnHeaderWrap}
               setResizingColumnId={setResizingColumnId}
               resizingColumnId={resizingColumnId}
+              headerCasing={headerCasing}
             />
             {page.length > 0 && !loadingState && (
               <tbody
diff --git a/frontend/src/AppBuilder/Widgets/Table/load-properties-and-styles.js b/frontend/src/AppBuilder/Widgets/Table/load-properties-and-styles.js
index 7d586f837b..8be5b9319c 100644
--- a/frontend/src/AppBuilder/Widgets/Table/load-properties-and-styles.js
+++ b/frontend/src/AppBuilder/Widgets/Table/load-properties-and-styles.js
@@ -83,6 +83,7 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode) {
   const contentWrapProperty = styles?.contentWrap ?? true;
   const borderColor = styles?.borderColor ?? 'var(--borders-weak-disabled)';
   const columnHeaderWrap = styles?.columnHeaderWrap ?? 'fixed';
+  const headerCasing = styles?.headerCasing ?? 'uppercase';
 
   return {
     color,
@@ -122,5 +123,6 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode) {
     boxShadow,
     borderColor,
     columnHeaderWrap,
+    headerCasing,
   };
 }
diff --git a/frontend/src/Editor/WidgetManager/configs/table.js b/frontend/src/Editor/WidgetManager/configs/table.js
index 554e6f6cc7..c8da1d96b0 100644
--- a/frontend/src/Editor/WidgetManager/configs/table.js
+++ b/frontend/src/Editor/WidgetManager/configs/table.js
@@ -310,6 +310,16 @@ export const tableConfig = {
         { displayName: 'Wrap', value: 'wrap' },
       ],
     },
+    headerCasing: {
+      type: 'switch',
+      displayName: 'Header casing',
+      validation: { schema: { type: 'string' } },
+      accordian: 'Data',
+      options: [
+        { displayName: 'AA', value: 'uppercase' },
+        { displayName: 'As typed', value: 'none' },
+      ],
+    },
     tableType: {
       type: 'select',
       displayName: 'Row style',
@@ -529,6 +539,7 @@ export const tableConfig = {
         value: [
           {
             name: 'id',
+            key: 'id',
             id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
             autogenerated: true,
             fxActiveFields: [],
@@ -548,6 +559,7 @@ export const tableConfig = {
           },
           {
             name: 'name',
+            key: 'name',
             id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
             autogenerated: true,
             fxActiveFields: [],
@@ -556,6 +568,7 @@ export const tableConfig = {
           },
           {
             name: 'email',
+            key: 'email',
             id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
             autogenerated: true,
             fxActiveFields: [],
@@ -564,6 +577,7 @@ export const tableConfig = {
           },
           {
             name: 'date',
+            key: 'date',
             id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
             autogenerated: true,
             fxActiveFields: [],
@@ -576,6 +590,7 @@ export const tableConfig = {
           },
           {
             name: 'mobile_number',
+            key: 'mobile_number',
             id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
             autogenerated: true,
             fxActiveFields: [],
@@ -652,6 +667,7 @@ export const tableConfig = {
     styles: {
       textColor: { value: '#000' },
       columnHeaderWrap: { value: 'fixed' },
+      headerCasing: { value: 'uppercase' },
       actionButtonRadius: { value: '0' },
       cellSize: { value: 'regular' },
       borderRadius: { value: '8' },
diff --git a/server/src/helpers/widget-config/table.js b/server/src/helpers/widget-config/table.js
index eb08ac88c8..bd2580b7b6 100644
--- a/server/src/helpers/widget-config/table.js
+++ b/server/src/helpers/widget-config/table.js
@@ -310,6 +310,16 @@ export const tableConfig = {
         { displayName: 'Wrap', value: 'wrap' },
       ],
     },
+    headerCasing: {
+      type: 'switch',
+      displayName: 'Header casing',
+      validation: { schema: { type: 'string' } },
+      accordian: 'Data',
+      options: [
+        { displayName: 'AA', value: 'uppercase' },
+        { displayName: 'As typed', value: 'none' },
+      ],
+    },
     tableType: {
       type: 'select',
       displayName: 'Row style',
@@ -530,6 +540,7 @@ export const tableConfig = {
         value: [
           {
             name: 'id',
+            key: 'id',
             id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
             autogenerated: true,
             fxActiveFields: [],
@@ -549,6 +560,7 @@ export const tableConfig = {
           },
           {
             name: 'name',
+            key: 'name',
             id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
             autogenerated: true,
             fxActiveFields: [],
@@ -557,6 +569,7 @@ export const tableConfig = {
           },
           {
             name: 'email',
+            key: 'email',
             id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
             autogenerated: true,
             fxActiveFields: [],
@@ -565,6 +578,7 @@ export const tableConfig = {
           },
           {
             name: 'date',
+            key: 'date',
             id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
             autogenerated: true,
             fxActiveFields: [],
@@ -577,6 +591,7 @@ export const tableConfig = {
           },
           {
             name: 'phone',
+            key: 'phone',
             id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
             autogenerated: true,
             fxActiveFields: [],
@@ -653,6 +668,7 @@ export const tableConfig = {
     styles: {
       textColor: { value: '#000' },
       columnHeaderWrap: { value: 'fixed' },
+      headerCasing: { value: 'uppercase' },
       actionButtonRadius: { value: '0' },
       cellSize: { value: 'regular' },
       borderRadius: { value: '8' },