https://acme-company.github.io/ng-sort/
Note: For multi-column sort, hold down CTRL key while clicking the table header.
npm install ng-sort --save
import { NgModule } from "@angular/core";
...
import { AppModule as SortModule } from 'ng-sort';
@NgModule({
imports: [
...
SortModule
],
...
})
export class AppModule {
}
<table class="table table-hover">
<thead>
<tr>
<td sort="firstName">First Name</td>
<td sort="lastName">Last Name</td>
<td sort="birthDate">Birthdate</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of people | sort">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.birthDate | date:'yyyy-MM-dd' }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
</td>
</tr>
</tfoot>
</table>
Add the SortService to the providers array for each of your list components. The scope of SortService should not be global because it tracks sort state for a single list.
import { Component } from '@angular/core';
import { SortService } from 'ng-sort';
export interface Person {
firstName: string;
lastName: string;
birthDate: Date;
}
@Component({
selector: 'app',
templateUrl: './app.component.html',
providers: [SortService]
})
export class AppComponent {
name = 'Angular';
people: Person[] = [];
constructor(sortService: SortService) {
sortService.configure({
noneClass: 'glyphicon-sort',
ascendingClass: 'glyphicon-triangle-top',
descendingClass: 'glyphicon-triangle-bottom'
});
this.people = [
{ firstName: 'James', lastName: 'Dean', birthDate: new Date(2012, 5, 1) },
{ firstName: 'John', lastName: 'Smith', birthDate: new Date(2012, 5, 1) },
{ firstName: 'Jane', lastName: 'Doe', birthDate: new Date(2011, 1, 1) },
{ firstName: 'Terry', lastName: 'Rundle', birthDate: new Date(2015, 6, 12) },
{ firstName: 'Barry', lastName: 'White', birthDate: new Date(2009, 3, 19) },
];
}
}
sortService.configure({
noneClass: 'glyphicon-sort',
ascendingClass: 'glyphicon-triangle-top',
descendingClass: 'glyphicon-triangle-bottom'
});
/* include in CSS from index.html */
@font-face {
font-family: 'Glyphicons Halflings';
src: url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.eot');
src: url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-sort:before {
content: "\e150";
}
.glyphicon-triangle-bottom:before {
content: "\e252";
}
.glyphicon-triangle-top:before {
content: "\e253";
}
/* when the header is clicked, do not allow select */
td[sort] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}