0

I use Angular material to make a table whose columns contain multi property value from [dataSource]. I want to make sort for each property in columns. When click to an arrow correspond to a property in a column, the table will be sorted immediately follow this property. But it's currently impossible with me. I researched about MatSort but it seem not support for my case.

The table look like:

The snapshot table image

You can see, in the first column: there are 2 property shown: 'Rental' and 'Management fee'. When I click to the sorting arrow in the left side of 'Rental', the table will sort follow 'Rental'. When I click in 'Management fee', the table will sort follow 'Management fee', the same for another columns.

For one column: I made a look like this:

<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>

I use Angular version 7.0

Can anybody help me in this case. Thank you so much.

Xuan Quang Nguyen
  • 1
  • 2
  • you want to wire up the sort button with (click) event that will sort your element array. you can do something like: this.element.sort((a,b)=>{return a. managementFee - b. managementFee}). This assumes that you are using the element array to render your table. – Wen W Jan 13 '19 at 04:41
  • Thank you so much, this solution solves me. I am sorry in replying you lately due to the problem is solved after I asked. After all, thank you very much. – Xuan Quang Nguyen Mar 05 '19 at 10:06

0 Answers0