Table header sort icon is not changing


Topic: Table header sort icon is not changing

Ravindra Kumar Kolla asked 10 months 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.)


Arkadiusz Idzikowski staff answered 10 months 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.


Bartosz Termena staff answered 10 months 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.3.1
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags