The Table Component

In this lesson, we will explore how to display tabular data in our Angular applications with data tables. We can visualize data in an Angular component in different ways. An efficient way of getting a quick overview is by displaying it in a tabular format with rows and columns. However, we might need to sort data by columns to find the information we are looking for. Also, the amount of data might be so large that it needs to be shown in parts by page. Angular Material addresses all these issues by offering the following components:

• Table: Lays out data in rows and columns with headers.

• Sort table: Allows us to sort data in a table.

• Paginator: Allows us to slice up data in pages that we can navigate.

In the following sections, we learn more about the table component in detail.

Table

The table component allows us to display our data in columns and rows. To create a table, we first need to import MatTableModule from the @angular/material/table namespace.

An Angular Material table is a standard HTML <table> element that contains specific Angular directives to conform to the Material Design guidelines. To create the table initially, we use the mat-table directive: