Components: [Table] Let column sorting be disabled dynamically

Created on 13 Oct 2017  路  3Comments  路  Source: angular/components

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

I need to be able to disable sorting under some circumstances on column level. I'd like to do something like [mat-sort-header]="enabled" where enabled is boolean.

What is the current behavior?

I'm not able to dynamically disable sorting

I also experimented with

@ViewChild(MatSort) sort: MatSort
//and later
this.sort.sortables.forEach((value, key) => {
  this.sort.deregister(value)
})

but for some reason this does not do anything when template is set like this:

<mat-table matSort [dataSource]="dataSource" [matSortDisableClear]="true">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>
.
.
.

The only way to pull this off is to have duplicate columns, one where mat-sort-header is declared and one where it is not. (And toggle the matHeaderRowDef and columns accordingly.)

P3 feature has pr

Most helpful comment

// demo.component.html
<ng-container *ngFor="let column of dynamicColumns" [matColumnDef]="column">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="isSortingDisabled(column)">
    {{ column }}
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element[column] }}
  </td>
</ng-container>

// demo.component.ts
public isSortingDisabled(columnText: string): boolean
{
  return false; // add your logic here
}

All 3 comments

// demo.component.html
<ng-container *ngFor="let column of dynamicColumns" [matColumnDef]="column">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="isSortingDisabled(column)">
    {{ column }}
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element[column] }}
  </td>
</ng-container>

// demo.component.ts
public isSortingDisabled(columnText: string): boolean
{
  return false; // add your logic here
}

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LoganDupont picture LoganDupont  路  3Comments

constantinlucian picture constantinlucian  路  3Comments

shlomiassaf picture shlomiassaf  路  3Comments

julianobrasil picture julianobrasil  路  3Comments

kara picture kara  路  3Comments