This angular directive emulates the Grails sortableColumn tag.

bower install angular-sortable-column


Angular sortable column 0.1.4


Native AngularJS sortable column directive that is modeled after the [Grails sortableColumn tag] (

Build Status



  • AngularJS 1.1.3 or higher (Not tested with 1.0.x)
  • jQuery 1.10.2 or higher (Would like to remove this dependency)

#Testing We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install bower grunt

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test\test.config.js

#Usage We use bower for dependency management. Add

dependencies: {
    "angular-sortable-column": "latest"

To your bower.json file. Then run

bower install

This will copy the angular-sortable-column files into your components folder, along with its dependencies.

Load the script files in your application:

<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/angular-sortable-column/src/js/sortableColumn.js"></script>

Add the date module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.sortableColumn'])

Apply the directive to your form elements:

<th data-sortable-column="{ title : 'Click Me', property: 'id' }"></th>



String. Required Default: 'asc'

The default sort order for the column.

Accepts values of :

  • 'asc' for ascending order
  • 'desc' for descending order


String array. Optional Default: []

Array of route parameters that should be excluded from the link paramaters. This is useful when using parametrized routes. i.e. .when( '/customer/:id' ... ) exclude 'id' so id=x is not one of the url paramters.


Object. Optional default: {}

An object containing additional request parameters.


String. Optional default: '#'

Prefix the generated url with this value.


String. Required default: undefined

Name of the property relating to the column to sort


String. Required default: undefined

The title caption for the column.


<th data-sortable-column="{ title: 'foo', property: 'bar' }" ></th>

will result in an initial value of

<th >
	<a href="#/[$location.path()]?sort=bar&order=asc">foo</a>

However, if the route is '#/[$location.path()]?sort=bar&order=asc'

<th class="sorted asc" >
	<a href="#/[$location.path()]?sort=bar&order=desc">foo</a>

Note that the order in the link is different than the current order and that the 'sorted' and 'asc' classes were added to the 'th' element