Angular - Order by Table Header


Topic: Angular - Order by Table Header

tkitv pro asked 6 years ago

Hi

How can I sort a table by headers? What I tried:

<table mdbTable  class="table table-striped table-sm ">
  <thead>
<tr>
  <th scope="col">
    <div class="form-check">
      <input
        class="form-check-input"
        [disabled]="(PrintJob$ | async).StateId == 7"
        MdbInputDirective
        [ngModel]="selectAll"
        type="checkbox"
        id="selectAllChckbx"
        (ngModelChange)="selectAllA($event)"
      />
      <label class="form-check-label" for="selectAllChckbx"></label>
    </div>
  </th>      
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[0]" i18n="@@DocumentDate">Document Date  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[1]" i18n="@@DocumentType">Document Type  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[2]" i18n="@@PageNumber">Pages  <mdb-icon fas icon="sort"></mdb-icon></th>
  <th scope="col" [mdbTableSort]="(PrintJob$ | async).HoldmailDocumentDtos" [sortBy]="headElements[3]" i18n="@@AccountNumber">Account/Deposit Nr.  <mdb-icon fas icon="sort"></mdb-icon></th>
</tr>
  </thead>
  <tbody>
<tr
  *ngFor="
    let result of ((PrintJob$ | async).HoldmailDocumentDtos
      | dokartFilter: DokartFilter
      | paginate: { itemsPerPage: 10, currentPage: p });
    let i = index
  "
>
  <td style="width: 10%" scope="row">
    <div class="form-check">
      <input
        class="form-check-input"
        [disabled]="(PrintJob$ | async).StateId == 7"
        MdbInputDirective
        [ngModel]="isSelected(result)"
        type="checkbox"
        id="checkbox{{ i }}"
        (ngModelChange)="updateChecked(result, $event)"
      />
      <label class="form-check-label" for="checkbox{{ i }}"></label>
    </div>
  </td>
      <td style="width: 25%">{{ result.Erstelldatum | date }}</td>
      <td style="width: 35%">{{ result.Titel }}</td>
      <td style="width: 10%">{{ result.Seitenzahl }}</td>
      <td style="width: 25%">{{ result.KontoDepotNr }}</td>
    </tr>
  </tbody>
</table>

Thanks


tkitv pro answered 6 years ago

The problem is that, contrary to the docs, the sorting does not work with uppercase letters. This actually got reported to you several weeks ago in this thread: https://mdbootstrap.com/support/angular/mdbootstrap-table-sort-issue-with-headers-different-than-property-names/

Doesn't seem to be fixed in v 7.4.0.


Damian Gemza staff answered 6 years ago

Dear tkitv,

Please check our table example with sorting.

But please notice, that the elements which your render with the *ngFor have to be same like in the array which is passed to the [sortBy] input.

So if your data array looks like below:

arr = ['one', 'two', 'three', 'four']

Your sortBy array should contain identical items like the data array.

Best Regards,

Damian


Damian Gemza staff answered 6 years ago

Dear tkitv,

Could you please provide me with the simple reproduction example which shows your problem?

I can't reproduce it from your first code, because there's some logic which you have not provided.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: thinkpad
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: No
Tags