avatarRakia Ben Sassi

Summary

This context provides a tutorial on how to create an Angular inline-edit table like Excel without using a third-party library.

Abstract

The context discusses the implementation of an Angular inline-edit table that allows users to edit multiple cells simultaneously, similar to Excel. The tutorial aims to help frontend developers who are tasked with creating such features but are unsure of how to implement them without using a third-party library. The tutorial covers the setup of the Angular project, installation of Angular Material, and the necessary code changes to create the inline-edit table. The tutorial also includes a demonstration of the result and provides the complete code on GitHub. The tutorial concludes with a note on handling different cell types and an alert for users who enter the same value for cells with different types.

Bullet points

  • The tutorial aims to help frontend developers create an Angular inline-edit table like Excel without using a third-party library.
  • The tutorial covers the setup of the Angular project, installation of Angular Material, and the necessary code changes to create the inline-edit table.
  • The tutorial demonstrates the result of the implementation and provides the complete code on GitHub.
  • The tutorial concludes with a note on handling different cell types and an alert for users who enter the same value for cells with different types.
Angular Inline-Edit Table like Excel without Third Party Library

Web Development

Angular Inline-Edit Table Like Excel Without Third-Party Library

How to edit multiple table’s cells at the same time with Angular Material?

In the era of digitization, many users have migrated from Excel spreadsheets to modern web applications but they are still expecting to find the same features and functions that they have used for years with their old friend Excel. The bad news is that such expectation, which is out of the discussion, could be a nightmare for a frontend developer.

One of those very asked features is a data table that offers the possibility to inline edit multiple cells without a click on an edit-icon then open a dialog where the user has to enter the new value for the cells. Sometimes the developers choose to add a third party library that offers this function to the application because they don’t know how much time is needed to implement it on their own.

So, if you have a such requirement and you think you need a third party library, you will change your mind after reading this post. All that we need here is Angular and Angular Material. So, let’s get started.

You can check my video course on Udemy: How to Identify, Diagnose, and Fix Memory Leaks in Web Apps.

Project Setup

We are going to scaffold our app using the Angular CLI. First, we need to install it:

npm install -g @angular/cli

Then create our app:

ng new mat-edit-table
cd mat-edit-table

Code

Alright, time for the good stuff. We have to follow the next steps:

  • Install angular material:
npm install @angular/material
npm install @angular/cdk
npm install hammerjs
  • Import angular theme. Add this line to src/style.scss:
  • Update AppModule app.module.ts:
  • Replace the content of app.component.html with the following:
  • Replace the content of app.component.ts with the following:

This is the result after running “ng serve” and calling localhost:4200 with the browser:

Angular Material basic table
  • Now, we need to add the mousedown and mouseup events listeners to the editable cells. We want to edit just the cells from the columns name, weigh, and symbol.
  • As you have seen we’ve used 2 new CSS classes ‘selected’ and ‘unselected’ to show or hide a blue border around the selected cells depending on their states which are saved in the two dimensions array selectedCellsState.

Add keyup event listener. Update app.component.html by adding (keyup)=”onKeyUp($event)” event listener to the <table> tag and update app.component.ts:

  • By default the browser will add a blue background to the selected area. For a better UX, we will remove this default behavior after selecting cells:
Remove blue background from table’s cells

The complete code is available on github here.

One last thing

We have 2 different types of columns in our 1table: string and number. So, it will be awkward if the user selects cells from different columns and enter the same new value fro them. For this reason, the onMouseDown and onMouseUp methods have a third parameter cellsType. If the user starts to enter a value for cells with different types, he will receive an alert in a snackBar:

Show snackbar if selected cells have different types

That’s it for today. In the next article, I’ll export this table as an Angular Library to be able to re-use it in different projects by adding it to package.json just like other npm dependencies.

Want more?

I write about engineering, technology, and leadership for a community of smart, curious people 🧠💡. Join my free email newsletter for exclusive access or sign up for Medium here.

You can check my video course on Udemy: How to Identify, Diagnose, and Fix Memory Leaks in Web Apps.

JavaScript
Web Development
Software Development
Software Engineering
Programming
Recommended from ReadMedium