Default sorting in Angular Material with nested objects

Question

Im using mat table with sorting, where I want to set default sorting on a certain column.

This works for plain attributes but not for nested ones.

Here is my table

<table mat-table [dataSource]="dataSource" multiTemplateDataRows 
       matSort matSortActive="break" matSortDirection="asc"
       class="mat-elevation-z4 w-100">

My nested sorting

this.dataSource.sort = this.sort;
   this.dataSource.sortingDataAccessor = (item, property) => {
   switch(property) {
      case 'break': return item.break.start;
      default: return item[property];
   }
};

Also this nested sorting is fine, when you are manually clicking on the header to sort, it does what I expect but on default it doesn't sort, only shows the sorting arrow.

That's how it looks like on page load:

Here is the corresponding stackblitz.

Answer 1

The initial sorting didn't work properly when i researched it in may.

In my case it was necessary to write my own setSortHeader function that executes after getting data.

setSortHeader() {
  this.sort.active = 'break';
  this.sort.direction = 'desc';
  this.sort.sortChange.emit({ active: this.sort.active, direction: this.sort.direction });

  const sortHeader = this.sort.sortables.get('break');
  if (sortHeader) sortHeader['_setAnimationTransitionState']({ toState: 'active' });
}

I'm not sure that this code still necessary but in my case that worked.