Editable Table - Updating the ADP Removes the Row

Summary:

Hi,

I am following this blog to create an editable table:

I have followed every step properly but whenever I try to update a row, the row simply disappears from the table.

This is how I have created the table:

 <oj-table scroll-policy="loadMoreOnScroll" class="oj-flex-item oj-sm-flex-initial" data="[[ $variables.tableADP ]]"
    columns='[{"headerText":"id","field":"id"},{"headerText":"name","field":"name","template":"name"},{"headerText":"salary","field":"salary","template":"salary"}]'
    edit-mode="rowEdit" on-oj-before-row-edit="[[$listeners.tableBeforeRowEdit]]"
    on-oj-before-row-edit-end="[[$listeners.tableBeforeRowEditEnd]]">
    <template slot="name">
      <oj-bind-if test='[[ $current.mode == "navigation" ]]'>
      <oj-input-text value="[[$current.data]]" readonly="true"></oj-input-text>
      </oj-bind-if>
      <oj-bind-if test='[[ $current.mode == "edit" ]]'>
         <oj-input-text value="[[ $variables.currentRow.name ]]"></oj-input-text>
      </oj-bind-if>
    </template>
    <template slot="salary">
      <oj-bind-if test='[[ $current.mode == "navigation" ]]'>
      <oj-input-number value='[[typeof $current.data === "number" ? $current.data : null]]' readonly="true"
        style="text-align: right;"></oj-input-number>
      </oj-bind-if>
      <oj-bind-if test='[[ $current.mode == "edit" ]]'>
         <oj-input-number value='[[typeof $variables.currentRow.salary === "number"