From 868b36ebcb65e22f0c531fcd593266339d978d03 Mon Sep 17 00:00:00 2001
From: devanshu052000 <devanshu.rastogi05@gmail.com>
Date: Mon, 6 Jan 2025 02:59:50 +0530
Subject: [PATCH] Add JSON in column type dropdown.

---
 .../Table/ColumnManager/PropertiesTabElements.jsx |  1 +
 .../Table/ColumnManager/StylesTabElements.jsx     | 15 ++++++++++++---
 .../Inspector/Components/Table/Table.jsx          |  2 ++
 .../Widgets/Table/GenerateEachCellValue.jsx       |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
index 27ba100f52..c161156e8b 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
@@ -52,6 +52,7 @@ export const PropertiesTabElements = ({
             { label: 'Boolean', value: 'boolean' },
             { label: 'Image', value: 'image' },
             { label: 'Link', value: 'link' },
+            { label: 'JSON', value: 'json' },
             // Following column types are deprecated
             { label: 'Default', value: 'default' },
             { label: 'Dropdown', value: 'dropdown' },
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
index e647626438..5091e56c6c 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/StylesTabElements.jsx
@@ -122,9 +122,18 @@ export const StylesTabElements = ({
         </div>
       )}
 
-      {['string', 'default', undefined, 'number', 'boolean', 'select', 'text', 'newMultiSelect', 'datepicker'].includes(
-        column.columnType
-      ) && (
+      {[
+        'string',
+        'default',
+        undefined,
+        'number',
+        'json',
+        'boolean',
+        'select',
+        'text',
+        'newMultiSelect',
+        'datepicker',
+      ].includes(column.columnType) && (
         <>
           {column.columnType !== 'boolean' && (
             <div data-cy={`input-and-label-text-color`} className="field px-3">
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
index 5a2175cfe1..b11a675e80 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/Table.jsx
@@ -624,6 +624,8 @@ class TableComponent extends React.Component {
                               return 'Select';
                             case 'newMultiSelect':
                               return 'Multiselect';
+                            case 'json':
+                              return 'JSON';
                             default:
                               capitalize(text ?? '');
                           }
diff --git a/frontend/src/AppBuilder/Widgets/Table/GenerateEachCellValue.jsx b/frontend/src/AppBuilder/Widgets/Table/GenerateEachCellValue.jsx
index 0d2d8530c7..312e57b760 100644
--- a/frontend/src/AppBuilder/Widgets/Table/GenerateEachCellValue.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/GenerateEachCellValue.jsx
@@ -29,7 +29,7 @@ export default function GenerateEachCellValue({
 
   const [showHighlightedCells, setHighlighterCells] = React.useState(globalFilter ? true : false);
   // const [isNullCellClicked, setIsNullCellClicked] = React.useState(false);
-  const columnTypeAllowToRenderMarkElement = ['text', 'string', 'default', 'number', undefined];
+  const columnTypeAllowToRenderMarkElement = ['text', 'string', 'default', 'number', 'json', undefined];
   const ref = useRef();
   const [showOverlay, setShowOverlay] = useState(false);
   const [hovered, setHovered] = useState(false);