Step 1: Create a custom filter pipe for sorting by copying the following code of typescript.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {
orderByComparator(a: any, b: any): number {
if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
//Isn't a number so lowercase the string to properly compare
if (a.toLowerCase() < b.toLowerCase()) return -1;
if (a.toLowerCase() > b.toLowerCase()) return 1;
}
else {
//Parse strings as numbers to compare properly
if (parseFloat(a) < parseFloat(b)) return -1;
if (parseFloat(a) > parseFloat(b)) return 1;
}
return 0; //equal each other
}
transform(array: Array<any>, args: string): Array<any> {
debugger;
if (typeof args[0] === "undefined") {
return array;
}
let direction = args[0][0];
let column = args.replace('-', '');
if (column === 'dateOfJoin') {
array.sort((a: any, b: any) => {
let left = Number(new Date(a[column]));
let right = Number(new Date(b[column]));
return (direction === "-") ? right - left : left - right;
});
}
else if (column === 'time') {
let d = new Date().toLocaleDateString();
array.sort((a: any, b: any) => {
let left = Number(new Date(d +' '+a[column]));
let right = Number(new Date(d + ' ' +b[column]));
return (direction === "-") ? right - left : left - right;
});
}
else {
if (direction == '-') {
return Array.from(array).sort((item1: any, item2: any) => {
return this.orderByComparator(item2[column], item1[column]);
});
}
else {
return Array.from(array).sort((item1: any, item2: any) => {
return this.orderByComparator(item1[column], item2[column]);
});
};
}
return array;
}
}
File Name : order.component.css
Code:
.modal {
width: 90%; /* respsonsive width */
}
a {
text-decoration: none !important;
}
table tr th {
vertical-align: middle;
}
thead th {
color: #808080;
cursor: pointer;
margin-right: 15px;
margin-left: 15px;
}
thead th span {
display: none;
}
thead th.active {
color: #000000;
}
thead th.active span {
display: inline-block;
}
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
order: string = 'firstName';
reverse: boolean = false;
constructor() { }
EmpData = [{
"SNo": 1,
"firstName": "Ashok",
"lastName": "Kumar",
"primaryPhone": 87557454545,
"dateOfJoin": "2018-07-23",
"time": '12:50:02',
}, {
"SNo": 2,
"firstName": "Vijay",
"lastName": "Prajapati",
"primaryPhone": 74545343,
"dateOfJoin": "2018-08-12",
"time": '11:50:02',
},
{
"SNo": 2,
"firstName": "Kailash",
"lastName": "Yadav",
"primaryPhone": 343443,
"dateOfJoin": "2018-12-31",
"time": '03:08:02',
},
{
"SNo": 3,
"firstName": "Sonu",
"lastName": "Kumar",
"primaryPhone": 576343434,
"dateOfJoin": "2018-05-23",
"time": '09:50:02',
}]
ngOnInit() {
}
setOrder(value: string) {
debugger;
let column = this.order.replace('-', '');
if (column === value) {
this.reverse = !this.reverse;
if (this.reverse) {
value = '-' + value;
}
}
else {
this.reverse = false;
}
debugger;
this.order = value;
}
}
<div class="table-responsive">
<table id="CheckIngrid" class="table
table-bordered dash-tbl table-task mb-0">
<thead>
<tr>
<th [class.active]="order
==='firstName' || order ==='-firstName'" (click)="setOrder('firstName')">
First Name
<i [hidden]="order ==='firstName' || order
==='-firstName'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
<th [class.active]="order
==='lastName' || order ==='-lastName'" (click)="setOrder('lastName')">
Last Name
<i [hidden]="order ==='lastName' || order
==='-lastName'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
<th [class.active]="order
==='primaryPhone'|| order ==='-primaryPhone'" (click)="setOrder('primaryPhone')">
Primary Phone
<i [hidden]="order ==='primaryPhone'|| order
==='-primaryPhone'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
<th [class.active]="order
==='dateOfJoin' || order ==='-dateOfJoin'" (click)="setOrder('dateOfJoin')">
Date Of Join
<i [hidden]="order ==='dateOfJoin' || order
==='-dateOfJoin'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
<th [class.active]="order
==='time'|| order ==='-time'" (click)="setOrder('time')">
Time
<i [hidden]="order ==='time'|| order
==='-time'">▼</i>
<span [hidden]="reverse">▼</span>
<span [hidden]="!reverse">▲</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of
EmpData | orderBy:order:reverse:'case-insensitive'; let myIndex = index">
<td> {{item.firstName}} </td>
<td> {{item.lastName}} </td>
<td>{{item.primaryPhone}} </td>
<td>{{item.dateOfJoin}} </td>
<td>{{item.time}} </td>
</tr>
</tbody>
</table>
</div>
No comments:
Post a Comment