AngularJS Table Columns Sorting with OrderBy Filter Example

Keywords : Angularjs table sorting example, Angularjs sort table data / columns using orderby filter example, Angularjs reorder / rearrange table columns / rows using orderby filter example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Sort Table Columns Example
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("tablesCtrl", function ($scope) {
$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: 24,
location:'Bangalore'
}];
});
</script>
<style type="text/css">
table, tr , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body ng-app="tablesApp">
<div ng-controller="tablesCtrl">
<h2>AngularJS Sort Table Columns</h2>
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
<tr ng-repeat="user in users | orderBy : 'age'">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.location}}</td>
</tr>
</table>
</div>
</body>
</html>

AngularJS Table Columns Sorting with OrderBy Filter Example

Example

Result