In this article, we will learn how to add Angular Material UI Table to your Angular Project. We would be using Material UI in all the Angular Table examples in this article.
Below you will see various Angular Tables, each with different features. So, let’s get right to it.
Prerequisite
- Create a basic Angular project (Create Angular Project)
Table of Content
- Install Angular Material UI Library
- Basic Angular Material UI Table
- Angular Table with Expanded Row
- Dynamically Populate Data Using Loop
- Angular Material UI Table Filter Example
- Angular Material UI Table Pagination Example
- Angular Material UI Table Sorting Column Example
- Adding Footer in Angular Material UI Table
- Adding Checkbox for Row Selection in Angular Material UI Table
Add Angular Material UI Table
What is Angular Material UI?
Material UI is a Library that developers can use for free in their projects. Material UI is a fast way of adding prebuilt modern UI components to your project.
They include components for Data Table, Drop Down, Form Fields, Nav Bar, etc. You can check out the Documentation here.
Install Angular Material UI Library
To install Angular Material UI, just open the project in your text editor i.e. VS Code, and in your terminal execute the below command:
It will ask you a bunch of questions, just hit enter on all of them.
Once done, you will need to add a few Material UI Modules in the app.module.ts file.
These modules are necessary for running the Angular Table example shown in this article.
Go to app.module.ts and import these modules then add them to the imports list as mentioned below.
Now you are ready to create all Angular Table examples.
Basic Angular Material UI Table
First this first, for every Angular Table example, I have created a new Angular Component. So do the same. To create a component named ‘MatTable1’, execute the following command:
Afterward, add the following code in the mat-table.component.html
Then add the following code in the mat-table.component.css
Then add the following code in the mat-table.component.ts
Finally, run the Angular project with the following command. The output should look like the image shown below:
Material UI Table: Angular Table with Expanded Row
Earlier we saw a basic implementation of Angular Table with material UI. Let’s make it a bit complex and implement an expandable row in Angular Table.
Create a new component named ‘MatTable2’
Add the following code in the mat-table2.component.html
Then add the following code in the mat-table2.component.css
Then add the following code in the mat-table2.component.ts
And you are done! Run the project and check out the Angular Table with expanded rows.
Material UI Table: Dynamically Populate Data Using Loop
Before we saw a static way to populate data in the angular table. In this Angular Table example, we will see how to dynamically populate data in the table using ngFor loop. Create a new component named ‘MatTable3’
Add the following code in the mat-table3.component.html
Then add the following code in the mat-table3.component.css
Then add the following code in the mat-table3.component.ts
The output should look exactly like the previous example.
Angular Material UI Table Filter Example
Now let’s look at the Angular Material UI table filter feature. Create another component named ‘MatTable4’.
Add the following code in the mat-table4.component.html
Then add the following code in the mat-table4.component.css
Then add the following code in the mat-table4.component.ts
The material UI table filter feature should look like the image below:
Angular Material UI Table Pagination Example
Let’s say we are dealing with a lot of data, and they need to be shown in the same table. Pagination makes total sense. Let’s see how to add material UI table pagination feature. Create another component named ‘MatTable5’
Add the following code in the mat-table5.component.html
Now add the following code in the mat-table5.component.css
Then add the following code in the mat-table5.component.ts
The material UI table pagination feature should look like the image below:
Angular Material UI Table Sorting Column Example
Now let’s have a look at how to sort table rows in ascending or descending order based on columns. Create another component named ‘MatTable6’
Now add the following code in the mat-table6.component.html
Now add the following code in the mat-table6.component.css
Then add the following code in the mat-table6.component.ts
The material UI table sorting rows feature should look like the image below:
Adding Footer in Angular Material UI Table
Next, from angular mat table examples, we will look at how to add a fixed footer to the table. The footer would be displaying some useful info. Create a new component named ‘MatTable7’.
Add the following code in the mat-table7.component.html
Now add the following code in the mat-table7.component.css
Then add the following code in the mat-table7.component.ts
The material UI table with a fixed footer example should look like the image below:
Adding Checkbox for Row Selection in Angular Material UI Table
Lastly, we will look at another important feature of adding a checkbox to the table. This would allow the user to select a specific row and fetch details from it.
Create another component named ‘MatTable8’. Add the following code in the mat-table8.component.html
Now add the following code in the mat-table8.component.css
Then dd the following code in the mat-table8.component.ts
The material UI table with checkbox selection feature example should look like the image below:
And that’s a wrap!
We just saw 8 different ways How to Add Angular Material UI Table. You may also want to read about Lazy Loading in Angular Projects and also How to create a dropdown in Angular. Please like, and leave your reviews in the comment section below.
Have a great one!
