title: How to sort by date in Data table, Angular Material
body: <p>I am using Angular Material, the first time. 
  I am stuck with adding functionality to sort the row based on the date.. i.e the latest date should show on top &amp; the oldest at the bottom.</p>
  
  <p>I went through the angular material docs but not able to find any relevant information to do it.</p>
  
  <p>This is my code:</p>
  
  <p>view.component.html:</p>
  
  <pre><code>&lt;div class="mat-elevation-z8"&gt;
      &lt;table mat-table [dataSource]="dataSource"  matSort&gt;
  
        &lt;!-- Position Column --&gt;
        &lt;ng-container matColumnDef="position"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Serial No. &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Name Column --&gt;
        &lt;ng-container matColumnDef="category"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Category &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.category}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Weight Column --&gt;
        &lt;ng-container matColumnDef="cost"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Cost &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.cost}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Symbol Column --&gt;
        &lt;ng-container matColumnDef="options"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Options &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; &lt;button (click)="getExpenseDetails()"mat-button color="primary"&gt;{{element.options}}&lt;/button&gt; &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="date"&gt;
          &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; Date &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.date | date}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;&lt;!-- &lt;p&gt;view works!&lt;/p&gt; --&gt;
  &lt;div class="mat-elevation-z8"&gt;
      &lt;table mat-table [dataSource]="dataSource"  matSort&gt;
  
        &lt;!-- Position Column --&gt;
        &lt;ng-container matColumnDef="position"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Serial No. &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Name Column --&gt;
        &lt;ng-container matColumnDef="category"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Category &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.category}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Weight Column --&gt;
        &lt;ng-container matColumnDef="cost"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Cost &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.cost}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Symbol Column --&gt;
        &lt;ng-container matColumnDef="options"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Options &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; &lt;button (click)="getExpenseDetails()"mat-button color="primary"&gt;{{element.options}}&lt;/button&gt; &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="date"&gt;
          &lt;th mat-header-cell *matHeaderCellDef  mat-sort-header&gt; Date &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.date | date}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
  
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>view.component.ts:</p>
  
  <pre><code>import {MatPaginator} from '@angular/material/paginator';
  import {MatSort} from '@angular/material/sort';
  import {MatTableDataSource} from '@angular/material/table';
  import { Component, OnInit, ViewChild } from '@angular/core';
  import {MatDialog} from '@angular/material/dialog';
  import * as moment from 'moment';
  import { DataSource } from '@angular/cdk/table';
  
  
  @Component({
    selector: 'app-view',
    templateUrl: './view.component.html',
    styleUrls: ['./view.component.scss']
  })
  
  
  export class ViewComponent implements OnInit {
  
    constructor(public dialog: MatDialog) {}
    displayedColumns: string[] = ['position', 'category', 'cost', 'options', 'date'];
    dataSource = new MatTableDataSource&lt;PeriodicElement&gt;(ELEMENT_DATA);
  
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: true}) sort: MatSort;
  
  
  
  
  
    ngOnInit() {
      this.dataSource.paginator = this.paginator;
      console.log(new Date("1998-01-31").toDateString());
    }
  
  
  }
  export interface PeriodicElement {
    position: number;
    category: string;  
    cost: number;
    options: string;
    date: string;
  }
  
  
  const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, category: 'Hydrogen', cost: 1.0079, options: 'More', date: new Date("1998-01-31").toDateString() },
    {position: 2, category: 'Helium', cost: 4.0026, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 3, category: 'Lithium',cost: 6.941, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 4, category: 'Beryllium', cost: 9.0122, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 5, category: 'Boron', cost: 10.811, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 6, category: 'Carbon', cost: 12.0107, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 7, category: 'Nitrogen',cost: 14.0067, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 8, category: 'Oxygen', cost: 15.9994, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 9, category: 'Fluorine',cost: 18.9984, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 10, category: 'Neon', cost:1797, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 11, category: 'Sodium', cost: 22.9897, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 12, category: 'Magnesiumght', cost: 24.305, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 13, category: 'Aluminum',cost: 26.9815, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 14, category: 'Silicon',cost: 28.0855, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 15, category: 'Phosphoruight', cost: 30.9738, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 16, category: 'Sulfur', cost: 32.065, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 17, category: 'Chlorine',cost: 35.453, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 18, category: 'Argon', cost: 39.948, options: 'More', date: new Date("2000-01-31").toDateString()},
    {position: 19, category: 'Potassiumght', cost: 39.0983, options: 'More', date: new Date("1998-01-31").toDateString()},
    {position: 20, category: 'Calcium',cost: 40.078, options: 'More', date: new Date("1998-01-31").toDateString()}
  ];
  </code></pre>
  
  <p>This is how it looks as of now.
  I want it to be sorted according to the date..(latest on top, oldest on bottom)</p>
  
  <p>I would really appreciate it if you can do the meaningful changes in the code. 
  Thanks :)</p>
  
  <p><a href="https://i.stack.imgur.com/0bJIf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0bJIf.png" alt="enter image description here"></a></p>