diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index ee5af1a146e..a48f497fc2c 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -26,21 +26,58 @@ import { showErrorNotification } from '../Notification';
 import { createTrigger } from './AddActions';
 import { fetchTableListBySchema } from './AddActions';
 
+import semverCheck from '../../../../helpers/semver';
+
 class AddTrigger extends Component {
   constructor(props) {
     super(props);
     this.props.dispatch(fetchTableListBySchema('public'));
-    this.state = { advancedExpanded: false };
+    this.state = {
+      advancedExpanded: false,
+      supportColumnChangeFeature: false,
+    };
   }
   componentDidMount() {
     // set defaults
     this.props.dispatch(setDefaults());
+    if (this.props.serverVersion) {
+      this.checkSemVer(this.props.serverVersion);
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.serverVersion !== this.props.serverVersion) {
+      this.checkSemVer(nextProps.serverVersion);
+    }
   }
   componentWillUnmount() {
     // set defaults
     this.props.dispatch(setDefaults());
   }
 
+  checkSemVer(version) {
+    try {
+      const supportColumnChangeFeature = semverCheck(
+        'supportColumnChangeTrigger',
+        version
+      );
+      if (supportColumnChangeFeature) {
+        this.updateSupportColumnChangeFeature(true);
+      } else {
+        this.updateSupportColumnChangeFeature(false);
+      }
+    } catch (e) {
+      this.updateSupportColumnChangeFeature(false);
+      console.error(e);
+    }
+  }
+
+  updateSupportColumnChangeFeature(val) {
+    this.setState({
+      ...this.state,
+      supportColumnChangeFeature: val,
+    });
+  }
+
   submitValidation(e) {
     // validations
     e.preventDefault();
@@ -136,6 +173,9 @@ class AddTrigger extends Component {
       internalError,
       headers,
     } = this.props;
+
+    const { supportColumnChangeFeature } = this.state;
+
     const styles = require('../TableCommon/Table.scss');
     let createBtnText = 'Create';
     if (ongoingRequest) {
@@ -216,6 +256,94 @@ class AddTrigger extends Component {
       return null;
     };
 
+    const advancedColumnSection = supportColumnChangeFeature ? (
+      <div>
+        <h4 className={styles.subheading_text}>
+          Listen columns for update &nbsp; &nbsp;
+          <OverlayTrigger
+            placement="right"
+            overlay={tooltip.advancedOperationDescription}
+          >
+            <i className="fa fa-question-circle" aria-hidden="true" />
+          </OverlayTrigger>{' '}
+        </h4>
+        {selectedOperations.update ? (
+          <div>{getColumnList('update')}</div>
+        ) : (
+          <div>
+            <div
+              className={styles.display_inline + ' ' + styles.add_mar_right}
+              style={{
+                marginTop: '10px',
+                marginBottom: '10px',
+              }}
+            >
+              Applicable to update operation only.
+            </div>
+          </div>
+        )}
+      </div>
+    ) : (
+      <div>
+        <h4 className={styles.subheading_text}>
+          Advanced - Operation/Columns &nbsp; &nbsp;
+          <OverlayTrigger
+            placement="right"
+            overlay={tooltip.advancedOperationDescription}
+          >
+            <i className="fa fa-question-circle" aria-hidden="true" />
+          </OverlayTrigger>{' '}
+        </h4>
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="insert"
+                checked={selectedOperations.insert}
+              />
+              Insert
+            </label>
+          </div>
+          {getColumnList('insert')}
+        </div>
+        <hr />
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="update"
+                checked={selectedOperations.update}
+              />
+              Update
+            </label>
+          </div>
+          {getColumnList('update')}
+        </div>
+        <hr />
+        <div>
+          <div>
+            <label>
+              <input
+                onChange={handleOperationSelection}
+                className={styles.display_inline + ' ' + styles.add_mar_right}
+                type="checkbox"
+                value="delete"
+                checked={selectedOperations.delete}
+              />
+              Delete
+            </label>
+          </div>
+          {getColumnList('delete')}
+        </div>
+      </div>
+    );
+
     const heads = headers.map((header, i) => {
       let removeIcon;
       if (i + 1 === headers.length) {
@@ -485,81 +613,7 @@ class AddTrigger extends Component {
                     styles.add_mar_top
                   }
                 >
-                  {tableName ? (
-                    <div>
-                      <h4 className={styles.subheading_text}>
-                        Advanced - Operation/Columns &nbsp; &nbsp;
-                        <OverlayTrigger
-                          placement="right"
-                          overlay={tooltip.advancedOperationDescription}
-                        >
-                          <i
-                            className="fa fa-question-circle"
-                            aria-hidden="true"
-                          />
-                        </OverlayTrigger>{' '}
-                      </h4>
-                      <div>
-                        <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="insert"
-                              checked={selectedOperations.insert}
-                            />
-                            Insert
-                          </label>
-                        </div>
-                        {getColumnList('insert')}
-                      </div>
-                      <hr />
-                      <div>
-                        <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="update"
-                              checked={selectedOperations.update}
-                            />
-                            Update
-                          </label>
-                        </div>
-                        {getColumnList('update')}
-                      </div>
-                      <hr />
-                      <div>
-                        <div>
-                          <label>
-                            <input
-                              onChange={handleOperationSelection}
-                              className={
-                                styles.display_inline +
-                                ' ' +
-                                styles.add_mar_right
-                              }
-                              type="checkbox"
-                              value="delete"
-                              checked={selectedOperations.delete}
-                            />
-                            Delete
-                          </label>
-                        </div>
-                        {getColumnList('delete')}
-                      </div>
-                    </div>
-                  ) : null}
+                  {tableName ? advancedColumnSection : null}
                   <div
                     className={styles.add_mar_bottom + ' ' + styles.add_mar_top}
                   >
@@ -652,6 +706,7 @@ const mapStateToProps = state => {
   return {
     ...state.addTrigger,
     schemaList: state.tables.schemaList,
+    serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
   };
 };
 
diff --git a/console/src/components/Services/EventTrigger/Add/Tooltips.js b/console/src/components/Services/EventTrigger/Add/Tooltips.js
index 934bc4855c3..7b5688be539 100644
--- a/console/src/components/Services/EventTrigger/Add/Tooltips.js
+++ b/console/src/components/Services/EventTrigger/Add/Tooltips.js
@@ -21,7 +21,8 @@ export const webhookUrlDescription = (
 
 export const advancedOperationDescription = (
   <Tooltip id="tooltip-advanced-operation-description">
-    Columns to be sent in the payload of webhook
+    For update triggers, webhook will be triggered only when selected columns
+    are modified
   </Tooltip>
 );
 
diff --git a/console/src/helpers/semver.js b/console/src/helpers/semver.js
index 1a3067516ed..f7894684768 100644
--- a/console/src/helpers/semver.js
+++ b/console/src/helpers/semver.js
@@ -6,6 +6,7 @@ const componentsSemver = {
   eventRedeliver: '1.0.0-alpha17',
   sqlAnalyze: '1.0.0-alpha25',
   aggregationPerm: '1.0.0-alpha26',
+  supportColumnChangeTrigger: '1.0.0-alpha26',
   analyzeApiChange: '1.0.0-alpha26',
   insertPrefix: '1.0.0-alpha26',
 };