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.

Live Demo Here

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

dmat-table

And you can download the sample Angular application which uses this library :

bavaleakash/dmat-table-test

Now that we have everything setup, lets start:

The configuration object for this table is defined as below:

Configuration Object

This may look intimidating at first but is actually a simple object which will simplify our work.

1. Table Creation

dmat-table First Look

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

Include Table app.component.html

Simplest Configuration app.component.ts

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.

Getting Data app.component.ts

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.

app.service.ts

movies.ts

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 :)

Search

Also, Pagination is pre-equipped but defaults to 50. It can be configured by the object key: metadata.pagination

Pagination app.component.ts

Paginate

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:

Sort app.component.ts

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

Default Sorting

The Size of the table can be set using the metadata.dimentions. You can set height and width of the table using these keys.

Page Size app.component.ts

Adjust table size

3. Filters

Persisting filters

Filters can be applied to the table very easily. You can just alter the metadata.filter key as below:

Filters app.component.ts

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.

Headers for the filter

4. Color Bars

Red Color Bar for ‘R’ rated movies

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:

app.component.ts

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.

app.component.ts

navigation.component.ts

6. Column Value Color

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.

app.component.ts

7. Common (Corner) Buttons

corner buttons

If you need to add common corner buttons to the table you can just add the html snippets as shown below :

app.component.html

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

Row buttons can be added to every row and this can be enabled by enabling the metatadata.rowButtons by setting it to true

rowButtons enabled

Once this rowButtons property is enabled, you can add now rowButtons property to your data object

app.component.ts

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:

Angular Elements and NgZone; Dynamic Content-Projection Solution

9. Expansion Panel

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

Experimental: select all feature

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 ;)

Best movies that you cannot miss to watch - IMDb

That’s All Folks!