title: Server side sorted results displayed in wrong order in Ngx-datatable
body: <p>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
  <a href="https://i.stack.imgur.com/kERjA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kERjA.png" alt="enter image description here" /></a></p>
  <p>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</p>
  <p><strong>component.ts file</strong></p>
  <pre><code>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) =&gt; {
          const makeString = `{&quot;fileData&quot;: ${res.data}}`;
          const stringDaTA = JSON.parse(makeString);
          this.fileData = [];
          stringDaTA.fileData.map((element) =&gt; {
            this.fileData.push(element);
          });
          console.log(this.fileData);
          this.fileTotalRecords = res.totalNumberOfRecords;
          if (this.fileTotalRecords &gt; 0) {
            this.formattedFileHeaders = [
              ...Object.keys(this.fileData[0]).map((key) =&gt; {
                return { headerkey: key, formattedKey: this.capitalizeKey(key) };
              }),
            ];
          }
        });
    }
  
    capitalizeKey(key: string) {
      key = key.replace(/_/g, &quot; &quot;);
      const splitKey = key.split(&quot; &quot;);
      const newKey = splitKey.map((element) =&gt; {
        return element.charAt(0).toUpperCase() + element.slice(1);
      });
      return newKey.join(&quot; &quot;);
    }
  
    checkIfNumber(value) {
      if (value &amp;&amp; isNaN(value)) {
        return value;
      } else {
        if (value % 1 !== 0) {
          return this.decimalPipe.transform(value, &quot;1.3-3&quot;);
        } else {
          return value;
        }
      }
    }
  
  </code></pre>
  <p><strong>component.html file</strong></p>
  <pre><code>&lt;div
    bsModal
    #viewModal=&quot;bs-modal&quot;
    class=&quot;modal fade siteModal&quot;
    tabindex=&quot;-1&quot;
    role=&quot;dialog&quot;
    aria-labelledby=&quot;myModalLabel&quot;
    aria-hidden=&quot;true&quot;
  &gt;
    &lt;div class=&quot;modal-dialog modal-xl&quot; role=&quot;document&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
        &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h4 class=&quot;modal-title&quot;&gt;View File&lt;/h4&gt;
          &lt;button
            type=&quot;button&quot;
            class=&quot;close&quot;
            (click)=&quot;viewModal.hide()&quot;
            aria-label=&quot;Close&quot;
          &gt;
            &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-body&quot;&gt;
          &lt;!-- Site Informationb Form --&gt;
          &lt;div class=&quot;card card-form&quot;&gt;
            &lt;div
              class=&quot;card card-accent-primary card-search-results&quot;
              *ngIf=&quot;fileData &amp;&amp; fileData.length &gt; 0&quot;
            &gt;
              &lt;div class=&quot;pagination-title-wraper&quot;&gt;
                &lt;div class=&quot;pagination-holder&quot; *ngIf=&quot;fileTotalRecords &gt; 0&quot;&gt;
                  &lt;strong&gt;Showing&lt;/strong&gt; &lt;span&gt;{{ calculatePageFile() }}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;ngx-datatable
                  *ngIf=&quot;fileTotalRecords &gt; 0&quot;
                  #fileTable
                  class=&quot;material&quot;
                  [rows]=&quot;fileData&quot;
                  [columnMode]=&quot;'force'&quot;
                  [virtualization]=&quot;false&quot;
                  [headerHeight]=&quot;60&quot;
                  [scrollbarH]=&quot;true&quot;
                  [footerHeight]=&quot;50&quot;
                  [count]=&quot;fileTotalRecords&quot;
                  [offset]=&quot;sortPaginationFile.pageNumber - 1&quot;
                  [limit]=&quot;sortPaginationFile.pageSize&quot;
                  [externalPaging]=&quot;true&quot;
                  [externalSorting]=&quot;true&quot;
                  (page)=&quot;setPageFile($event)&quot;
                  (sort)=&quot;onSortFile($event)&quot;
                &gt;
                  &lt;ngx-datatable-column
                    *ngFor=&quot;let header of formattedFileHeaders&quot;
                    [width]=&quot;190&quot;
                    [name]=&quot;header.formattedKey&quot;
                    [prop]=&quot;header.headerkey&quot;
                    [sortable]=&quot;true&quot;
                  &gt;
                    &lt;ng-template
                      let-row=&quot;row&quot;
                      let-rowIndex=&quot;rowIndex&quot;
                      ngx-datatable-cell-template
                    &gt;
                      {{ checkIfNumber(row[header.headerkey]) }}
                    &lt;/ng-template&gt;
                  &lt;/ngx-datatable-column&gt;
                  &lt;ngx-datatable-footer&gt;
                    &lt;ng-template
                      ngx-datatable-footer-template
                      let-rowCount=&quot;rowCount&quot;
                      let-pageSize=&quot;pageSize&quot;
                      let-selectedCount=&quot;selectedCount&quot;
                      let-curPage=&quot;curPage&quot;
                      let-offset=&quot;offset&quot;
                    &gt;
                      &lt;div class=&quot;pagination-showing&quot;&gt;
                        &lt;span&gt;Show&lt;/span&gt;
                        &lt;div class=&quot;select-wrapper&quot;&gt;
                          &lt;select
                            class=&quot;form-control&quot;
                            [(ngModel)]=&quot;sortPaginationFile.pageSize&quot;
                            (change)=&quot;changeFilePageSize($event.target.value)&quot;
                          &gt;
                            &lt;option value=&quot;5&quot;&gt;5&lt;/option&gt;
                            &lt;option value=&quot;10&quot;&gt;10&lt;/option&gt;
                            &lt;option value=&quot;20&quot;&gt;20&lt;/option&gt;
                            &lt;option value=&quot;50&quot;&gt;50&lt;/option&gt;
                            &lt;option value=&quot;100&quot;&gt;100&lt;/option&gt;
                          &lt;/select&gt;
                        &lt;/div&gt;
                        &lt;span&gt;Per Page&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;datatable-pager
                        [pagerLeftArrowIcon]=&quot;'datatable-icon-left'&quot;
                        [pagerRightArrowIcon]=&quot;'datatable-icon-right'&quot;
                        [pagerPreviousIcon]=&quot;'datatable-icon-prev'&quot;
                        [pagerNextIcon]=&quot;'datatable-icon-skip'&quot;
                        [page]=&quot;curPage&quot;
                        [size]=&quot;pageSize&quot;
                        [count]=&quot;rowCount&quot;
                        [hidden]=&quot;!(rowCount / pageSize &gt; 1)&quot;
                        (change)=&quot;fileTable.onFooterPage($event)&quot;
                      &gt;
                      &lt;/datatable-pager&gt;
                    &lt;/ng-template&gt;
                  &lt;/ngx-datatable-footer&gt;
                &lt;/ngx-datatable&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button
            type=&quot;button&quot;
            class=&quot;btn btn-transparent btn-rounded&quot;
            (click)=&quot;viewModal.hide()&quot;
          &gt;
            Close
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>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</p>
  <p><a href="https://i.stack.imgur.com/97RnL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/97RnL.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/CduRe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CduRe.png" alt="enter image description here" /></a></p>
  <p>Although I get the correct result from db and i store the exact result after parsing in <strong>this.fileData</strong> and these are the correct dates order I get, but somehow, the result is not displayed as is it in the table.</p>
  <p><a href="https://i.stack.imgur.com/cofaA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cofaA.png" alt="enter image description here" /></a></p>
  <p>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.</p>