Dynamic Mat Table Angular Library: Mat-Table Replacement
By: Akash Bavale
Tags: Angular 9, Table, Angular Material, Angular, Angular Elements

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.

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.

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

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:

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:

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:

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

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

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

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

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

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.