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



HTML code (index.html)

<!doctype html>
<html lang="en" ng-app="TableFilterApp">
    <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">

<body ng-controller="TableFilterAppController">
  <input type="text" class="form-control" placeholder="Enter Search Criteria" ng-model="searchQuery">
        <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>
      <tr ng-repeat="employee in employees | orderBy:sortType:sortReverse | filter:searchQuery">
        <td>{{ employee.empId }}</td>
        <td>{{ employee.firstName }}</td>
        <td>{{ employee.lastName }}</td>

JS Code – app.js

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

TableFilterAppController.$inject = ['$scope'];
function TableFilterAppController($scope) {
$scope.sortReverse  = false;
$scope.searchQuery = '';
$scope.employees = [

CSS code – style.css

  padding: 20px;
  margin-top: 10px;
  border: solid 1px;
  border-collapse: collapse;

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

Demo @
Download the source code from

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

Leave a Reply

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