table-sm not working (nor [sm]=true)

Expected behavior Basically my rows height are way too big for me. I want them to be smaller.

Actual behavior I tried to use table-sm and [sm]="true" on my table with no success. Rows height is still same.https://i.gyazo.com/1edfadde7bde76b212e54bffc6d090f0.png

Resources (screenshots, code snippets etc.)

<div class="datatable">
  <table class="table table-bordered datatable-table table-sm" mdbTable #table="mdbTable" mdbTableSort #sort="mdbTableSort"
    (sortChange)="onSortChange($event)" [dataSource]="(dataSource$ | async)!" striped="true">
    <thead class="datatable-header">
      <tr>
        <th *ngFor="let header of displayedColumns" scope="col" [mdbTableSortHeader]="header.key">
          {{ header.label.text | titlecase }}
        </th>
        <th>
          Actions
        </th>
      </tr>
    </thead>
    <tbody class="datatable-body" *ngIf="!loading">
      <tr *ngFor="let data of table.data" scope="row" [class.active]="selections.has(data)">
            <!-- rows here -->
      </tr>
    </tbody>
  </table>
</div>