diff --git a/src/views/master-data/instansi-page.vue b/src/views/master-data/instansi-page.vue
index 353b7c6..43c2fb8 100644
--- a/src/views/master-data/instansi-page.vue
+++ b/src/views/master-data/instansi-page.vue
@@ -8,6 +8,8 @@
           <DxDataGrid ref="currDataGrid"
             :data-source="customDataSource" 
             key-expr="id"
+            @editing-start="onEditingStart"
+            @saving="onSaving"
             :allow-column-reordering="true"
             :column-auto-width="true">
             <DxRemoteOperations :group-paging="true" />
@@ -157,8 +159,43 @@ export default {
       return {
           //jsonUrl: URL,
           customDataSource,
+          rowEdit: {
+            id: null,
+            alamat: '',
+            instansi: '',
+            isDelete: false,
+            keterangan: ''
+          },
       }
   },
+
+  methods: {
+
+    onEditingStart(e) {
+      this.rowEdit = e.data;
+    },
+
+    async onSaving(e) {
+      const isCanceled = new Promise((resolve) => {
+
+        const data = Object.assign(this.rowEdit, e.changes[0].data);
+
+        fetch(`${URL}/${data.id}`, {
+          method: 'PUT',
+          body: JSON.stringify(data),
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+          }
+        })
+        .then(() => resolve(false));
+
+        resolve(true);
+      });
+
+      e.cancel = isCanceled;
+    }
+  }
 }
 </script>