Create a Spreadsheet With Angular and Mat-Table

 

 

1*B7pYbVdS0aXE3bx1GS2xeQ

In this article, we are going through a complete example of how to use Angular and Angular Material to create a spreadsheet.

Mat-table

We are going to cover from how to create an angular project to how to delete a column or row and creating table cell tracker like Microsoft Office Excel. However, before I start, I would like to introduce myself.

I’m Mahmood H. Alnasser, a computer science senior student. I started working with Query.AI a few months ago. At Query.AI, we are committed to helping companies unlock the power of their
data, so they are empowered to lead with insight-driven strategy and decisions across the organization.

My first task assigned was to create a spreadsheet, and I would like to share my experience with everyone.

I picked Ron Swanson as a theme for my post because I will explain how to implement a spreadsheet with as little text as possible.

1*FO9JIWL5qniolatnI7ZZaw

 

TABLE OF CONTENTS

In this post, we will cover the following topics:

  • Create an Angular framework project.
  • Setup Angular Material.
  • Create Material Data Table.
  • Delete a column and row functionalities.
  • Create a column and row functionalities.
  • Implement inline cell editing.

 

Create an Angular framework project.

You'll need to have Nodejs and Angular. If you don't already, take a moment now through the links provided. The rest of us will go to refill our coffee mugs. When you’re ready, run this command.

1*iz6jV2XoyiorbTCEE1Nu8w

Now, you have your Angular project ready!

1*KUXnPqtMjSYrFL7Pt3TNRA

 

Run this command to run your project: http://localhost:4200/

1*0eKnLW5iM7x8wnarJyX-DQ

Our project is empty, sad, and most important, there is no spreadsheet. Let change this fact. It’s time to add Angular material to your project.

 

Setup Angular Material

To add Angular Material to the project, You can use either the npm or yarn command-line tool to install packages.

 

1*MbzlJgHtHAvgCO5jd2WuPwAdd Angular material using npm command-line tool

We will only use mat-table component. If you’re not familiar with Mat-table component. I will recommend you to familiarize yourself with it, before going further more.

 

Let’s start writing some codes

1. Start with modifying app.module.ts

2. Use material icons by adding this line to your index.html

3. Create some data

4.  Import necessary libraries to app.component.ts

5. Define a variable for headers name and another one for dataSource

After this step you app.component.ts should look like this:

6. It’s time to write some HTML.

Start with deleting everything inside app.component.html, then type this down! Oh no, do not copy it… TYPE IT.

7. Add some styling.

You should end up with something like this. It looks ugly but will do it!

1_bvaRwhf2bADlK3pHJmqCWw

Now, we will implement delete or add a row or a column functionality. I faced a hard time implementing this for the first time and I don’t want anyone else to suffer, too. So, let’s start.

1*sUVGN12mzD1e50AEHaT1BQ

Let’s start with implementing delete a column functionality. 

To delete a header, we need to delete the specific header from the displayedColumns, delete all data related to this header and modify headers’ names. If we decide to delete the first header for example:

1_BSFVGf5nERvlWhfi_4VzYw

Delete and modify headers’ name

1_q3Ac71vt0c77ix5dx5oRXQ

Delete all related data

I will start by adding buttons to every header and row:

The algorithm I developed to delete a header functionality:

If you implement this correctly, then your spreadsheet should look like this:

1*krMdbM36CMgo6HHkmOLcoQ

Now, let’s Implement add a row functionality:

We can add a row to the left or the right. I will only implement add a row to the left because:

1*OHkDTOADc6CA0OUfLoBDtA

To add a header we need to add a header to the left of the header we clicked on in displayedColumns, add a new cell to each header and modify headers’ names. If we decide to add a header to the left of the first header for example:

 

2

add a new header and modify headers names

 

3

add new cell

The algorithm I developed to add a header functionality:

If you implement this correctly, then your spreadsheet should look like this:

1*cqO3R_Ypjd88k6zE-mOJMQ

Now that we are completely done with header functionalities. It’s time to work with rows functionalities:

1*HxjnSderkk5GxWPqw89Sjw

Let’s add a row:

To delete a row, we delete an entire row from our dataSource. for example, if we decide to delete the second row:

4

The algorithm I developed to delete a row functionality:

If you implement this correctly, then your spreadsheet should look like this:

1*8jwVyCTNR5KzGJj_EC6R0g

Now, let’s Implement add a row functionality:

The algorithm I developed to delete a row functionality:

If you implement this correctly, then your spreadsheet should look like this:

1*pmrYwTQ8opaPRhcH-qNZmQ

Congrats! You finish 90 percent of the tutorial:

1*AuV21xNXYtSyK3vqzGVO0w

Time to implement Inline cell editing.

Will use an object to control which cell to switch to edit mode:

Start modifying the HTML:

Also, add the function switch to input:

If you implement this correctly, then your spreadsheet should look like this:

1*d17MNV2dtHS9lMgIFvyiKg

1*EDsp6kbOJw4Z-KcInBhNaA

Now, The spreadsheet is complete! I will leave one assignment for you to do. You can use Hostlistener to implement Excel like a directly editable table with moving around.

Bye

1*ApKfDUdlZaV1FSRj8j0YuQ

Thanks to Ferdinand Ramos. 

 

Did you enjoy this content? Follow our linkedin page!

 

Contact Us

If you like this content or have suggestions for other topics you’d like us to cover please let us know, we’d love to hear from you. You can reach us at contact@query.aiYou’re also free to follow us on linkedin and visit www.query.ai to subscribe to our updates.

Mahmood H. Alnasser

Written by Mahmood H. Alnasser

I got interested in the cybersecurity aspects of web development during my internship at Query.AI ( https://query.ai ). At Query.AI we are using Natural Language Processing to allow users to “talk to your data”. We are dedicated to making life easier for IT professionals with the use of automation and natural language.