Sort and Filter a Table Using Angular

Chris Sevilleja
When building Angular applications, one of the cornerstones we will use is `ng-repeat`. Showing data is something that we do in applications like when we show a table of users or whatever other data we need to show our users. Today we'll be looking at a way to sort and filter our tabular data. This is a common feature that is always useful so let's look at what we'll be building and dive right into the code. Here's a quick demo: http://codepen.io/sevilayha/pen/AmFLE/ ## Sample Application Our application will allow us to: - Show a table of data (`ng-repeat`) - Sort by ascending or descending columns (`orderBy`) - Filter by using a search field (`filter`) These are three common functions in any application and Angular let's us implement these features in a very simple way. Let's set up our sample application's HTML and Angular parts and then look at how we can sort and filter. ## Setting Up We'll be using Bootstrap and Font Awesome to style our app. Let's take a look at the Angular module first. This will be a simple module with one controller where we define a few variables and the list of data we'll show to our users (we'll be using sushi, yum). The files we will need are: ```javascript - index.html - app.js ``` Our demo is built inside of CodePen, so you can create the two files above or just work within your own CodePen. Here is the code for `app.js` ```javascript // app.js angular.module('sortApp', []) .controller('mainController', function($scope) { $scope.sortType = 'name'; // set the default sort type $scope.sortReverse = false; // set the default sort order $scope.searchFish = ''; // set the default search/filter term // create the list of sushi rolls $scope.sushi = [ { name: 'Cali Roll', fish: 'Crab', tastiness: 2 }, { name: 'Philly', fish: 'Tuna', tastiness: 4 }, { name: 'Tiger', fish: 'Eel', tastiness: 7 }, { name: 'Rainbow', fish: 'Variety', tastiness: 6 } ]; }); ``` We have set the 3 variables and the list of sushi. Now let's use this module in our HTML. Here is the HTML we'll need for `index.html`: ```markup Angular Sort and Filter
Sort Type: {{ sortType }} Sort Reverse: {{ sortReverse }} Search Query: {{ searchFish }}
Sushi Roll Fish Type Taste Level
{{ roll.name }} {{ roll.fish }} {{ roll.tastiness }}
``` We are loading Bootstrap, Font Awesome, and Angular. We will also apply the Angular module named `sortApp` and the Angular controller called `mainController` to the `` tag. We are also using an ngRepeat to loop over the sushi in our `$scope.sushi` array we created in our Angular module. Our app will now look like the following: angular-sort-table Great. We have the list of data displayed all nicely for our users. Now let's offer them some functionality by letting them sort the table. ## Sorting the Table We will be accomplishing this sorting feature using two of the variables that we created earlier ( `$scope.sortType` and `$scope.sortReverse`). We will also be using the Angular orderBy filter. Basically, applying a combination of sortType and sortReverse variables to an orderBy clause in our `ng-repeat` will sort the table. Here's the line that we will add to our ng-repeat code from our `index.html` file: ```markup ... ... ``` That's all we need to change the sort order of our ng-repeat. If you refresh your page, you'll see that your list is sorted by `name` in normal order. Now go into your Angular module and change the sortType variable to `$scope.sortType = 'fish'` and refresh the page. You'll now see the table sorted by Fish Type. The next step is to change the headings of our table so that they will change the `sortType` variable. That will automatically sort our table without refreshing the page (as is the Angular way).

Making Table Headings Clickable

We'll be adding links to our table headings. Let's look at the `thead` section of our site and use `ng-click` to adjust the `sortType` variable. Here's the updated `thead` section inside of our `index.html`: ```markup ... Sushi Roll Fish Type Taste Level ... ``` Now as you click the links across your table headers, you'll see your table sorted since we are setting the `sortType` variable using `ng-click`. angular-sort-first-sort

Changing the Sort Order

Next up, we'll be adding a way to change the sort order so users can sort by ascending or descending. The orderBy filter arguments offer a third parameter for `reverse`. We just have to pass in true or false to change the sort order. Currently we have it set to `false` since we defined that as one of the variables earlier (`$scope.sortReverse`). The way we will give users the option to reverse the sort is to add `sortReverse = !sortReverse` in the `ng-click` of our table headers. This will change the order if users click the link. Here's an example of how that will look: ```markup ... ... ``` Just add that to all the other `ng-click`s in the code as well. Now if you click your header links, you'll see the sort order changing. This isn't very intuitive right now though since we don't provide any sort of visual feedback that the sort is changing. Let's add carets to show up and down to represent our current sort order. We'll add an up and down caret here and then use ngShow and ngHide to show and hide the caret based on order. We'll demonstrate on the first link, name: ```markup ... Sushi Roll ... ``` Now the up arrow will only show if `sortType` is name and `sortReverse` is set to true. Applying this to the other headers will give you the same effect. With a few Angular directives, we are now able to show proper feedback for sorting and for sort order. The last part of this tutorial will deal with filtering the table of data. ## Filtering the Table Filtering data in an `ng-repeat` is fairly easy since Angular also comes with the filter module. There are only two things we need to do here: create the form and apply the form variable to the ng-repeat. Let's create the form first. Above the code for the `table` and below the code for the `alert`, type the following: ```markup
``` A lot of that is Bootstrap markup to style our form beautifully, but the main line we need to worry about is the `input`. This is where we define our `ng-model` to adjust the searchFish variable. Now as we type into that input box, you should see that variable change in the alert box above. angular-sort-ng-model With that variable bound and ready to go, all we have to do is apply it to our `ng-repeat`. Here's the code for that: ```markup ... ... ``` Just like that, our filter will now be applied to the table. Go ahead and type into your filter box and see the table data change. You'll also notice that the orderBy and filter will work together to find you the exact sushi roll that you want. http://codepen.io/sevilayha/pen/AmFLE ## Conclusion Using some built in Angular tools like ngRepeat, orderBy, filter, ngClick, and ngShow, we've been able to build a clean and fast table of data. This is a great look at the power that Angular has in building some great functionality into your own applications without too much work.

Further Reading

For more Angular goodness, here's some other great articles: The Many Ways to Use ngClass Using ngShow and ngHide and Animating Them Single Page Animated Apps using ngView AngularJS Form Validation

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.