Make a Generic Angular Table. Filter, Sorting Preparation.

Common table with nice features.

In the previous part, we created a skeleton. Our table can handle different types of data. In this part we will check if it is true and we will add new features like sorting, filtration.

Different data

In our second table we will show information about elements.

New table settings

Table components need to have a new implementation of table settings to represent a new type of data. That it. Our table is ready for new data.

Improvements

Now we need to add filtration and sorting. I think it will be better to separate the table component into two. The first one contains all table logic. The second one will represent column logic. Column component has a couple of inputs for data and column settings. From column settings we need a data property name and column type to show the correct information in the right way. If in the future we need to add a new column template, we will add it here.

Sorting

In order to support sorting we need to add a couple new properties to TableColumnSettings — allowSorting and sortingType. By default base table settings class set it true.

In html we need to make our title clickable in order to change the sorting type and show what sorting is now.

We are not gonna write a sorting algorithm, we just prepare our table for this. Click handler is setting the right sorting type: none, ascending or descending.

Filtration

To support filtration we have to change a lot of things. First thing first model. Now we must have two models. First model we will use to set up column settings, second is a transformation of first with a couple of differences. Mostly it has some binding settings for filtration like filter text and allow filtration.

Html now is having a filtration row that row is binded to the table settings column and we’re gonna set filtration only after the user pressed an enter. Without a title margin value our column title will always be in the middle of it’s cell, it’s okay but when we have a filtration row the middle is changed now. This property keeps all table titles on the same visual level.

Set up settings table

For adding a filtration in table setting we just need an optional override method getFilterColumnSettings(). In base class it returns null. Let’s put it in your students table settings.

On the right part of the upper image we can see a couple enums that will give to users a choice of filtration selection. I think most of the users need only three filter options: contains, start with, end with for string and equal, less than, greater than for number and date those options are in the short list.

Column builder changes

Because we add new properties in our column settings model we need to change the class column builder. First we are now using map class, this class helps us find duplicates and prevent copy paste error.

After this we just add filter and sorting settings.

Result

Now our table is ready for ready and looks pretty. If you need to take a close look on project here is the link. The final step is to put logic for sorting and filtration. This could be your homework. You can easily put any logic outside of the table component, we have event emitters for that.

Originally published at http://tomorrowmeannever.wordpress.com on April 11, 2021.