title: Angular 7 - How to implement sorting in mat-table
body: <p>I am trying to implement sorting in <code>&lt;mat-table&gt;</code> using Angular version 7.3.</p>
  <p>Below is my source code:</p>
  <pre><code>&lt;table
    mat-table
    [dataSource]='dataSource'&gt;
    &lt;ng-container matColumnDef=&quot;position&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.position}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;name&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.name}} &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;weight&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Weight &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.weight}} &lt;/td&gt;
    &lt;/ng-container&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Here is the TypeScript file source is:</p>
  <pre class="lang-js prettyprint-override"><code>const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
  ];
  
  @Component({
    selector: 'table-basic-example',
    styleUrls: ['table-basic-example.css'],
    templateUrl: 'table-basic-example.html',
  })
  export class TableBasicExample {
    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
    dataSource = ELEMENT_DATA;
  }
  </code></pre>
  <p>I am using Angular version 7 and the sorting feature I am not able to write. Need help with that as I am new to Angular.</p>