Angular - table sorting not working for nested objects

Question

I have a angular table but the date is not sorting correctly. The rest of the columns sort perfectly fine besides the date. I think its because the date is a nested object, I tried using the matSortChange() but nothing works.

I have created a demo here: DEMO

 const ELEMENT_DATA: PeriodicElement[] = [
     {position: 1,
       name: 'A', 
       weight: 1.5079, 
       timeModel: {CreatedTime: "2020-04-30T15:38:11.186Z", LastModified: "2020-06-08T15:38:11.186Z"}
      },
       {position: 2,
       name: 'B', 
       weight: 1.4079, 
       timeModel: {CreatedTime: "2021-03-30T15:38:11.186Z", LastModified: "2020-06-10T15:38:11.186Z"}
      },
       {position: 3,
       name: 'C', 
       weight: 1.3079, 
       timeModel: {CreatedTime: "2020-01-30T15:38:11.186Z", LastModified: "2020-03-30T15:38:11.186Z"}
      },
    ];

I did try to add a custom sort function to try to sort the dates but its not working correctly.

   public changeSort(event: Event) {

     if (event.active === 'date') {   
       this.dataSource.filteredData = this.dataSource.filteredData.sort(function(a, b) {
      return new Date(a.timeModel.CreatedTime).getTime() - new Date(b.timeModel.CreatedTime).getTime();
    });
    }

  }

HTML

<table mat-table [dataSource]="dataSource" (matSortChange)="changeSort($event)" matSort class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.timeModel.CreatedTime}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

}

I bet it's sorting as a string. Convert date to Unix time directly in your data ex: { CreatedTime: 1567562058 }. When you display data on screen convert Unix time to Date() object and then format the way you want it. — user2258152
– user2258152, Commented Sep 24, 2020 at 18:26

Julius Dzidzevičius · Accepted Answer · 2020-09-24 19:12:22Z

Yes, the issue is because of it is an object. matColumnDef="weight" describes the property to be taken into the sorting function. So from this object:

{
  position: 1,
  name: 'A', 
  weight: 1.5079, 
  timeModel: {CreatedTime: "2020-04-30T15:38:11.186Z", LastModified: "2020-06-08T15:38:11.186Z"}
}

weight is taken. But matColumnDef="date" results in just an undefined - there is no property date in your objects.

So if possible, change the dataSource objects and provide only the date it needs (as it seems you only use CreatedTime anyways in your table).

You can also overwrite sortingDataAccessor function of a MatDatSource, which originally looks like this atm:

sortingDataAccessor: ((data: T, sortHeaderId: string) => string|number) =
    (data: T, sortHeaderId: string): string|number => {
  const value = (data as {[key: string]: any})[sortHeaderId];

  if (_isNumberValue(value)) {
    const numberValue = Number(value);
    return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
  }

  return value;
}

You need to add a condition to look if the current sortHeaderId value is a 'date'. Then just tell it how to get the needed value of the object to be used in a sorting function:

this.dataSource.sortingDataAccessor = (data, sortHeaderId) => {
  const value = (data as {[key: string]: any})[sortHeaderId];
  
  const MAX_SAFE_INTEGER = 9007199254740991;

  if (_isNumberValue(value)) {
    const numberValue = Number(value);    
    return numberValue < MAX_SAFE_INTEGER ? numberValue : value;
  }

  if (sortHeaderId === 'date') {
    return new Date(data.timeModel.CreatedTime)
  }

  return value;
}

p.s. you need to import MAX_SAFE_INTEGER and _isNumberValue from Angular if want to preserve that functionality.

Asaf · Accepted Answer · 2020-09-24 18:20:02Z

0

I can detect some issues in your code:

All your dates are the same, so no sorting will effect it.
You got inside the function changeSort a if statement if(event.direction === "desc"), Try to change it to if(event.active === "date"), the other sorts are working fine and you want to exclude this condition only to date sort.

edited Sep 24, 2020 at 18:20

answered Sep 24, 2020 at 18:11

Asaf

1,59211 silver badges17 bronze badges

1 Comment

HJ1990 Over a year ago

Sorry I fixed the dates in the demo and updated the changeSort but it still doesn't work.

StepUp · Accepted Answer · 2020-09-24 19:05:35Z

0

It looks like Angular does not know the correct way to property that should be sorted. So we can show it to Angular by using custom sorting data accessor:

public changeSort(event: Event) {
    console.log(event)
    this.dataSource.sortingDataAccessor = (item, property) => {
        switch (property) {
            case 'date': return item.timeModel.CreatedTime;
            default: return item[property];
        }
    };
}

A complete stackblitz example example can be seen here

answered Sep 24, 2020 at 19:05

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Comments

user2258152 · Accepted Answer · 2020-09-24 20:26:47Z

0

Store unix timestamp as data and format it when you display on screen. This way you don't need to create the sort function.

Here is a working example https://stackblitz.com/edit/angular-j7ycna-wdvvnw

answered Sep 24, 2020 at 20:26

user2258152

6855 silver badges13 bronze badges

Comments

James Risner · Accepted Answer · 2022-10-27 12:42:58Z

0

@StepUp's solution worked for me, however, I was getting an error.
I suppressed the error with @ts-ignore.
The error could have been specific to my situation.

These errors were reported:

Type '(cart: Cart1, sortHeaderId: string) => string | number | Product | undefined' is not assignable to type '(data: Cart1, sortHeaderId: string) => string | number'.

Type 'string | number | Product | undefined' is not assignable to type 'string | number'.

Type 'undefined' is not assignable to type 'string | number'.`

edited Oct 27, 2022 at 12:42

James Risner

6,09711 gold badges33 silver badges60 bronze badges

answered Oct 22, 2022 at 21:41

laalsanedo

1

1 Comment

Navigatron Over a year ago

Formatting of the error could be improved

Collectives™ on Stack Overflow

Angular - table sorting not working for nested objects

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related