ng-sort v0.1.18

ng-sort

Demo

https://acme-company.github.io/ng-sort/

Note: For multi-column sort, hold down CTRL key while clicking the table header.

Installation

npm install ng-sort --save

Usage

App.Module.ts

import { NgModule } from "@angular/core";
...
import { AppModule as SortModule } from 'ng-sort';

@NgModule({
    imports: [
        ...
        SortModule
    ],
    ...
})
export class AppModule {

}

App.Component.html

  <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>

App.Component.ts

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) },
    ];
  }
}

Customizing Sort Icons

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;
}