Angular Dynamic Table

I developed a library to create fancy and complex tables dynamically and very rapidly.

Online Demo

Here you can find an online example how the dynamic table can be used:

NgxDynamicTable

What is it?

• Why: The table is a core element, and used almost on every page to display a list of data, which means without having a library or widget, you will have multiple tables and duplicate implementations. Actually the table functionalities are always the same, it defers only in design and content.
• Problem: If you have ever used the angular material table, you already faced to the problem, that only strings can be displayed dynamically inside of a cell. Of course you can add a component inside of your template, but this component will be displayed for each row, which means you will always see the same component in the cell for each data row. In other words it’s not possible to display different components for each data row in a cell.
• Solution: With the dynamic material table, it’s now very easy to create complex dynamic tables.

Features

• Add dynamically rendered components/html to the cells for each data row.
• Expandable rows up to 3 levels.
• Define column names and customized column ids.
• Pass data as an array into the table.
• 8 predefined common cells/columns, which can be overriden.
• Automatically group data by the given groups.
• Possibility to define table options for each defined group.
• Events based communication with the host component.
• Customize table style by overriding predefined/generated css classes.

Installation

npm install ngx-dynamic-material-table --save

Setup

Import DynamicTableModule and forRoot() to your module as shown below, where you want to use the table.

Tutorial

In this example we are going to create a complex table, where we can display a list of prescribed drugs, with a lot of columns, several groups, up to 3 levels expandable rows, several actions, different colors for several rows and cells, a customized style and several group options, see the picture below:

1. Create a new angular component i.e. DrugsListComponent or if you already have created a component, go to your component folder. Example component code:

2. Create inside the folder a new injectable angular service i.e in our example we’re going to name it drugs-expandable-table-data-provider.ts.

3. Extend your created data provider service by the class AbstractDynamicExpandableTableDataProvider<T>.

4. Change the generic <T> to your data type, you’re using in your data array i.e. <DrugModel> or a general <Object>.

5. Implement all inherited abstract functions from AbstractDynamicExpandableTableDataProvider i.e. see the code below for descriptions and explanations:

• At the end our example drugs expandable table data provider should look like in the code below:

• As you can see all groups are created inside of the table options and the logic how to group the data is defined there as well. i.e. in the first group we want to group all approved drugs, so we defined the following group expression: Group by the property ‘approval’ and it’s {‘operator’: ‘==’, ‘value’: DrugApprovalConstants.PENDING }
• Notice that we defined different column background colors for expanded rows and additionally in the table options individual cell background colors can also be defined.

Custom columns mapping with predefined columns

• As you can see in the picture above the predefined column “ADDITIONAL_INFO” is used to show the user icon, “HTML_CONTENT_SUMMARY” is used to display the name of the drug etc...

6. Go to your module where your drugs list component is declared, and define the DrugsExpandableTableDataProvider like in the code below, see especially the providers[] section:

7. Add to your component html template in our case drugs-list.component.html the following code snippet, notice that you can show or hide the filter:

<dynamic-expandable-table [showFilter]="false"></dynamic-expandable-table>

8. Theming: see the following code example how to use a customized style for your table. For our tutorial example open your drugs-list.component.scss file and add:

• To override the style you need to import the theming file: @import ‘../../../../../node_modules/ngx-dynamic-material-table/theming’;
• As you can see above you can easily override predefined columns for a row and set the column widths.
• Notice that for each defined expanded table columnId in the DrugsExpandableTableDataProvider, automatically a css class is generated, which you can override. See i.e. .expanded-item-column-**unittype** or .expanded-item-detail-column-**reason** classes above are generated and can be overriden for a customized style.

9. To handle actions or mouse events implement in your component i.e. in our example DrugsListComponent the generic interface UsingDynamicTableComponent<T> like in the code below:

• Notice that action, mouse over and out events are defined in the DrugsExpandableTableDataProvider using the DynamicTableUIUtils class.
• The actions and mouse events are published by the dynamic table and you can subscribe to the published events and handle them like in the code above.

g-sari/ngx-dynamic-table