AngularJS Table Sorting with Ng-Table

Here we will learn how to implement sorting, paging to table data in angularjs using ng-table module and example to use ng-table to sort table data in angularjs applications.

AngularJS Table with Sorting

In angularjs we can implement sorting for table columns by using ng-table module. Generally in angularjs if we want to implement sorting for table columns we need to write a lot of code but if we use ng-table module in angularjs applications it’s very easy to implement sorting for table columns with few lines of code.

Syntax of AngularJS Table with Sorting

Following is the syntax of implementing sorting for table columns using ng-table in angularjs applications.

 

getData: function ($defer, params) {

$scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;

$defer.resolve($scope.data);

}

If you observe above syntax we are implementing sorting functionality to $scope.users object by using orderBy filter in angularjs. Here getData function will call every time whenever we sort the table column and it will refresh the data of $scope.users object based on sort column.

 

If you want to know more about using ng-table in angularjs check this AngularJS Tables with ng-table.

AngularJS Table with Sorting Example

Following is the example of implementing sorting functionality to table columns in angularjs applications using ng-table module.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Sort Table Columns Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">

<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

<script type="text/javascript">

var app = angular.module("ngtableApp", ["ngTable"]);

app.controller("ngtableCtrl", function ($scope, $filter, ngTableParams) {

$scope.users = [

{ name: "Madhav Sai", age: 10, location: 'Nagpur' },

{ name: "Suresh Dasari", age: 30, location: 'Chennai' },

{ name: "Rohini Alavala", age: 29, location: 'Chennai' },

{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },

{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },

{ name: "Siva Prasad", age: 38, location: 'Nagpur' },

{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },

{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },

{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },

{ name: "Mahesh Dasari", age: 23, location: 'California' },

{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },

{ name: "Gopi Krishna", age: 29, location: 'Repalle' },

{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },

{ name: "Sushmita", age: 27, location: 'Vizag' }

];

$scope.usersTable = new ngTableParams({

page: 1,

count: 5

}, {

total: $scope.users.length,

getData: function ($defer, params) {

$scope.data = params.sorting() ? $filter('orderBy')($scope.users, params.orderBy()) : $scope.users;

$scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());

$defer.resolve($scope.data);

}

});

});

</script>

</head>

<body ng-app="ngtableApp">

<div ng-controller="ngtableCtrl">

<h2>AngularJS ng-table Sorting Example</h2>

<table ng-table ="usersTable" class="table table-bordered table-striped">

<tr ng-repeat="user in data">

<td data-title="'Name'" sortable="'name'">{{user.name}}</td>

<td data-title="'Age'" sortable="'age'">{{user.age}}</td>

<td data-title="'Location'" sortable="'location'">{{user.location}}</td>

</tr>

</table>

</div>

</body>

</html>

If you observe above code we are implementing both paging and sorting for table data in angularjs applications and used bootstrap css plugin to apply bootstrap styles to table. Now we will run and see the result of applications.

Output of AngularJS Table with Sorting

Following is the result of implementing sorting for table columns using ng-table module in angularjs applications.

 

AngularJS Sort Table Columns using ng-table Module Example Result

 

This is how we can implement sorting to table data in angularjs applications using ng-table module.