Create an editable dynamic table using Angular Material

Introduction:

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.

Overview:

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

3. 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.

4. 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 for now but it could be anything as long as it does not conflict with other column names.

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.

5. Support for more complex data types:

One approach to supporting more complex types is by simply adding new conditions in the Angular template. For example, let’s assume we want to add a Material date element instead of the HTML built-in one. To do so, we can add ngSwitch statements to support date and potentially other types that can be added in the future.

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 😊

For more related articles, you can visit my site or signup for the latest articles and updates.

Originally published at https://muhimasri.com on July 28, 2020.

UI architect and JavaScript specialist with emphasis on efficiency and great user experience. https://muhimasri.com

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