Table Filter in angularjs

Table Filter in angularjs

Created By:Debasis Das (15-Nov-2016)

In this post we will create a simple table with data read from a javascript array and using the ng-repeat command will load the same in a html table followed by filtering capability.

The filter applies to all the table column data elements

The demo can be found at https://knowstack.github.io/angularjs/filterTable/

angularjs-table-filter

angularjs-table-filter

HTML code (index.html)

<!doctype html>
<html lang="en" ng-app="TableFilterApp">
  <head>
    <title>Table Filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>

    </style>
  </head>
<body ng-controller="TableFilterAppController">
  <input type="text" class="form-control" placeholder="Enter Search Criteria" ng-model="searchQuery">
  <table>
    <thead>
      <tr>
        <th><a href="#" ng-click="sortType = 'empId'; sortReverse = !sortReverse"> Emp Id </a></th>
        <th><a href="#" ng-click="sortType = 'firstName'; sortReverse = !sortReverse"> First Name</a></th>
        <th><a href="#" ng-click="sortType = 'lastName'; sortReverse = !sortReverse"> Last Name </a></th>
        <th><a href="#" ng-click="sortType = 'emailId'; sortReverse = !sortReverse"> Email Id</a></th>
    </thead>
    <tbody>
      <tr ng-repeat="employee in employees | orderBy:sortType:sortReverse | filter:searchQuery">
        <td>{{ employee.empId }}</td>
        <td>{{ employee.firstName }}</td>
        <td>{{ employee.lastName }}</td>
        <td>{{employee.emailId}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

JS Code – app.js

(function () {
'use strict';
angular.module('TableFilterApp', [])
.controller('TableFilterAppController', TableFilterAppController);

TableFilterAppController.$inject = ['$scope'];
function TableFilterAppController($scope) {
$scope.sortType='firstName';
$scope.sortReverse  = false;
$scope.searchQuery = '';
$scope.employees = [
  {empId:1000,firstName:'John',lastName:'Doe',emailId:'johndoe@knowstack.com'},
  {empId:1001,firstName:'Jane',lastName:'Doe',emailId:'janedoe@knowstack.com'},
  {empId:1002,firstName:'Mary',lastName:'Jane',emailId:'maryjane@knowstack.com'},
  {empId:1003,firstName:'William',lastName:'Smith',emailId:'williamsmith@knowstack.com'},
  {empId:1004,firstName:'Nishant',lastName:'Singh',emailId:'nishantsingh@knowstack.com'},
  {empId:1005,firstName:'Nishant',lastName:'Nishanko',emailId:'nishantnishanko@knowstack.com'},
  {empId:1006,firstName:'Robert',lastName:'Baratheon',emailId:'robert@knowstack.com'},
  {empId:1007,firstName:'Eddard',lastName:'Stark',emailId:'eddard@knowstack.com'},
  {empId:1008,firstName:'John',lastName:'Snow',emailId:'johnsnow@knowstack.com'},
  {empId:1009,firstName:'Rob',lastName:'Stark',emailId:'robstark@knowstack.com'},
];
}
})();

CSS code – style.css

body{
  padding: 20px;
}
table{
  margin-top: 10px;
  border: solid 1px;
  border-collapse: collapse;
}

th,td{
  border: 1px solid black;
}
th{
  background-color: #CCCCCC;
  font-size: 16px;
}
tr:hover {background-color: #f5f5f5}
tr:nth-child(even) {background-color: #eeccff}

Demo @ https://knowstack.github.io/angularjs/filterTable/
Download the source code from https://github.com/knowstack/angularjs/tree/master/filterTable

Posted in angularjs, CSS, HTML5, Web Technology Tagged with: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news