AngularJS Sortable Table

Using angular-sortable table directive is an easy way to add sorting to you table.

For more documentation check out the Github page.

Example code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Angular sortable table example</title>
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<script src="bower_components/angular/angular.js"></script>
		<script src="bower_components/angular-sortable-table/angular-sortable-table.js"></script>
		<style>
			th.sortable { cursor: pointer; }
			th.sortable:after { content: "\f0dc"; padding-left: 5px; font-family: FontAwesome; font-size: 12px; }
			th.sortable.asc:after { content: "\f0de"; }
			th.sortable.desc:after { content: "\f0dd"; }
		</style>
		<script>
			angular.module('angular-sortable-table-example', [ 'shagstrom.angular-sortable-table' ])
				.controller('MainCtrl', function ($scope) {
					$scope.countryMappings = {
						"GH": "Ghana",
						"GQ": "Equatorial Guinea",
						"GR": "Greece"
					};
					$scope.people = [
						{ name: "John", age: 34, countryCode: "GQ" },
						{ name: "Sahra", age: 36, countryCode: "GH" },
						{ name: "Desmond", age: 19, countryCode: "GR" },
						{ name: "Carole", age: 25, countryCode: "GH" },
						{ name: "Annie", age: 25, countryCode: "GQ" }
					];
				});
		</script>
	</head>
	<body ng-app="angular-sortable-table-example" ng-controller="MainCtrl">
		<h1>Angular sortable table example</h1>
		<table sortable-table="personSortObject" sortable-table-options="{ multipleColumns: true }">
			<thead>
				<tr>
					<th sortable-column="name">Name</th>
					<th sortable-column="age">Age</th>
					<th sortable-column="countryCode:countryMappings[value]">Country</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="person in people | sortTable: personSortObject">
					<td>{{person.name}}</td>
					<td>{{person.age}}</td>
					<td>{{countryMappings[person.countryCode]}}</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

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=""> <strike> <strong>