Create an editable dynamic table using Angular Material

Image for post
Image for post


So from the very beginning I decided to go with an abstract approach solution to make the table model dynamic and schema agnostic. For example, if one of the columns in the data model changed from ‘number’ to ‘date’ type then the table will respond dynamically and populate a date input field instead of a number field.

To achieve this we need couple of things from the data source (or back-end APIs):

  1. A list of data (duh!):

2. Data schema:

Note: this can be achieved by parsing the first row from the data list and figuring out types using JavaScript but I don’t advise doing so as it might lead to unexpected results specially with dates. This can be achieved much easier by the back-end as they have direct access to the database models and schema.

When the UI table consumes the data list and schema, we will get the following results:

As you can see in the above video, editing a row will change the field to a text input. Now let’s add a new date column ‘dateOfBirth’ with a ‘date’ type and change the ‘age’ schema to ‘number’ type:

The end results will look like this:

As demonstrated in the above video, and without any changes to the code, the same table was able to dynamically display the proper input field type based on the schema provided.

The actual implementation is not complex at all, so let’s get right into it and show you how it’s done! The repository is available at the very end of the article.


  1. Create a simple read-only Material table
  2. Create a dynamic table using a data schema
  3. Add edit row functionality
  4. Support more complex data types

1. Setup an Angular app with Material UI:

ng new angular-dynamic-table
ng add @angular/material

2. Create a simple read-only Material table:

Then, in the app.component.html file we will add the required columns and display the list from the dataSource property (USER_INFO).

2. Create a dynamic table using a data schema:

The first step is to loop through the columns and display them dynamically instead of hard coding each one.

The second step is to add the data schema to define each column type. In this example it will be ‘USER_SCHEMA’.

The last step is to add an HTML input field with dynamic ‘type’ attribute. We are going to use Material input field.

As you can see above (line 11), we added a Material input field with a dynamic ‘type’. The ‘type’ is determined by the ‘dataSchema’ object we defined earlier (USER_SCHEMA). Using the ‘col’ key we can easily get the input type (text, number, date..). Then, the HTML input will know which one to display as these types are all built in.

3. Add edit row functionality:

To achieve this, we first need to add an edit button for each row. This will require us to add a new column in the ‘displayColumns’ list. Let’s name it ‘$$edit’ so that we can distinguish between the internal props and the actual data.

Then let’s add a condition in the template to toggle between read-only and edit mode.

Quick summary:

  1. In line 6 we are hiding the ‘$$edit’ column name as we don’t need it showing on the table’s header.
  2. Line 11 and 19 controls which section to show based on the ‘isEdit’ value which by default will be ‘undefined’ (or false).
  3. In line 13 and 21, the button element will toggle the ‘isEdit’ prop and hence automatically adding it to the element’s object.

4. Support for more complex data types:

One approach to supporting more complex types can be by simply adding new conditions in the Angular template. For example, let’s assume we want to add the Material date element instead of the HTML built in one. To do so we can add a conditional block to check if the data type is ‘date’ otherwise use the default code we did earlier.

Same thing can be applied to any custom component.

You can access the full repository here. I hope you enjoyed learning from this article and if you have any questions, please leave a comment below.

Bye for now 😊

Originally published at on July 28, 2020.

UI architect and a JavaScript specialist with emphasis on efficiency, great user experience and pixel perfect applications.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store