How to sort dates in Angular 7 Material Data table?

Question

I created a datatable using ng generate @angular/material:table demoTable.

I have to sort by the date column. In the previous Angular versions I was able to use sortingDataAccessor for this purpose but for some reasons, I am not able to use that here.

Has anyone tried that using Angular 7 (more specifically after using the ng generate command to create the DataTable) ?

Did you look at this material.angular.io/components/sort/api ? Your question is not so clear to me. Are you able to sort? if so, the problem when sorting a date column? — benshabatnoam
– benshabatnoam, Commented Dec 6, 2018 at 12:26

benshabatnoam · Accepted Answer · 2018-12-06 18:38:15Z

2

Take this steps and you should be able to sort your date column:

HTML:

Add MatSortModule

import {MatSortModule} from '@angular/material/sort';

imports: [
  ...
  MatSortModule
  ...

Add matSort to your tabel
```
<table matSort ...
```
Add mat-sort-header to your column th
```
<th mat-sort-header="date"
```

Having this your column will emit the matSortChange event

Register matSortChange event

<table matSort (matSortChange)="sortData($event)">

TS:

Implement sortData() your way, something like this:

sortData(event) {
  this.(your-list) = this.(your-list).sort((a, b) => {
    return a.date > b.date ? 1 : -1;
  }
}

You can see this in greater details in Angular Material Docs

Also, created this DEMO for you in case you get messed up with this

answered Dec 6, 2018 at 18:38

benshabatnoam

7,7303 gold badges37 silver badges55 bronze badges

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

Comments

bat7 · Accepted Answer · 2018-12-09 06:53:03Z

1

You can do the sort usling MatSort like following:

import { MatSort, MatTableDataSource } from '@angular/material';

in your html:

 <mat-table #matSort="matSort" matSort>

in your ts component declare:

sortableList: MatSort;

@ViewChild('matSort') set yourDataSource(ms: MatSort) {

    this.sortStudentDetails = ms;
    yourDataSoruce = new MatTableDataSource(yourList);
    yourDataSoruce.sort = this.sortableList;
  }

this should work for all columns types.

answered Dec 9, 2018 at 6:53

bat7

8761 gold badge10 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to sort dates in Angular 7 Material Data table?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related