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, , 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:


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


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 });


.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.


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



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