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 c161156e8b..2e975109d2 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ColumnManager/PropertiesTabElements.jsx
@@ -267,6 +267,24 @@ export const PropertiesTabElements = ({
           )}
         </div>
       )}
+      {column.columnType === 'json' && (
+        <div className="border mx-3 column-popover-card-ui" style={{ borderRadius: '6px', marginTop: '-8px' }}>
+          <div style={{ background: 'var(--surfaces-surface-02)', padding: '8px 12px' }}>
+            <ProgramaticallyHandleProperties
+              label="Indent"
+              currentState={currentState}
+              index={index}
+              darkMode={darkMode}
+              callbackFunction={onColumnItemChange}
+              property="jsonIndentation"
+              props={column}
+              component={component}
+              paramMeta={{ type: 'toggle', displayName: 'Indent' }}
+              paramType="properties"
+            />
+          </div>
+        </div>
+      )}
       <div className="border mx-3 column-popover-card-ui" style={{ borderRadius: '6px', marginTop: '-8px' }}>
         <div style={{ background: 'var(--surfaces-surface-02)', padding: '8px 12px' }}>
           <ProgramaticallyHandleProperties
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
index e559369396..c3fb47d612 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/Table/ProgramaticallyHandleProperties.jsx
@@ -50,6 +50,8 @@ export const ProgramaticallyHandleProperties = ({
         return props?.parseInUnixTimestamp;
       case 'isDateSelectionEnabled':
         return props?.isDateSelectionEnabled;
+      case 'jsonIndentation':
+        return props?.jsonIndentation;
       default:
         return;
     }
@@ -81,6 +83,9 @@ export const ProgramaticallyHandleProperties = ({
     if (property === 'linkColor') {
       return definitionObj?.value ?? '#1B1F24';
     }
+    if (property === 'jsonIndentation') {
+      return definitionObj?.value ?? `{{true}}`;
+    }
     return definitionObj?.value ?? `{{false}}`;
   };
 
@@ -111,7 +116,9 @@ export const ProgramaticallyHandleProperties = ({
     const fxActiveFieldsPropExists = props?.hasOwnProperty('fxActiveFields') ?? false;
     //to support backward compatibility, when fxActive is true for a particular column, we are passing all possible combinations which should render codehinter
     const fxActive =
-      props?.fxActive && resolveReferences(props.fxActive) ? ['isEditable', 'columnVisibility', 'linkTarget'] : [];
+      props?.fxActive && resolveReferences(props.fxActive)
+        ? ['isEditable', 'columnVisibility', 'jsonIndentation', 'linkTarget']
+        : [];
 
     const checkFxActiveFieldIsArrray = (fxActiveFieldsProperty) => {
       // adding error handling mechanism for fxActiveFieldsProperty , if props.fxActiveFields is array , then return props.fxActiveFields or else return [], this will make sure, fxActiveFields wil always be array
diff --git a/frontend/src/AppBuilder/Widgets/Table/Json.jsx b/frontend/src/AppBuilder/Widgets/Table/Json.jsx
index 9eda847d3f..fcae72459e 100644
--- a/frontend/src/AppBuilder/Widgets/Table/Json.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/Json.jsx
@@ -5,6 +5,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 const Json = ({
   isEditable,
+  jsonIndentation,
   darkMode,
   handleCellValueChange,
   cellTextColor,
@@ -17,7 +18,6 @@ const Json = ({
   cellSize,
   maxRowHeightValue,
 }) => {
-  const jsonIndentation = false;
   const ref = React.useRef(null);
 
   const [hovered, setHovered] = useState(false);
diff --git a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx b/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
index e7013d0b1e..257de7c4ae 100644
--- a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
+++ b/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx
@@ -716,9 +716,11 @@ export default function generateColumnsData({
             );
           }
           case 'json': {
+            const jsonIndentation = getResolvedValue(column?.jsonIndentation) ?? true;
             return (
               <Json
                 isEditable={isEditable}
+                jsonIndentation={jsonIndentation}
                 darkMode={darkMode}
                 handleCellValueChange={handleCellValueChange}
                 cellTextColor={cellTextColor}