Table header sort icon is not changing

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.

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.