Angular Material how set mat-sort-header from mat-table

Question

i have the next table from angular material:

<mat-table *ngIf="!waiting" class="table-general table-summary"  #table [dataSource]="dataSource" matSort>
    <mat-header-row class="header_row" *matHeaderRowDef="headerKeys"></mat-header-row>
    <mat-row class="row" *matRowDef="let row; columns: headerKeys;"></mat-row>
    <ng-container *ngFor="let key of headerKeys; let i = index">
      <ng-container matColumnDef="{{key}}">
        <mat-header-cell class="header_name header_{{key}}" *matHeaderCellDef mat-sort-header> {{getHeaderName(key)}} </mat-header-cell>
        <mat-cell class="cell cell_{{key}}" *matCellDef="let row">
          <div class="box_cell {{key}}">
            <div class="current_value ellipsis" *ngIf="key=='customer'">{{cellValue(row[key])}}</div>
            <mh-box-score
              *ngIf="key!='customer'"
              [value]="cellValue(row[key])"
              [type]="cellValue(row[key],'type')+' small'"
              [type_number]="'percent'"
              [previous_value]="cellValue(row[key],'diff')"
              [previous]="cellValue(row[key],'previousLabel')"
            ></mh-box-score>
          </div>
        </mat-cell>
      </ng-container>
    </ng-container>
  </mat-table>

it's work perfect. Now i want modify the position of sort arrow in the header from after to before according to the documentation

I have searched all the ways but I can not do something that seems to be so simple.

Please help, I'm relatively new at angular

Z. Bagley · Accepted Answer · 2018-05-17 13:02:33Z

4

In order to move the arrow you need to apply the @Input() item directive arrowPosition to the DOM element with the mat-sort-header: <th mat-sort-header="name" arrowPosition='before'>Dessert (100g)</th>.

Here is a stackblitz example of how to apply the arrowPosition to various table headers forked directly from the Material example.

edited May 17, 2018 at 13:02

answered Jan 2, 2018 at 19:41

Z. Bagley

9,2781 gold badge44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gerardo Buenrostro González Over a year ago

Type 'string' is not assignable to type 'MenuPositionX'

Z. Bagley Over a year ago

@GerardoBuenrostroGonzález Working stackblitz, and here are the documents: material.angular.io/components/sort/api which show the same format (and that the input is a string. The answer is correct, so your error is likely coming from an incorrect import or other source.

Collectives™ on Stack Overflow

Angular Material how set mat-sort-header from mat-table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related