table search sorting

filesLib.md

npm i ng2-search-filter --save npm install ng2-order-pipe --save

{ "name": "search-sort-pagination-angular2", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.7", "@angular/common": "^7.2.7", "@angular/compiler": "^7.2.7", "@angular/core": "^7.2.7", "@angular/forms": "^7.2.7", "@angular/http": "^7.2.7", "@angular/platform-browser": "^7.2.7", "@angular/platform-browser-dynamic": "^7.2.7", "@angular/platform-server": "^7.2.7", "@angular/router": "^7.2.7", "bootstrap": "^3.3.7", "core-js": "^2.6.5", "ng2-order-pipe": "^0.1.5", "ng2-search-filter": "^0.4.7", "ngx-pagination": "^3.2.1", "rxjs": "^6.4.0", "rxjs-compat": "^6.4.0", "tslib": "^1.9.0", "zone.js": "^0.8.29" }, "devDependencies": { "@angular-devkit/build-angular": "~0.13.0", "@angular/cli": "^7.3.4", "@angular/compiler-cli": "^7.2.7", "@types/jasmine": "^3.3.9", "@types/node": "^11.10.4", "codelyzer": "^4.5.0", "jasmine-core": "^3.3.0", "jasmine-spec-reporter": "^4.2.1", "karma": "^4.0.1", "karma-chrome-launcher": "^2.2.0", "karma-cli": "^2.0.0", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "^5.4.2", "rxjs-tslint": "^0.1.7", "ts-node": "~2.0.0", "tslint": "^5.13.1", "typescript": "^3.2.1", "webpack": "^4.29.6" } }

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter'; //importing the module
import { Ng2OrderModule } from 'ng2-order-pipe'; //importing the module
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Ng2SearchPipeModule, //including into imports
    Ng2OrderModule, // importing the sorting package here
    NgxPaginationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

table.html

<header>
  <nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Ma Games</a>
  </nav>
</header>

<div class="container">
  <div class="row">
    <nav class="navbar">
      <input class="form-control" type="text" name="search" [(ngModel)]="filter">      
    </nav>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th (click)="sort('name')">Name
            <span class="glyphicon sort-icon" *ngIf="key =='name'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>
          <th (click)="sort('genre')">Genre
            <span class="glyphicon sort-icon" *ngIf="key =='genre'" [ngClass]="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let game of games | orderBy: key : reverse | filter:filter | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
          <td>{{i}}</td>
          <td>{{game.name}}</td>
          <td>{{game.genre}}</td>
        </tr>
      </tbody>
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </table>
  </div>
</div>

table.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  games = [
    {
      "id":"1",
      "name": "DOTA 2",
      "genre": "Strategy"
    },
    {
      "id":"2",
      "name": "AOE 3",
      "genre": "Strategy"
    },
    {
      "id":"3",
      "name": "GTA 5",
      "genre": "RPG"
    },
    {
      "id":"4",
      "name": "Far Cry 3",
      "genre": "Action"
    },
    {
      "id":"5",
      "name": "GTA San Andreas",
      "genre": "RPG"
    },
    {
      "id":"6",
      "name": "Hitman",
      "genre": "Action"
    },
    {
      "id":"7",
      "name": "NFS MW",
      "genre": "Sport"
    },{
      "id":"8",
      "name": "Fifa 16",
      "genre": "Sport"
    },{
      "id":"9",
      "name": "NFS Sen 2",
      "genre": "Sport"
    },{
      "id":"10",
      "name": "Witcher Assassins on King",
      "genre": "Adventure"
    }
  ];

  //sorting
  key: string = 'name';
  reverse: boolean = false;
  sort(key){
    this.key = key;
    this.reverse = !this.reverse;
  }
  p: number = 1;
}