
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: