From 55c783064e05945ee1f699268dcfb9cd06b53c29 Mon Sep 17 00:00:00 2001
From: ishaanparlikar <43013132+ishaanparlikar@users.noreply.github.com>
Date: Mon, 19 Dec 2022 15:39:57 +0530
Subject: [PATCH] change position of cell background color option in column
 properties (#4891)

* fixed #4838

* Removed extra input field
---
 .../src/Editor/Inspector/Components/Table.jsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index b3cc1bc9a2..dab9a20625 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -256,6 +256,7 @@ class TableComponent extends React.Component {
               }}
             />
           </div>
+    
 
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
             <div>
@@ -277,6 +278,23 @@ class TableComponent extends React.Component {
                   }}
                 />
               </div>
+              <div className="field mb-2">
+            <label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
+            <CodeHinter
+              currentState={this.props.currentState}
+              initialValue={column.cellBackgroundColor ?? 'inherit'}
+              theme={this.props.darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={''}
+              onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
+              componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
+              popOverCallback={(showing) => {
+                this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
+              }}
+            />
+          </div>
+
               {column.isEditable && (
                 <div>
                   <div data-cy={`header-validation`} className="hr-text">
@@ -490,23 +508,6 @@ class TableComponent extends React.Component {
             </>
           )}
 
-          <div data-cy={`input-and-label-cell-bg-color`} className="field mb-2">
-            <label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
-            <CodeHinter
-              currentState={this.props.currentState}
-              initialValue={column.cellBackgroundColor ?? 'inherit'}
-              theme={this.props.darkMode ? 'monokai' : 'default'}
-              mode="javascript"
-              lineNumbers={false}
-              placeholder={''}
-              onChange={(value) => this.onColumnItemChange(index, 'cellBackgroundColor', value)}
-              componentName={this.getPopoverFieldSource(column.columnType, 'cellBackgroundColor')}
-              popOverCallback={(showing) => {
-                this.setColumnPopoverRootCloseBlocker('cellBackgroundColor', showing);
-              }}
-            />
-          </div>
-
           {column.columnType === 'datepicker' && (
             <div>
               <label data-cy={`label-date-display-format`} className="form-label">