AngularJS sort rows by table header Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 10 of angularjs tutorial in
this video we'll discuss how to
implement bi-directional sort in angular
this is continuation to part 9 so please
watch part 9 before proceeding so here
is what we want to do when I click on a
column header for the first time then we
want to sort the table data by that
column in ascending order if I click on
the same column name again then we want
to sort the data in descending order
let's see how to achieve this let's flip
to visual studio this is the same
example that we worked with in the
previous video session at the moment we
have to select the name of the column
from this drop-down list by which we
want to sort this table data now we want
to make these column headers clickable
so clicking on a column name will sort
the data by that column so let's look at
the changes required let's slip two
Jet's to do so the first change that I
am going to do is for the controller
function that we have in script or J's
file at the moment to the scope object
we have attached this employee's array
and we have also attached a property
called sort column and we have
initialized that to the name property of
the employee object so in addition to
the short column property I'm also going
to attach another property and I'm going
to call it reverse sort that's going to
be a boolean property and I'm going to
initialize that to false and to the
scope object I am going to attach
another variable I'm going to call this
sort data this is going to be a function
which is going to provide this hot
capability so to this function I'm going
to pass the column name by which we want
to sort the data and then here I'm going
to change the rivers sort property value
that we have attached to the scope
object depending on the following
condition so I'm going to use a
conditional operator here if dollar
scope dot sort column is equal to column
if that condition is true then you know
I'm going to store the opposite of what
we already have
diversa sorte so I'm going to apply the
not operator here so if it has Falls in
it it's going to change it to true if it
has true in it then it's going to change
it to false okay else I'm going to set
that to false in a bit you will
understand the use of this reverse sort
property and then dollar scope dot sort
column equals whatever column we are
passing into this function and I'm going
to attach another property and I'm going
to call this get short class again this
is going to be a function even to this
function I'm going to pass the column
name by which we want to sort the data
and here I'm going to check if dollar
sort
I mean dollar scope dot sort column is
equal to column if that condition is
true I'm going to check return
dunno scope dot reverse sword okay if
the value within that reverse sword
property if we have true in that then we
want to sort the data in descending
order so in that case I'm going to
return a CSS class and the name of that
CSS class is going to be this arrow -
down so what is the purpose of this
arrow down class now when we apply this
class to a development this is going to
display a down arrow similarly when we
apply this arrow up class to a
development this is going to display an
upwards arrow indicating the direction
of sort look at this next to the date of
birth column we have this downward
pointing arrow indicating that this data
is sorted by date of birth column in
descending order so we get that icon
there using this arrow down CSS class to
get the up arrow we use arrow up CSS
class so here you know if the value that
we have in rivers sort is true that
means we want to sort the data in
descending order so at that point this
is the name of the class that we want to
return arrow down so let's copy that and
specify it right here else we want to
return the other one arrow up without
you know dot in front of it so we want
to return that class name let's remove
the dot from here okay so if sort column
you know Abdallah scope dot sort column
equals column you know we pass the
column name by which we want to sort the
data if that is the same as what is
already present in the scope object sort
column property then we are checking the
reverse sort property of the scope
object if that has a true value return
arrow down class else return arrow up
now if the column that we are passing to
this function is not equal to dollar
scope dot sort column then we are going
to return an empty string that way
what's going to happen is you know when
I click on this column name you know I
want to sort the data by this column but
we have the other columns for all those
other columns in this
table you know if it already has that
class applied you know that class will
be removed with the help of this empty
string okay that way this icon will ever
be present only on one column
you know the column by which we are
sorting the data either in ascending or
descending order okay so that's what the
sort class function going to do and sort
data all this is going to do is set the
relevant properties on the scope object
so it's going to set Traverse sort
depending on the value of the column by
which we want to sort the data so we are
checking if dollars group that short
column you know if that is equal to the
column by which we want to sort the data
then we want to change the value that is
already there in reverse or property to
the opposite value and that's the reason
why we are applying this not operator
here if this condition is not true then
it indicates that we are sorting by that
column for the first time okay so at
that point we want to sort the data in
the table in the ascending order hands
we are setting reverse sort to false and
then sort column will be the column by
which we want to sort the data that we
are passing to this function so pretty
straightforward functions there you know
we have only two lines of code with an H
function now let's see how we are going
to make use of these functions so let's
go to our HTML page one dot HTML which
is overview the first thing that I am
going to do here is remove this sort by
drop-down list from there so let's go
ahead and delete all that HTML we have
there and at this point when we reload
the data you know this is how the data
is present now we want to make these
column headers clickable so what I'm
going to do is I'm going to attach ng -
click attribute to the th element and
when we click you know on the table
header element we want to call this sort
data function so that it is going to
send reverse sort and sort column
properties of the scope object and then
we are going to use those two properties
to
this data that we have in the table okay
so let's go ahead and call that function
the name of the function is sort data
and to that function we need to pass the
name of the column so the name of the
column in this case is name and then
next to this name element we want to
display if we sort the data by that
column we want to display
you know upwards or downwards arrow
depending on the direction of sort to
get that arrow I'm going to use the
development and on this development I am
going to set ng class directive and we
are going to call the get sort class
function so let's call this get sort
class function and again to this
function we have to pass the name of the
column and the name of the column in
this case is name okay let's do the same
thing for the other three th elements
that we already have in the interest of
time I've already typed that code now
the change is going to be pretty much
similar to what we have done to the
first th column so I'm going to copy
these lines of code that we have in the
notepad and paste them right there okay
so for date of birth you know we're
calling sort data and reversing data
birth as the column name again for get
sort class date of birth same is the
case for gender and celery okay and then
right here at the moment we are only
using this hot column from the model we
also want to use that reverse sort
property which is basically going to
control whether we want to sort the data
in ascending or descending order so I am
going to specify that second parameter
right here what is that property that is
rivers sort so if we have true in that
the data will be sorted by this sort
column in ascending in descending order
if we have false in reverse sort then
the data will be sorted by sort column
in ascending order so those are the
changes that we need to do as for
is the view and you know the controller
functions are concerned let's save all
these changes and look at this when BD
load the first thing to notice is look
at that you know we can click on the
table header and look at that then I
click on the name column you know the
data is sorted now in ascending order
when I click on that again the data is
sorted in descending order we have the
icon but that's not displayed properly
that's one of the problems that we have
we want that icon to be displayed next
to the name column and the other
property and the other problem is we
want the pointer to turn to a hand
symbol indicating that you know we can
click on this table header we can
control those two things using CSS
properties so let's go to the Styles dot
CSS first of all you want to adjust you
know the alignment so that the image
comes next to the column name column
header to do that I'm going to set the
display property and I'm going to change
that to inline block I am going to apply
it to both the classes arrow up and
arrow down so let's save those changes
and I'm going to reload this page look
at that now you know it's displayed next
to the column header all right the other
thing that we want is we want to turn
the mouse cursor to pointer for that I'm
going to set cursor property on the th
element to pointer so when we move the
cursor over that th element it's going
to turn to a hand symbol okay look at
that now it turns to a hand symbol so
date of birth now in descending order
gender in ascending gender in descending
so all the columns are now sortable in
both the directions so here we have the
controller code here we have the view
code and here the styles that we have
applied thank you for listening and have
a great day