2

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

Valentino Ru
  • 4,964
  • 12
  • 43
  • 78
  • 1
    When you add `matSort` attribute in the `mat-table` who datasource was a MatTableDataSource, is created a "MatSort" that look for inside all the `*matHeaderCellDef ` with the attribute `mat-sort-header`. If you has no mat-sort-header you has no sort. – Eliseo Jul 21 '22 at 18:11

3 Answers3

2

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>
Felipe Morais
  • 155
  • 2
  • 12
1

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>
Nineria Nananai
  • 11
  • 2
1

Adding [disabled] attribute on mat-sort-header and giving it the column name worked for me.

<th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="column === 'Select'">

rhymermj
  • 31
  • 5