Last row sorts to the top when updated.

[amalmohann]

When last row is updated with new values it sorts to the top of the table every time. There is no issues with other rows only the last row.

dataTable options

this.dtOptions = {
      select: false,
      autoWidth: true,
      processing: true,
      searching: true,
      ordering: false,
      order: [],
      paging: false,
      responsive: false,
      scrollY: "500px",
      scrollCollapse: true,
    }

Html

<table id="userTable" datatable [dtOptions]="dtOptions" *ngIf="users.length"
      class="table dataTable table-centered table-hover table-responsive-md cell-border table-sm ">
      <caption></caption>
      <thead class="thead-light">
        <tr>
          <th scope="col" class="th-sm">#</th>
          <th scope="col" class="th-sm">Name</th>
          <th scope="col" class="th-sm">Role</th>
          <th scope="col" class="th-sm">Email</th>
          <th scope="col" class="th-sm">Phone</th>
          <th scope="col" class="th-sm">Status</th>
          <th scope="col" class="th-sm">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr (dblclick)="openUpdateModal(i, user)" *ngFor="let user of users; let i = index;">
          <th scope="row" class="th-sm">{{i+1}}</th>
          <td> {{ user.firstName | uppercase }} {{ user.lastName | uppercase }} </td>
          <td> {{ user.role.roleDescription | uppercase }} </td>
          <td> {{ user.userName }} </td>
          <td> {{ user.countryCodeNum }} {{ user.phoneNumber }} </td>
          <td class="mr-auto" *ngIf="user.status === 'A'"><span >ACTIVE</span></td>
          <td class="mr-auto" *ngIf="user.status === 'I'"><span >INACTIVE</span></td>
          <td class="mr-auto">
            <span class="mdi-24px mdi mdi-square-edit-outline" (click)="openUpdateModal(i, user)" tooltip="Edit User"
              data-placement="top"></span>
          </td>
        </tr>
      </tbody>
    </table>

update command

updateUserAtIndex(userIndex) {
    this.commonService.viewUser(this.users[userIndex].userId).subscribe((updatedUserData: UsersDetailFetchResponse) => {
      if (updatedUserData.acknowledgement.status === "SUCCESS") {
        this.users[userIndex] = updatedUserData.userDetail[0]
      }
    }, (error: HttpErrorResponse) => {
      const config = { closeButton: true, timeOut: 2000, positionClass: "toast-top-right", extendedTimeOut: 5000 }
      this.toast.error("", "User Fetch Failed", config)
    })
  }

Expected behaviour is to update the row in the last position instead of first position.

before updating

after updating

environment

• node version: 14
• angular version: 11
• angular-cli version: 11.2.14
• jquery version: 3.3.1
• datatables version: 1.10.19
• angular-datatables version: 12.0.0

[shanmukhateja]

Hi @amalmohann

Please provide a StackBlitz link or GitHub repo to investigate this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed due to inactivity. Please feel free to re-open the issue to add new inputs.