You: Multi-column sort, why do we even want it? We have simple sorting
Me: Because it will give you simple sorting along with some extra feature
You: Which extra features?
Me: Read below 🙂
What is a Multi-Column Sort?
Multi-column sort lets you sort columns one after another in such a way that the previous sort order does not get damaged by the next sort order.
Let’s understand it, with an example.
Let say you have this table:
Let’s say, you want a table with countries name in ascending order and with corresponding state rank in ascending order as well.
Therefore, in this operation:
- Sort by: Country, Order: Ascending and
- Then by: State rank, Order: Ascending
The results after applying the above operation would be.
Hence, in sorting, we only consider one column value at a time but in multi-column sort, we can consider multiple column values at a time.
Note: In multi-column sort, a sort of order made previously must not get damaged by the next sort orders.
Where to use Multi-column sort?
Multi-column Sort changes are visible when we have several duplicate values in the table. If we have unique values then we may not observe these changes.
I know it might seem little confusing, however, remember “In multi-column sort, a sort of order made previously must not get damaged by the next sort orders.” Try to observe this in the table.
How to achieve multi-column sort in AngularJS?
In AngularJS we have a filter “orderBy” and by using that we can implement multi-column sort easily.
In the table above, on “Table A” we can perform (Sort by: Name, order: Ascending) and we can achieve the following:
Then we get “Table B” as a result.
In “Table A” we can perform (Sort by: Name, order: Ascending and Then by: Age, order: Ascending), by this we obtain:
Hence, we get “Table C” as a result.
In the above cases, we have used the “+” sign for ascending order and “-” sign for descending order.
So, for implementing multi-column sort we simply have to push the column name into an array along with prefix, “+” and “-” as per the selected order, after which we assign that array value to “orderBy” filter.
Implementation of the multi-column sort in AngularJS
In the above sample,
You get to see a table and a button with name “multi-column sort”
When you click on button then modal (Dialogue box) opens
You can add or delete a row by clicking on “Add” and “Delete” button
On modal, you have to select the column name from the dropdown and corresponding order (we have implemented dropdown value in such way that the column you selected above will never appear in below dropdown)
Then click on Sort
Try to observe how values are changing.
For code visit my GitHub
To know how it is implemented, follow below steps. Every next step changes are highlighted.
The basic setup of the angular environment.
Create a table and pass values
Create a modal for column and order selection
Manage the dropdown values
Step 1: Create a html file (index.html) and JS file (script.js) as per AngularJS format.
Step 2: Create a table and pass column name values in array and Table values in object type.
Step 3: create a multicolumn sort button to open the modal and create the modal
Step 4: Inside the controller, we wright all function logic
For opening and closing the modal
For adding and deleting a row
For managing the dropdown
Step 5: Finally add the sorted column array with sign-in “orderBy” filter
References: Modal look
AngularJS has now been around for quite some time and has gained notable acclaim in the web development domain. AngularJS is apt for web enterprise development. This front end framework's focus mainly lies on code quality and testability, making it great for developers. Want to hire Angular Developers? Do visit us today.
Want to work abroad? Check out jobs in the USA here.