How to sort the table based on the values (time stamp ) of a column in angular

Question

I want to sort the rows of the table based on the time stamp

the above image shown that same code i want to sort according to date and time same like that i want to see latest query on top in the table row

 <div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr id="table-heading" class="heading">
                <td><small>No.</small></td>
                <td><small>Date Of Inspection</small></td>
                <td style="width: 15%;"><small>Transaction ID</small></td>
                <td><small>Plate No.</small></td>
                <td style="width: 7%;"><small>Lic No.</small></td>
                <td><small>Establishment Name</small></td>
                <td><small>Type of Vehicle</small></td>
                <!-- <td><small>Chassis Number</small></td>
          <td><small>Manufacturer</small></td> -->
                <td><small>Issue Date</small></td>
                <td><small>Expiry Date</small></td>
                <td><small>View Permit</small></td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of inspections; let i=index">
                <td><small>{{((currentPage - 1) * itemsPerPage) + (i+1)}}</small></td>
                <td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
                <td><small>{{item.readingForm.tawasulRecieptNum}}-{{item.id}}</small></td>
                <td><small>{{item.vehicleInformationForm.registrationNumber}}</small></td>
                <td><small>{{item.entityInformationForm.tradeLicenseNumber}}</small></td>
                <td><small>{{item.entityInformationForm.companyName}}</small></td>
                <td><small>{{ (item.vehicleInformationForm.vehicleCategory==='1')?'Chiller' :
                  (item.vehicleInformationForm.vehicleCategory==='2')?'Freezer':
                  (item.vehicleInformationForm.vehicleCategory==='3')?'Freezer & Chiller':
                  (item.vehicleInformationForm.vehicleCategory==='4')?'Dry':
                  (item.vehicleInformationForm.vehicleCategory==='5')?'Chiller & Dry':
                  (item.vehicleInformationForm.vehicleCategory==='6')?'Freezer & Dry':
                  (item.vehicleInformationForm.vehicleCategory==='7')?'Hot Food in Thermo Box':
                  (item.vehicleInformationForm.vehicleCategory==='8')?'Insulated Box':
                  ''
                  }}</small></td>
                <!-- <td><small>{{item.vehicleInformationForm.chassisNumber}}</small></td>
                  <td><small>{{item.vehicleInformationForm.manufacturer}}</small></td> -->
                <td><small>{{item.vehicleInformationForm.issueDate | date:'d-MMM-y'}}</small></td>
                <td><small>{{item.vehicleInformationForm.expireDate | date:'d-MMM-y'}}</small></td>
                <!-- <td><small><img src="../../../../../assets/images/detail.png" width="30"></small></td> -->
                <td><small><img src="../../../../../assets/images/view-report.png" width="30" style="cursor:pointer;" (click)="print(item)"></small></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Sort a table is only sort the array

this.inspections = this.inspections.sort((a: any, b: any) => {
    const dateA = a.issueDate.getTime();
    const dateB = b.issueDate.getTime();
    return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
})

Update where we put the code?

I imagine you receive your data from a service (you subscribe to the data in your component). Is in the service (using pipe map) or in the component when received the data

If you use the service:

getData()
{
    this.httpClient.get(...).pipe(
       map((res:any[])=>{
          return res.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
          })
    }))
}

If you choose sort in the component

ngOnInit()
{
     this.dataService.getData().subscribe((res:any[])=>{
          this.inspections=res.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
          })
}

You can also create a function sortData

sortData(data:any[]){
    return data.sort((a: any, b: any) => {
             const dateA = a.issueDate.getTime();
             const dateB = b.issueDate.getTime();
             return dateA < dateB ? 1 : dataA > dateB ? -1 : 0
         })
}
//and use in "anywhere"
this.inspections=this.sortData(this.inspections)