CODEWITHSUNDEEP
angulartypescriptangular-material-table
dschulie_27
dschulie_27

Reputation: 51

MatSort: property name different from matColumnDef -> Not working

Is there any chance to sort a column with matSort in an Angular table where the name of the property differs from the matColumnDef:

<ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>TEST</th>
      <td mat-cell *matCellDef="let box"> {{box.input.name}} </td>
</ng-container>

Upvotes: 1

Views: 1879

Answers (1)

dschulie_27
dschulie_27

Reputation: 51

solved the problem with the following https://stackblitz.com/edit/mattable-with-sorting-custom?file=app%2Ftable-sorting-example.ts

therefore renamed

matColumnDef="name"

to

matColumnDef="input.name"

also in

public displayedLoadingPointColumns: string[] = ['input.name', ...

added this method in the .ts file

sortColumn($event: Sort): void {
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'input.name': {
          return item.input.name;
        }
        default: {
          return item[property]; }
      }
    };
}

in the html it looks as follows:

<table mat-table [dataSource]="this.dataSource" matSort (matSortChange)="sortColumn($event)">

  <ng-container matColumnDef="input.name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
      <td mat-cell *matCellDef="let whatevet"> {{whatever.input.name}}</td>
  </ng-container>
...

Upvotes: 3

Related Questions