AngularJS sort rows by table header

angularjs sort by column headers
angularjs bidirectional sorting example

In this video we will discuss how to implement bidirectional sort in Angular JS.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Here is what we want to do
1. The data should be sorted when the table column header is clicked
2. The user should be able to sort in both the directions - ascending and descending. Clicking on the column for the first time should sort the data in ascending order. Clicking on the same column again should sort in descending order.
3. An icon should be displayed next to the column showing the sort column and direction

Sets up the model
sortColumn and reverseSort properties are attached to the $scope object. These 2 properties are used to control the column by which the data should be sorted and the sort direction.
sortColumn is set to name and reverseSort is set to false. This will ensure that when the form is initially loaded, the table data will be sorted by name column in ascending order.
Depending on the column header the user has clicked, sortData() function sets the sortColumn and reverseSort property values.
Based on the sort column and the sort direction, getSortClass() function returns the CSS class name to return. The CSS class controls the sort icon that will be displayed next to the sort column.

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {

var employees = [
{ name: "Ben", dateOfBirth: new Date("November 23, 1980"), gender: "Male", salary: 55000 },
{ name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 },
{ name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 },
{ name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 },
{ name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 }
];

}

? 'arrow-down'
: 'arrow-up';
}

return '';
}
});

[body ng-app="myModule"]
[div ng-controller="myController"]
[table]
[thead]
[tr]
[th ng-click="sortData('name')"]
Name [div ng-class="getSortClass('name')"][/div]
[/th]
[th ng-click="sortData('dateOfBirth')"]
Date of Birth [div ng-class="getSortClass('dateOfBirth')"][/div]
[/th]
[th ng-click="sortData('gender')"]
Gender [div ng-class="getSortClass('gender')"][/div]
[/th]
[th ng-click="sortData('salary')"]
Salary [div ng-class="getSortClass('salary')"][/div]
[/th]
[/tr]
[/thead]
[tbody]
[tr ng-repeat="employee in employees | orderBy:sortColumn:reverseSort"]
[/tr]
[/tbody]
[/table]
[/div]
[/body]
[/html]

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[narasimhaswamy]

I am very big fan of Kudvenkat from last 6 years. What ever he says are very crystal clear and straight into my mind such a pleasant. I enjoy seeing his videos .Thanks a lot.

[manjarijavvaji]

Too much of knowledge in 12 mins. I searched for AngularJs tutorials everywhere but these are the best I found. am glad I wanted to have a look at this. Kudos to u venkat. U r incredible.

[sarmadabid]

I've been watching youtube videos for years now, I can honestly say that you're one of the few that explains very clear and smooth.
Thanks a lot ^_^

[hemangthanki]

Although I have seen many videos (including paid), this series is by far the best ! This is no-nonsense knowledge of AngularJS for beginners. Hats off to Venkat for this series. Presentation including the audio (language) is flawless !
P.S. I am Java guy. But I love this series as it is neutral Angular JS as mentioned in the title.

[priyarayapudi]

Your explanation is very clear.Thank you so much.

[melnjada]

Dear Venkat, thank you so much! You're the only trustworthy source of information for me and I owe you my first salary...well, not all of it cause I need to pay some bills but some of it XP
Thank you soo much and I hope you upload more about angularjs!

[nitishsrivastava]

I've been watching youtube videos for years now, I can honestly say that
you're one of the few that explains very clear and smooth.
Thanks a lot

[razneesh]

You are too good. The best video's i ever seen . Thank you for your contribution :)

[TheGuroguro]

Thank you very much. its not a simple logic, respect. Every time ng-click function is called, by clicking header,
function of ng-class is called too. It got me and took time before i realised it.

[Algebrodadio]

You're a fantastic teacher @kudvenkat. Thank you.

[Hariharan]

The concepts explained here are crystal clear ..loved it :)

[rajasekharareddyjanga]

Amazing. Best place to start learning AngularJS. Thanks a lot, Guru-ji.

[ymtan]

Absolutely phenomenal video indeed about how to implement bidirectional sort in Angular JS. Wishing you a joyous and blessed Deepavali 2015.

[anusham]

All your videos are very helpful ... thanks a million !

[codebendern]

Venkat, I am following your tutorials from Nairobi, Kenya. I am gonna be an AngularJS pro because of you! I hope you can have similar tuts on Node.js. Keep on with the good work

[edsalazar]

Works like a charm in my old Ang project! Thank you!

[gameplayerdeluxe]

The best teacher on Youtube, soo easy to understand!

[sharathchandra]

Thanks for the wonderful videos. For all the guys who facing arrows not working properly problem, please cross check your style.css file. particularly .arrow-up and arrow-down sections. one has border-top element another will have border-bottom element.

[yogeshghotekar]

You made angular so easy for me. You are superb teacher.

[kawsarproject]

excellent tutorials for beginners AngularJS