Topic: Table header sort icon is not changing

Ravindra Kumar Kolla free asked 3 years ago


Expected behavior Hi as shown in the example link, https://ng-demo.mdbootstrap.com/tables/sort , the sort icon in the table header is not changing when i sort on a particular column. Please let me know if i have to write this code on my own. Would be great if any pointers are provided for the same. Actual behavior The sort icon next to header label should change based on the column clicked. Resources (screenshots, code snippets etc.)


Bartosz Termena staff answered 3 years ago


Dear @Ravindra Kumar Kolla To add sorting icons, try this code:

HTML

<table id="tableSortExample" mdbTable class="z-depth-1">
  <thead>
    <tr>
      <th
        *ngFor="let head of headElements; let i = index"
        aria-controls="tableSortExample"
        scope="col"
        [mdbTableSort]="elements"
        [sortBy]="head.name"
        (click)="head.toggle = !head.toggle; sortingElement = head.name"
        [ngClass]="{ highlighted: sortingElement === head.name }"
      >
        {{ head.name | titlecase }}
        <mdb-icon
          *ngIf="!head.toggle && sortingElement === head.name"
          fas
          icon="sort-down"
        ></mdb-icon>
        <mdb-icon *ngIf="head.toggle && sortingElement === head.name" fas icon="sort-up"></mdb-icon>
        <mdb-icon *ngIf="sortingElement !== head.name" fas icon="sort"></mdb-icon>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let el of elements; let i = index">
      <th scope="row">{{ el.id }}</th>
      <td>{{ el.first }}</td>
      <td>{{ el.last }}</td>
      <td>{{ el.handle }}</td>
    </tr>
  </tbody>
</table>

TS

elements: any = [];
  headElements = [
    { name: 'id', toggle: false },
    { name: 'first', toggle: false },
    { name: 'last', toggle: false },
    { name: 'handle', toggle: false },
  ];
  toggle = false;
  sortingElement = '';
  ngOnInit() {
    for (let i = 1; i <= 9; i++) {
      this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
    }
  }

styles.scss

.highlighted {
  background-color: #33b5e5;
}
th {
  cursor: pointer;
} 

Hope it helps!

Best Regards, Bartosz.


Arkadiusz Idzikowski staff answered 3 years ago


In current version there is no animation for the arrow in table sort. Thank you for letting us know about this problem, we will fix that as soon as possible.



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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes