Server side sorted results displayed in wrong order in Ngx-datatable

Question

I have used ngx-datatable in my project and have implemented server-side sorting and pagination. I have implemented this logic everywhere and its working completely fine. But i am facing an issue in just one component. I have a table and theres a view button in every record

When I click on the view button, it will open a modal which is going to display random json data in the table. I dont know the columns so i am getting the columns dynamically in the below code

component.ts file

showFile(row) {
    this.viewModal.show();
    this.selectedFileName = { ...row };
    this.sortPaginationFile = new SortPagination();
    this.formattedFileHeaders = [];
    this.fileData = [];
    this.getFileData(this.sortPaginationFile);
  }

  getFileData(sortPaginationFile: SortPagination) {
    const filter = new DataCatalogueFileFilter(
      this.selectedFileName.tableName,
      this.selectedFileName.tableFilter
    );

    this.dataCatalogueService
      .getDataCatalogueFile(filter, sortPaginationFile)
      .subscribe((res: any) => {
        const makeString = `{"fileData": ${res.data}}`;
        const stringDaTA = JSON.parse(makeString);
        this.fileData = [];
        stringDaTA.fileData.map((element) => {
          this.fileData.push(element);
        });
        console.log(this.fileData);
        this.fileTotalRecords = res.totalNumberOfRecords;
        if (this.fileTotalRecords > 0) {
          this.formattedFileHeaders = [
            ...Object.keys(this.fileData[0]).map((key) => {
              return { headerkey: key, formattedKey: this.capitalizeKey(key) };
            }),
          ];
        }
      });
  }

  capitalizeKey(key: string) {
    key = key.replace(/_/g, " ");
    const splitKey = key.split(" ");
    const newKey = splitKey.map((element) => {
      return element.charAt(0).toUpperCase() + element.slice(1);
    });
    return newKey.join(" ");
  }

  checkIfNumber(value) {
    if (value && isNaN(value)) {
      return value;
    } else {
      if (value % 1 !== 0) {
        return this.decimalPipe.transform(value, "1.3-3");
      } else {
        return value;
      }
    }
  }

component.html file

<div
  bsModal
  #viewModal="bs-modal"
  class="modal fade siteModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">View File</h4>
        <button
          type="button"
          class="close"
          (click)="viewModal.hide()"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Site Informationb Form -->
        <div class="card card-form">
          <div
            class="card card-accent-primary card-search-results"
            *ngIf="fileData && fileData.length > 0"
          >
            <div class="pagination-title-wraper">
              <div class="pagination-holder" *ngIf="fileTotalRecords > 0">
                <strong>Showing</strong> <span>{{ calculatePageFile() }}</span>
              </div>
            </div>
            <div class="card-body">
              <ngx-datatable
                *ngIf="fileTotalRecords > 0"
                #fileTable
                class="material"
                [rows]="fileData"
                [columnMode]="'force'"
                [virtualization]="false"
                [headerHeight]="60"
                [scrollbarH]="true"
                [footerHeight]="50"
                [count]="fileTotalRecords"
                [offset]="sortPaginationFile.pageNumber - 1"
                [limit]="sortPaginationFile.pageSize"
                [externalPaging]="true"
                [externalSorting]="true"
                (page)="setPageFile($event)"
                (sort)="onSortFile($event)"
              >
                <ngx-datatable-column
                  *ngFor="let header of formattedFileHeaders"
                  [width]="190"
                  [name]="header.formattedKey"
                  [prop]="header.headerkey"
                  [sortable]="true"
                >
                  <ng-template
                    let-row="row"
                    let-rowIndex="rowIndex"
                    ngx-datatable-cell-template
                  >
                    {{ checkIfNumber(row[header.headerkey]) }}
                  </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-footer>
                  <ng-template
                    ngx-datatable-footer-template
                    let-rowCount="rowCount"
                    let-pageSize="pageSize"
                    let-selectedCount="selectedCount"
                    let-curPage="curPage"
                    let-offset="offset"
                  >
                    <div class="pagination-showing">
                      <span>Show</span>
                      <div class="select-wrapper">
                        <select
                          class="form-control"
                          [(ngModel)]="sortPaginationFile.pageSize"
                          (change)="changeFilePageSize($event.target.value)"
                        >
                          <option value="5">5</option>
                          <option value="10">10</option>
                          <option value="20">20</option>
                          <option value="50">50</option>
                          <option value="100">100</option>
                        </select>
                      </div>
                      <span>Per Page</span>
                    </div>

                    <datatable-pager
                      [pagerLeftArrowIcon]="'datatable-icon-left'"
                      [pagerRightArrowIcon]="'datatable-icon-right'"
                      [pagerPreviousIcon]="'datatable-icon-prev'"
                      [pagerNextIcon]="'datatable-icon-skip'"
                      [page]="curPage"
                      [size]="pageSize"
                      [count]="rowCount"
                      [hidden]="!(rowCount / pageSize > 1)"
                      (change)="fileTable.onFooterPage($event)"
                    >
                    </datatable-pager>
                  </ng-template>
                </ngx-datatable-footer>
              </ngx-datatable>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-transparent btn-rounded"
          (click)="viewModal.hide()"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Now the problem I am facing is, that when I click on End date column for descending order sorting like below, it sorts perfectly fine until I reach page 7

Although I get the correct result from db and i store the exact result after parsing in this.fileData and these are the correct dates order I get, but somehow, the result is not displayed as is it in the table.

I dont know what the issue is, I have trying for the past 3 days to solve it. Please if anyone could help out, it would be really appreciated.

Answer 1

Try to add this in onSortFile() function:

this.fileTable.bodyComponent.updateOffsetY(this.sortPaginationFile.pageNumber - 1);
this.fileTable.offset =  this.sortPaginationFile.pageNumber - 1;