Угловой материал: как применить сортировку для таблицы с несколькими значениями в каждой ячейке

Question

Я использую материал Angular для создания таблицы, столбцы которой содержат значение нескольких свойств из [dataSource]. Я хочу сделать сортировку для каждого свойства в столбцах. Если щелкнуть стрелку, соответствующую свойству столбца, таблица будет отсортирована сразу же после этого свойства. Но в настоящее время это невозможно со мной. Я исследовал MatSort, но, похоже, это не поддерживает мой случай.

Таблица выглядит так:

Снимок таблицы изображений

В первом столбце видно, что отображается 2 объекта: "Аренда" и "Плата за управление". Когда я нажимаю на стрелку сортировки в левой части "Прокат", таблица сортируется после "Прокат". Когда я нажимаю "Плата за управление", таблица сортируется по "Плата за управление", то же самое для других столбцов.

Для одного столбца: я сделал так:

<ng-container matColumnDef="fee">
          <th *matHeaderCellDef mat-header-cell>
            <div class="table-row-name">
              <mat-icon class="btn-up">keyboard_arrow_up</mat-icon>
              <span i18n="@@Rental">Rental</span>
            </div>
            <div class="table-row-name">
              <mat-icon class="btn-up">keyboard_arrow_up</mat-icon>
              <span i18n="@@Fee">Management fee</span>
            </div>
          </th>
          <td *matCellDef="let element" mat-cell>
            <p>
              <span>{{ element.rent }}</span>
              <span> Euro</span>
            </p>
            <p>
              <span>{{ element.managementFee }}</span>
              <span> USD</span>
            </p>
          </td>
        </ng-container>

Я использую Angular версии 7.0

Кто-нибудь может мне помочь в этом случае. Огромное спасибо.