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.

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.