<div class="datatable mt-4">
    <table class="table datatable-table" mdbTable mdbTableSort #table="mdbTable" #sort="mdbTableSort"
      [dataSource]="teamStandingsFormatted" [responsive]="true" [pagination]="pagination" [sort]="sort">
      <thead class="datatable-header">
        <tr>
          <th *ngFor="let header of headers" [mdbTableSortHeader]="header" scope="col">
            {{ header | titlecase }}
          </th>
        </tr>
      </thead>
      <tbody *ngIf="teamsFormatted" class="datatable-body">
        <tr *ngFor="let data of table.data" scope="row">
          <th *ngIf="2 >= data.rank">
            <angular-emojis *ngIf="data.rank == 0" [name]="'first_place_medal'" size="20">
            </angular-emojis>
            <angular-emojis *ngIf="data.rank == 1" [name]="'second_place_medal'" size="20">
            </angular-emojis>
            <angular-emojis *ngIf="data.rank == 2" [name]="'third_place_medal'" size="20">
            </angular-emojis>
          </th>
          <th *ngIf="data.rank >= 3" scope="row">{{data.rank + 1}}</th>
          <td>{{data.teamName}}&nbsp;&nbsp;<i class="flag flag-{{data.countryCode}}" title="{{data.country}}"
              data-mdb-toggle="tooltip"></i></td>
          <td>{{data.numberOfRiders}}</td>
          <td>{{(data.totalKm/1000).toFixed(2)}}</td>
        </tr>
      </tbody>
    </table>
    <mdb-table-pagination #pagination></mdb-table-pagination>
  </div>
  <div *ngIf="hasChallenge && !teamsFormatted">
    <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div *ngIf="!hasChallenge">
    <div class="alert alert-danger text-center" role="alert">
      <span>The are no active challenges at this time.</span>
    </div>
  </div>
</div>
<div class="tab-pane fade table-responsive custom-table-height" id="leaderboard-tabs-2" role="tabpanel"
  aria-labelledby="leaderboard-tab-2">
  <div class="datatable mt-4">
    <table class="table datatable-table" mdbTable mdbTableSort #table1="mdbTable" #sort="mdbTableSort"
      [dataSource]="individualStandings" [responsive]="true" [pagination]="pagination" [sort]="sort">
      <thead class="datatable-header">
        <tr>
          <th scope="col">Rank</th>
          <th [mdbTableSortHeader]="'First Name'" scope="col">Name</th>
          <th [mdbTableSortHeader]="'Team Name'" scope="col">Team Name</th>
          <th [mdbTableSortHeader]="'totalMeters'" scope="col">Total Distance (KM)</th>
        </tr>
      </thead>
      <tbody *ngIf="individualStandings" class="datatable-body">
        <tr *ngFor="let data of table1.data" scope="row">
          <td>1</td>

          <td>{{data.firstName + " " + data.lastName}}</td>
          <td *ngIf="data.teamName">{{data.teamName}}</td>
          <td *ngIf="!data.teamName">No team selected</td>
          <td>{{(data.totalMeters/1000).toFixed(2)}}</td>
        </tr>
      </tbody>
    </table>
    <mdb-table-pagination #pagination></mdb-table-pagination>
  </div>

You can do this by setting the column title and passing the appropriate parameter to mdbTableSortHeader

TS:

  dataSource = [
    {
      name: 'Tiger Nixon',
      position: 'System Architect',
    },
    {
      name: 'Sonya Frost',
      position: 'Software Engineer',
    }
  ]

HTML:

<div class="datatable mt-4">
  <table
    class="table datatable-table"
    mdbTable
    mdbTableSort
    #table="mdbTable"
    #sort="mdbTableSort"
    [dataSource]="dataSource"
    [pagination]="pagination"
    [sort]="sort"
  >
    <thead class="datatable-header">
      <tr>
        <th [mdbTableSortHeader]="'name'" scope="col">
          Full Name
        </th>
        <th [mdbTableSortHeader]="'position'" scope="col">
          Position
        </th>
      </tr>
    </thead>
    <tbody class="datatable-body">
      <tr *ngFor="let data of table.data" scope="row">
        <td>{{ data.name }}</td>
        <td>{{ data.position }}</td>
      </tr>
    </tbody>
  </table>
  <mdb-table-pagination #pagination></mdb-table-pagination>
</div>