In a editable table, entered data will disappear after edit mode ends

Summary

In a editable table, entered data will disappear after edit mode ends

Content

Hello,

I am trying to implement the editable table and save the edited rows to business object on click of save button,
but the newly entered data will disappear once the edit mode ends and it shows up the previous data. Please help.
below is the code

<oj-table summary="Sample Table" scroll-policy="loadMoreOnScroll" id="oj-table--210482907-1"
    class="oj-flex-item oj-sm-12 oj-md-10" data="{{ $page.variables.departmentListADP }}"
    columns='[{"headerText":"id","field":"id","template": "deptIdTemplate"},{"headerText":"departmentName","field":"departmentName","template": "deptNameTemplate"},{"headerText":"managerId","field":"managerId","template": "mgIdTemplate"},{"headerText":"locationId","field":"locationId","template": "locIdTemplate"}]'