Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular <mat-table>: disable sort header for specific column

I have a mat-table with the matSort attribute. As I understood, this enables the sort header for all columns. Is there any possibility to disable the sort header for a single column?

With <table mat-table>...</table>, I can specify a mat-sort-header for each column, but not with <mat-table>...</mat-table>.

like image 687
Valentino Ru Avatar asked Sep 11 '25 06:09

Valentino Ru


2 Answers

You can use the [disable] attribute:

<th
  mat-header-cell
  *matHeaderCellDef
  [mat-sort-header]="column.name"
  [disabled]="column.name === 'actions'" // Here
  [style.width]="column.width"
>
  {{ column.label }}
</th>
like image 62
Felipe Morais Avatar answered Sep 13 '25 20:09

Felipe Morais


you can remove mat-sort-header from th to prevent it from sorting

<table matSort (matSortChange)="sortData($event)">
      <tr>
        <th mat-sort-header="name">row-1</th> // sortable
        <th>row-2</th> 
        <th>row-3</th>
      </tr>

      <tr *ngFor="let row of sortedTable">
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
        <td>{{ row.address }}</td>
      </tr>
    </table>
like image 40
Shinei Avatar answered Sep 13 '25 21:09

Shinei