diff --git a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
index 507a15a550..85a06ab7ee 100644
--- a/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
+++ b/frontend/src/Editor/CodeEditor/MultiLineCodeEditor.jsx
@@ -41,6 +41,7 @@ const MultiLineCodeEditor = (props) => {
     portalProps,
     showPreview,
     paramLabel = '',
+    delayOnChange = true, // Added this prop to immediately update the onBlurUpdate callback
   } = props;
 
   const [currentValue, setCurrentValue] = React.useState(() => initialValue);
@@ -63,6 +64,7 @@ const MultiLineCodeEditor = (props) => {
   }, []);
 
   const handleOnBlur = () => {
+    if (!delayOnChange) return onChange(currentValue);
     setTimeout(() => {
       onChange(currentValue);
     }, 100);
diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index 4e22434773..88917301ca 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -425,21 +425,31 @@ class TableComponent extends React.Component {
     ...draggableStyle,
   });
 
-  removeColumn = (index, ref) => {
-    const columns = this.props.component.component.definition.properties.columns;
-    const newValue = columns.value;
-    const removedColumns = newValue.splice(index, 1);
-    this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
+  removeColumn = async (index, ref) => {
+    try {
+      const columns = this.props.component.component.definition.properties.columns;
+      const newValue = columns.value;
+      const removedColumns = newValue.splice(index, 1);
+      await this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties', true);
 
-    const existingcolumnDeletionHistory =
-      this.props.component.component.definition.properties.columnDeletionHistory?.value ?? [];
-    const newcolumnDeletionHistory = [
-      ...existingcolumnDeletionHistory,
-      ...removedColumns.map((column) => column.key || column.name),
-    ];
-    this.props.paramUpdated({ name: 'columnDeletionHistory' }, 'value', newcolumnDeletionHistory, 'properties', true);
+      const existingColumnDeletionHistory =
+        this.props.component.component.definition.properties.columnDeletionHistory?.value ?? [];
+      const newColumnDeletionHistory = [
+        ...existingColumnDeletionHistory,
+        ...removedColumns.map((column) => column.key || column.name),
+      ];
+      await this.props.paramUpdated(
+        { name: 'columnDeletionHistory' },
+        'value',
+        newColumnDeletionHistory,
+        'properties',
+        true
+      );
 
-    this.deleteEvents(ref, 'table_column');
+      await this.deleteEvents(ref, 'table_column');
+    } catch (error) {
+      console.error('Error updating column:', error);
+    }
   };
 
   reorderColumns = (startIndex, endIndex) => {
diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
index b2872ec204..70113ef7fd 100644
--- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
@@ -218,6 +218,7 @@ return data.filter(row => row.amount > 1000);
               cyLabel={'transformation-input'}
               callgpt={noop}
               isCopilotEnabled={false}
+              delayOnChange={false}
             />
           </div>
         )}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
index 5eb8f7a6d5..da23214ce1 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runjs/Runjs.jsx
@@ -36,6 +36,7 @@ const Runjs = (props) => {
         }}
         componentName="Runjs"
         cyLabel={`runjs`}
+        delayOnChange={false}
       />
     </Card>
   );
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
index 563c1fe812..b3f8304b16 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Runpy.jsx
@@ -26,6 +26,7 @@ export class Runpy extends React.Component {
           onChange={(value) => changeOption(this, 'code', value)}
           componentName="Runpy"
           cyLabel={`runpy`}
+          delayOnChange={false}
         />
       </div>
     );
diff --git a/frontend/src/Editor/SubContainer.jsx b/frontend/src/Editor/SubContainer.jsx
index 0c99b9291a..2a2bec4ec9 100644
--- a/frontend/src/Editor/SubContainer.jsx
+++ b/frontend/src/Editor/SubContainer.jsx
@@ -80,7 +80,7 @@ export const SubContainer = ({
       setContainerCanvasWidth(canvasWidth);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parentRef, getContainerCanvasWidth(), listmode]);
+  }, [parentRef, getContainerCanvasWidth(), listmode, parentComponent?.definition?.properties?.size?.value]); // Listen for changes to the modal size and update the subcontainer state with the new grid width.
 
   zoomLevel = zoomLevel || 1;
 
diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx
index 13971b9735..b8f6ef91f3 100644
--- a/frontend/src/_components/DynamicForm.jsx
+++ b/frontend/src/_components/DynamicForm.jsx
@@ -339,6 +339,7 @@ const DynamicForm = ({
           width,
           componentName: queryName ? `${queryName}::${key ?? ''}` : null,
           cyLabel: key ? `${String(key).toLocaleLowerCase().replace(/\s+/g, '-')}` : '',
+          delayOnChange: false,
         };
       case 'react-component-openapi-validator':
         return {
diff --git a/frontend/src/_stores/utils.js b/frontend/src/_stores/utils.js
index 53aa4c0052..6239d752d8 100644
--- a/frontend/src/_stores/utils.js
+++ b/frontend/src/_stores/utils.js
@@ -264,7 +264,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => {
 
           if (doesActionsExist || doesColumnsExist) {
             const actions = _.toArray(metaDiff.definition[attribute]?.actions?.value) || [];
-            const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || [];
+            // const columns = _.toArray(metaDiff.definition[attribute]?.columns?.value) || [];
 
             metaDiff.definition = {
               ...metaDiff.definition,
@@ -274,7 +274,7 @@ const computeComponentDiff = (appDiff, currentPageId, opts, currentLayout) => {
                   value: actions,
                 },
                 columns: {
-                  value: columns,
+                  value: component.component?.definition?.properties?.columns?.value,
                 },
               },
             };