Dynamic Mat Table Angular Library: Mat-Table Replacement
This is an attempt to create a dynamic table library for Angular and make it readily available for everyone. This extended mat-table library has been integrated with some great features. Extended Capabilities for your mean-fully static table, hope you like it!
Angular Material is one of the nice set of material components powered by Google and largely compatible with Angular. Mat-Table component is one of the frequently used components to display data in a tabular format. But, in my opinion, the simplicity is kind of lost on it. Hence, I have tried to create a simple library where you will be able to take advantage of all the features of mat table, extending it to new heights, excluding its complexity of configuration.
Note: Please have a look at the package.json if the library is not working for you somehow.
CSS Problems? make sure to include the default themes for angular, you can try: Include @import “~@angular/material/prebuilt-themes/indigo-pink.css” in main styles.css.
You can install the dmat-table library from here:
npm install dmat-table
And you can download the sample Angular application which uses this library :
Now that we have everything setup, lets start:
The configuration object for this table is defined as below:
This may look intimidating at first but is actually a simple object which will simplify our work.
- Table Creation
After installing the library you can quickly create the table using below keys:
headers: Actual names of the table headers.
keys: Corresponding keys of the headers defined.
metadata.tableHeading: Table header
showTable property is used to simulate a async call and display a loader before the table appears. updateTable is an important flag which can be toggled as and when the data for the table changes.
getTableData() gets the data and displays the data in the table, thereby simulating an async call. Here, we also toggle the updateFlag which will help our data to be reflected in the table as soon as it changes.
Bonus: You may have noticed how I get the data in the service from the ts file instead of a JSON file. The reason behind it is that when using json files in the angular library it will simply ignore them in the production build as it considers them as asset files and Angular ignores the asset files in the libraries by default, hence the workaround. Now I use this as a new normal regardless of the project type.
2. Search, Paginate, Sort and Table Size
As you may have noticed in the previous section that our table is already equipped with the Search functionality, you don’t have to do any thing else for it :)
Also, Pagination is pre-equipped but defaults to 50. It can be configured by the object key: metadata.pagination
Sorting can be added to any column, if you want a default column to have sorting you can modify the object key : metadata.sort.sortColumnHeader and metadata.sort.order as below:
The sortColumnHeader key takes values that are defined in the headers key array. The order key can be desc (Descending) or asc (Ascending). For Columns that have date in them, make sure you follow the proper date formats. Otherwise it will be interpreted as strings and may mess up the sorting logic
The Size of the table can be set using the metadata.dimentions. You can set height and width of the table using these keys.
3. Filters
Filters can be applied to the table very easily. You can just alter the metadata.filter key as below:
The filter.filterId can be used as the id for a particular filter in a component. This key can be stored in the session storage via the DmatTableService povided in the library and can be retrieved from the same service. The important use-case here can be that you can set these filters while navigating from a unrelated component and can be retrieved inside the table component.
The methods available for the DmatTableService are:
setFilter(key: string, data: any)
getFilter(key: string)
removeFilter(key: string)
Key is the filterId provided by you in the filterkey. data parameter for the setFilter is an array, in this case it can be set to [‘R’] to apply filter from the same component or any other component.
Here, filterColumnKey can be a string (single column) or an array (multiple columns), it is string from the keys key. The allFilters array have name and value attributes if it lacks the value key it will be considered as a heading for filters. For eg. in the above image Rating and Genre are filter headers.The filterBy attribute can be used for the default filters, if any.
4. Color Bars
A row can be bookmarked with a color bar just to indicate something. In above image we have indicated a ‘R’ rated movie with a red color bar. But for that we need to ingest our data object with a colorBar key as shown below:
Remember, colorBar key is an implicit key.
5. On Row Click Navigation
Same as colorbar we have another implicit key called onRowClickLink. Using this key you can navigate to either another component or an external website via the component. I have created a navigation.component.ts which is an angular component but navigates to an external website google.com in this case. Thus, it satisfies both component navigation and external link navigation.
6. Column Value Color
In case we need to indicate some value surpassing its threshold. Then we have have its color changed by changing the property key in data object. In our case we are changing IMDBRating key (For rating greater than or equal to 9) inside the data object and assign it as the following object:
{ value: string, color: string}
where value indicates its actual value and the color is the color string. Note that you can set any key to this value and change its color.
7. Common (Corner) Buttons
If you need to add common corner buttons to the table you can just add the html snippets as shown below :
Make sure you have mat-icon-button=”global-button” tag on your button tag, otherwise the buttons won’t be displayed. The concept it uses is called content projection
8. Row Buttons
Row buttons can be added to every row and this can be enabled by enabling the metatadata.rowButtons by setting it to true
Once this rowButtons property is enabled, you can add now rowButtons property to your data object
To understand this piece of code you need to have a better understanding of angular elements. You can check out the following piece of article:
9. Expansion Panel
This expansion panel is also an angular element thing so you can go to the same tutorial, where you can check out how you can implement this expansion panel. In order to enable the expansion panel you can pass the angular elements component using the isExpandComponent using the domSanitizer. Make sure you have the metadata.rowButtons key set to true.
There is one more feature that is experimental yet. The select all functionality as show below, will be improvised in the near future
These are all the features that I have implemented yet. Do let me know your reviews in the comments section. Happy coding!.
Off the topic, you may have noticed that the table consisted of movies, I being a movie buff! you can check out my favorite movie list too ;)
That’s All Folks!