Unable to sort material table column with date strings

Question

So in angular I have a material table with columns. I'm using the matSort to sort 3 of my columns in my table asc/desc. I can sort the last 2 columns asc/desc just fine. However, I cannot do the same thing with the date column (First column). It seems I can sort it once, but whenever I try to sort it again, it does nothing.

I tried overriding the sortingDataAccessor on MatTableDataSource and it didn't work:

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

This is the start of the material table in my trips.component.html file with the day (date column):

<div class="table-responsive">
<table class="table table-bordered">
  <mat-table [dataSource]="dataSource" matSort>

    <!-- Day column -->
  <ng-container matColumnDef="day">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Day</mat-header-cell> 
    <mat-cell *matCellDef="let trip">{{ trip.start | date: 'dd/MM/yyyy' }}</mat-cell>
  </ng-container>

This my trips.component.ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Trip } from 'src/app/models/Trip';
import { MatSort, MatSortable, MatTableDataSource } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-trips',
  templateUrl: './trips.component.html',
  styleUrls: ['./trips.component.css']
})
export class TripsComponent implements OnInit {

@ViewChild(MatSort, {static:false}) sort: MatSort;

private trips: Trip[];
displayedColumns = ['day', 'time', 'duration', 'from', 'to', 'mileage', 'cost'];
dataSource;

constructor() {
  this.trips = [new Trip("12/11/2019 02:30:15", "12/11/2019 06:04:43", "Landsmeer", "Amsterdam-West", 1.97, 1.06), new Trip("0  8/29/2019 16:10:14", "08/29/2019 18:19:54", "Amsterdam-West", "Vlaggemast", 14.74, 9.20),new Trip("08/16/2019 01:56:42", "08/16/2019 03:23:26", "Amsterdam-Zuid", "Amsterdam-Noord", 7.88, 7.61), new Trip("03/25/2019 04:01:27", "03/25/2019 09:58:27", "NDSM-Plein", "Amsterdam-Zuid", 5.49, 5.01), new Trip("12/23/2018 14:27:06", "12/23/2018 18:47:34", "Westpoort", "Schakelstraat", 2.00, 1.98), new Trip("12/10/2018 12:26:56", "12/23/2018 14:39:29", "Ijdok", "Amsterdam-Oost", 3.46, 2.47), new Trip("07/03/2018 11:20:39", "03/07/2018 12:37:51", "Amsterdam-Noord", "Huidekoperstraat", 7.66, 5.22), new Trip("05/19/2018 22:41:39", "05/20/2018 03:29:20", "Amsterdam Nieuw-West", "Amsterdam-Centrum", 13.32, 6.93), new Trip("04/21/2018 08:37:04", "04/21/2018 15:24:38", "Buiksloterweg", "Amsterdam-Noord", 13.72, 13.13)
   ]
  }

  //Create this method (ngAfterViewInit) because we want to access @viewChield
  ngAfterViewInit(){
    this.dataSource.sortingDataAccessor = (item, property) => {
      switch (property) {
        case 'day': return new Date(item.day);
        default: return item[property];
      }
    };
    this.dataSource.sort = this.sort;
  }

  ngOnInit() {

    //Fill datasource with the trips array
    this.dataSource = new MatTableDataSource(this.trips);

}

}

Any kind of help is appreciated

I'm trying but it says: 'can't find pakage: src' for some reason on stackblitz.com, stackblitz.com/edit/angular-kchfn6 — johnny
In your example, you already seem to be converting the string to a date, so the sorting should work with the default sort. Are you sure the sort is working on the other columns? — nash11
I justed tested it on my other columns and for some reason it only works on my last 2 columns (mileage and cost) which are both of the number datatype . As u can see all the other values are of String datatype in my Trips array. Do you know why it only works for the last 2 columns? — johnny

Harshad Vekariya Harshad Vekariya · Accepted Answer · 2019-09-10T15:10:08

You may need to set property on sorting. Try like below at root level. Don't paste code in any method at this point. Set it inside component.

  private sort: MatSort;
  // Required for sorting on Mat tables.
  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.dataSource.sort = this.sort;
    this.dataSource.sortingDataAccessor = (data, header) => {
      switch (header) {
        case 'day': return new Date(data.day);
        default: return data[header];
      }
    };
  }

Unable to sort material table column with date strings

1 Answers