EdiTable — An editable table using Angular Material

A guide for creating an editable table in Angular with functionality to add new rows using Angular Material.

Frame courtesy — পদাতিক/The Guerrilla Fighter (1973)

Adding or editing a row in a table is a pretty common ask in websites. We have a basic table component in Angular Material but no ready-to-use component for the add/edit functionality. And that is precisely where this article comes in.

Prerequisites

• Angular Material needs to be included in the codebase. For help on including and theming, you can refer to this guide —
  Optimized Angular Material Setup
• We will be using the following Angular Material components which have to be imported in the module where the ediTable table component will reside — MatTableModule, MatTooltipModule, MatPaginatorModule, MatSidenavModule.
• I have referred to custom services and utilities that I use in my Angular applications. For an insight on how I work with APIs, you can refer to this article — Optimized Service/ API Integration for Angular

Focused Add/Edit design over inline editing

It is worth noting how, “how” to make that add/edit happen in web tables is more of a problem statement for UX than it is for Angular. Internet is pretty confused and like any other UX approach, this is a very subjective decision you need to take. Many threads suggest having an inline editing functionality but the side-effects that the outliers bring outweigh the positives. Hence, in the course of this article, we will develop the design which will focus on adding/editing a single row at a time.

Before we begin designing the add/edit, we will design the basic Angular Material table to match with the theme of our application.

Basic Angular Material table after theming

The design will have the following features —

1. Buttons for editing a single row will be visible after each row and the button for adding a new row will be placed after all the rows.

Edit buttons for each row and Add button after all the rows

2. On clicking the edit/add buttons, a drawer will come up with the form for editing the row or adding a new row.

Behavior after clicking add/edit buttons

3. For the “Edit Row” option, the fields will be pre-populated with the existing values and the primary key fields will be disabled. After the form is submitted and the API returns the updated data, the table will be updated and the updated row will be highlighted briefly for a few seconds.

Eg. In our sample table, Column A is the primary key.

Form for editing a row

Behavior on editing a row

4. For the “Add New Row” option, all the fields will be available for entering values in them. After the form is submitted and the API returns the updated data, the table will be updated and the newly added row will be highlighted briefly for a few seconds. Additionally, the pagination will automatically take the user to the page where the new row was added.

Form for adding a new row

Behavior on adding a new row

Integrating Logic

We will divide the code/logic into two parts —

1. The stand-alone table component that can be used across the application for all tables which will greatly reduce the boiler-plate code that we usually end up writing for tables in Angular Material.
2. The parent component which will house the add/edit forms unique for each of the tables along with their service integration.

Stand-alone table component

We will create a stand-alone component modhyobitto-table which will accept a configuration object as input from the parent component.

A sample configuration object is given below —

In return, this component will emit events when the user will click the add/edit buttons. These events will in turn be used by the parent component to display the forms and proceed with the update. As this component is common across the application, it will be declared inside the module for shared utilities.

Parent Component

In the parent component, we need to include the stand-alone table component selector along with the configuration as required. For our sample page, we will have a three column table with one column being a primary key and one being a numeric column.

For making the form appear (and disappear) as a part of the table, we will be using a Material drawer component to contain the form.

The parent component will contain the logic for responding to the edit/add triggers from the stand-alone table component and in return, will also trigger the resulting data update in the table.

Next Steps

You can refer to my Git repo for all the code. The working example in the sample application can be accessed from the “EdiTable” page —

Working example in sample application