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

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

Может ли кто-нибудь помочь мне в этом случае. Большое вам спасибо.