diff --git a/web/pgadmin/static/js/SchemaView/DataGridView.jsx b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
index d1e1cde82..16128c0a2 100644
--- a/web/pgadmin/static/js/SchemaView/DataGridView.jsx
+++ b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
@@ -28,9 +28,7 @@ import FormView from './FormView';
 import { confirmDeleteRow } from '../helpers/legacyConnector';
 import CustomPropTypes from 'sources/custom_prop_types';
 import { evalFunc } from 'sources/utils';
-import { useOnScreen } from '../custom_hooks';
 import { DepListenerContext } from './DepListener';
-import { getSchemaRow } from '../utils';
 
 const useStyles = makeStyles((theme)=>({
   grid: {
@@ -219,7 +217,7 @@ export default function DataGridView({
               onClick={()=>{
                 row.toggleRowExpanded(!row.isExpanded);
               }} disabled={!canEditRow}
-            />
+            />;
           }
         };
         colInfo.Cell.displayName = 'Cell',
@@ -420,9 +418,21 @@ DataGridView.propTypes = {
   dataDispatch: PropTypes.func.isRequired,
   containerClassName: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   columns: PropTypes.array,
-  canEdit: PropTypes.bool,
-  canAdd: PropTypes.bool,
-  canDelete: PropTypes.bool,
+  canEdit: PropTypes.oneOfType([
+    PropTypes.bool, PropTypes.func,
+  ]),
+  canAdd: PropTypes.oneOfType([
+    PropTypes.bool, PropTypes.func,
+  ]),
+  canDelete: PropTypes.oneOfType([
+    PropTypes.bool, PropTypes.func,
+  ]),
+  canEditRow: PropTypes.oneOfType([
+    PropTypes.bool, PropTypes.func,
+  ]),
+  canDeleteRow: PropTypes.oneOfType([
+    PropTypes.bool, PropTypes.func,
+  ]),
   customDeleteTitle: PropTypes.string,
   customDeleteMsg: PropTypes.string,
 };
diff --git a/web/pgadmin/static/js/SchemaView/DepListener.js b/web/pgadmin/static/js/SchemaView/DepListener.js
index 13ad9c302..3b2c8de6a 100644
--- a/web/pgadmin/static/js/SchemaView/DepListener.js
+++ b/web/pgadmin/static/js/SchemaView/DepListener.js
@@ -26,7 +26,7 @@ export default class DepListener {
     if(dataPath.length > 0) {
       data = _.get(state, dataPath);
     }
-    data = _.assign(data, listener.callback && listener.callback(data, listener.source, state, actionObj) || {});
+    _.assign(data, listener.callback && listener.callback(data, listener.source, state, actionObj) || {});
     return state;
   }
 
diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx
index c9891c6cf..b1c8e7c79 100644
--- a/web/pgadmin/static/js/SchemaView/FormView.jsx
+++ b/web/pgadmin/static/js/SchemaView/FormView.jsx
@@ -72,8 +72,8 @@ SQLTab.propTypes = {
 
 /* The first component of schema view form */
 export default function FormView({
-    value, formErr, schema={}, viewHelperProps, isNested=false, accessPath, dataDispatch, hasSQLTab,
-    getSQLValue, onTabChange, firstEleRef, className, isDataGridForm=false}) {
+  value, formErr, schema={}, viewHelperProps, isNested=false, accessPath, dataDispatch, hasSQLTab,
+  getSQLValue, onTabChange, firstEleRef, className, isDataGridForm=false}) {
   let defaultTab = 'General';
   let tabs = {};
   let tabsClassname = {};
@@ -281,7 +281,7 @@ export default function FormView({
         {Object.keys(tabs).map((tabName, i)=>{
           return (
             <TabPanel key={tabName} value={tabValue} index={i} classNameRoot={clsx(tabsClassname[tabName], isNested ? classes.nestedTabPanel : null)}
-                className={tabName != sqlTabName ? classes.nestedControl : null}>
+              className={tabName != sqlTabName ? classes.nestedControl : null}>
               {tabs[tabName]}
             </TabPanel>
           );
@@ -296,6 +296,7 @@ FormView.propTypes = {
   schema: CustomPropTypes.schemaUI.isRequired,
   viewHelperProps: PropTypes.object,
   isNested: PropTypes.bool,
+  isDataGridForm: PropTypes.bool,
   accessPath: PropTypes.array.isRequired,
   dataDispatch: PropTypes.func,
   hasSQLTab: PropTypes.bool,
diff --git a/web/pgadmin/static/js/SchemaView/base_schema.ui.js b/web/pgadmin/static/js/SchemaView/base_schema.ui.js
index b8aa7cbea..4521b6329 100644
--- a/web/pgadmin/static/js/SchemaView/base_schema.ui.js
+++ b/web/pgadmin/static/js/SchemaView/base_schema.ui.js
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import _ from "lodash";
+import _ from 'lodash';
 
 /* This is the base schema class for SchemaView.
  * A UI schema must inherit this to use SchemaView for UI.
diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx
index cb7ba49bc..d221fcd97 100644
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/web/pgadmin/static/js/SchemaView/index.jsx
@@ -237,7 +237,7 @@ const getDepChange = (currPath, newState, oldState, action)=>{
     });
   }
   return newState;
-}
+};
 
 const getDeferredDepChange = (currPath, newState, oldState, action)=>{
   if(action.deferredDepChange) {
@@ -248,9 +248,9 @@ const getDeferredDepChange = (currPath, newState, oldState, action)=>{
       depChange: action.depChange,
       oldState: _.cloneDeep(oldState),
     });
-    return deferredPromiseList
+    return deferredPromiseList;
   }
-}
+};
 
 /* The main function which manipulates the session state based on actions */
 /*
@@ -271,7 +271,7 @@ The state starts with path []
 */
 const sessDataReducer = (state, action)=>{
   let data = _.cloneDeep(state);
-  let rows, cid;
+  let rows, cid, deferredList;
   data.__deferred__ = data.__deferred__ || [];
   switch(action.type) {
   case SCHEMA_STATE_ACTIONS.INIT:
@@ -281,7 +281,7 @@ const sessDataReducer = (state, action)=>{
     _.set(data, action.path, action.value);
     /* If there is any dep listeners get the changes */
     data = getDepChange(action.path, data, state, action);
-    let deferredList = getDeferredDepChange(action.path, data, state, action);
+    deferredList = getDeferredDepChange(action.path, data, state, action);
     // let deferredInfo = getDeferredDepChange(action.path, data, state, action);
     data.__deferred__ = deferredList || [];
     break;
@@ -354,7 +354,6 @@ function SchemaDialogView({
   const [formErr, setFormErr] = useState({});
   const [loaderText, setLoaderText] = useState('');
   const [saving, setSaving] = useState(false);
-  const [sqlTabActive, setSqlTabActive] = useState(false);
   const [formReady, setFormReady] = useState(false);
   const firstEleRef = useRef();
   const isNew = schema.isNew(schema.origData);
@@ -550,8 +549,7 @@ function SchemaDialogView({
           <Loader message={loaderText}/>
           <FormView value={sessData} viewHelperProps={viewHelperProps} formErr={formErr}
             schema={schema} accessPath={[]} dataDispatch={sessDispatchWithListener}
-            hasSQLTab={props.hasSQL} getSQLValue={getSQLValue} onTabChange={(i, tabName, sqlActive)=>setSqlTabActive(sqlActive)}
-            firstEleRef={firstEleRef} />
+            hasSQLTab={props.hasSQL} getSQLValue={getSQLValue} firstEleRef={firstEleRef} />
           <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={formErr.message}
             onClose={onErrClose} />
         </Box>
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 73ffdca46..f1a97ff8b 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -822,6 +822,7 @@ const useStylesFormFooter = makeStyles((theme)=>({
     bottom: 0,
     left: 0,
     right: 0,
+    zIndex: 10,
   },
   container: {
     borderWidth: '1px',