In this tutorial we will show you the solution of sort table columns with angular and typescript, here we used angular material api to make our work too easily.

Using ‘angular material’ api we developed html table with json array information then for sorting we imported needed material in our application.

Then we just need to use sort class on table columns header to sort each column values easily.

Step By Step Guide On Sort Table Columns With Angular And Typescript :-

To achieve table sorting we need supports of angular material library so we imported ‘MatTableModule, MatSortModule, MatTableDataSource’ these files on ts file and we imported ‘OnInit, ViewChild, MatSort, Sort, MatTableDataSource’ these files on module.ts file.

After that we need to copy mat table code from angular material site then paste on ‘component.html’ file to get table and needs to add ‘mat-sort-header’ class to each table column header then we needs to define sort type on component.ts file.

Finally we gets result as mat table with user defined information’s, had option of sorting column values.

app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
export interface User{
  name: string;
  age: number;
  country: string;
}
const ELEMENT_DATA: User[] = [
  { name: 'Hentry',age: 14, country: 'london'},
  { name: 'Helan',age: 23, country: 'uk'},
  { name: 'Lily',age: 30, country: 'us'}
];
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  displayedColumns: string[] = ['name', 'age', 'country'];
  dataSource = ELEMENT_DATA;
  @ViewChild(MatSort) sort: MatSort;
  ngOnInit(){
    this.dataSource.sort=this.sort;
  }}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatTableModule,
    BrowserAnimationsModule,
    MatSortModule,
    MatTableDataSource
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
<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>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Age.
</th>
<td mat-cell *matCellDef="let element"> {{element.age}} </td>
</ng-container>
<ng-container matColumnDef="country">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Country.
</th>
<td mat-cell *matCellDef="let element"> {{element.country}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

1. As we know in angular component source had separated files in those we need to add some code on ‘app.component.ts, app.module.ts and app.component.html’ for make our requirements.
2. The app.component.ts is the main building block for angular application and always typescript class that defines behavior.Each files had their separate definitions they will works based on that we just add code for what we need.
3. Here we used ‘angular material’ for develop table and sort them. When we use external api supports to during development it reduce our work completely.
4. In app.component.html we just copied html block of predefined mat-table program for create responsive simple table from angular material document.
5. In ‘app.module.ts’ file we need to import ‘MatTableModule, MatSortModule, MatTableDataSource’ libs for getting mat table supports and don’t forget to add those imported file declaration on ‘imports’ array.
6. In ‘app.component.ts’ file we need to imports ‘OnInit, ViewChild, MatSort, Sort, MatTableDataSource’ for gets library support then we defined interface ‘User’. The ‘User’ refers our user defined array ‘User[]’ and in interface we declaring array ‘User’ keys respective types.
7. After that we defined our array ‘User’ with three sets of key and values. Finally in export class we implements ‘OnInit’, there we defined our array columns type as ‘string’ and dataSource refers ‘ELEMENT_DATA’.
8. For creates sorting in each columns table we added ‘mat-sort-header’ class to each table column headers ‘Name,Age,Country’ in ‘app.component.html’ file.
9. Then we needs to define ‘sort’ type so ‘@ViewChild(MatSort) sort: MatSort;’ this line we added on ‘app.component.ts’ file.
10. Here within ‘ngOnInit()’ function we adding sorts data to our ‘dataSource’ data, it refers ‘this.dataSource.sort=this.sort;’ this line.
11. So we finally added sorts to our table columns when we clicks on column header near arrow, it sorts column values either ascending or descending order.

Conclusion :-

In conclusion now we are able to know how to create table and add sorting to table using angular.

For seeing result on webpage we need supports of server and internet connection. As we know commend ‘ng serve’ will execute our code on server at port ‘localhost:4200’.

Initially our result on webpage contains table with user defined information’s for seeing sorting result we need to click on table column header near arrow symbol then it sorts respective column values either ascending or descending order.

I hope this tutorial on sort table columns with angular and typescript helps you and the steps and method mentioned above are easy to follow and implement.