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
dmat-table
Dynamic Material table for Angular
And you can download the sample Angular application which uses this library :
bavaleakash/dmat-table-test
Demo Project which uses dmat-table library
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.
- 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.
#angular-elements #angular-9 #angular #angular-material #table
