Material Angular table not sorting column which contains objects

Question

I'm building a web app using angular material and am trying to display a table with sorting. The sorting works on all but this column. This is the only column where the type of the variable isn't a string or a number.

I've already try'd change column def to office.name etc, but to no avail.

<ng-container matColumnDef="office">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
    <td mat-cell *matCellDef="let row">{{ row.office.name }}</td>
</ng-container>

Component Code:

export class DataTableComponent implements OnInit, OnChanges {
  dataTableColumns: string[] = ['name', 'emailAddress', 'office', 'active'];
  dataSource: MatTableDataSource<Data>;
  data: Data[];
  offices: Office[];
  value: string;
  oldFilterValue: string;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;
  @ViewChild(MatTable) table: MatTable<any>;
  @ViewChild(MatMenuTrigger)
  contextMenu: MatMenuTrigger;

  contextMenuPosition = { x: '0px', y: '0px' };

  constructor(
    private dataService: DataService,
    public dialog: MatDialog,
    private officeService: OfficeService,
    public snackBar: MatSnackBar) {
  }

  ngOnInit() {
    this.getData();
    this.getOffices();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.updateTable();
  }

  getData(): void {
    this.dataService.get().subscribe((res) => {
      setTimeout(() => {
      this.data= res as any[];
      this.updateTable();
    });
  }

  updateTable(): void {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    if (this.value) {
      this.applyFilter(this.value);
    }
  }

  getOffices(): void {
    this.officeService.getOffices().subscribe((res) => {
      this.offices = res;
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

by default the angular material worked on root level keys value and you trying to sort on nested value row.office.name that's why it not work. follow the document: material.angular.io/components/table/overview#sorting — Chintan Kotadiya
– Chintan Kotadiya, Commented May 16, 2019 at 9:09
Yes I guess that's why it wasn't working, I was looking for a solution to this — sunalive
– sunalive, Commented May 16, 2019 at 9:12
check this example of sorting on nested object key working demo stackblitz.com/edit/angular-ef8lwu hope this will help to get out of this. — Chintan Kotadiya
– Chintan Kotadiya, Commented May 16, 2019 at 9:31

asimhashmi · Accepted Answer · 2019-05-16 09:28:35Z

1

You can use sortingDataAccessor on your data source to sort the object in your table.

Assuming that your data source name is dataSrouce

@ViewChild(MatSort) sort: MatSort;


ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (item, property) => {
      switch(property) {
        case 'office.name': return item.office.name;
        default: return item[property];
      }
    };
  this.dataSource.sort = this.sort
}

And in your HTML, change matColumnDef="office" to matColumnDef="office.name"

<ng-container matColumnDef="office.name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
    <td mat-cell *matCellDef="let row">{{ row.office.name }}</td>
</ng-container>

edited May 16, 2019 at 9:28

answered May 16, 2019 at 9:02

asimhashmi

4,3861 gold badge17 silver badges34 bronze badges

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

6 Comments

sunalive Over a year ago

I tried to just copy and paste this into my ngOnInit() method, but didn't seem to make a difference, am I supposed to change the html or put it in a different method?

asimhashmi Over a year ago

After this.dataSource.paginator = this.paginator;

sunalive Over a year ago

unfortunately the updated one doesn't work either :(

asimhashmi Over a year ago

Try to change your HTML, you need to set office.name instead of office. I've updated my answer. Does it help?

sunalive Over a year ago

Got it working but had to set it up in the getData method bit, bit unsual. Thanks for all the help, bit of code duplication but it still works :)

|

Collectives™ on Stack Overflow

Material Angular table not sorting column which contains objects

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related