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
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
Leave a Reply