How To Create a Simple table in Angular using mat-table

The Angular Material library provides a set of components for building tables in Angular applications. One of these components is the mat-table component, which allows you to display tabular data in a table format.

In this article, we’ll show you how to create a simple table in Angular using the mat-table component. We’ll cover the following topics:

1. Importing the necessary modules
2. Adding the table component to your template
3. Defining the table data
4. Adding pagination and sorting

Let’s get started!

Importing the necessary modules

To use the mat-table component in your Angular application, you will need to import the necessary modules. In the component or service where you want to use the table, add the following imports:

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

These imports will allow you to use the mat-table, mat-paginator, and mat-sort components in your template.

Adding the table component to your template

Next, you will need to add the mat-table component to your template. The mat-table component is a container for the table, and you can use it to define the structure and layout of the table.

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- Table columns go here -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Column 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
  </ng-container>

  <!-- Add additional columns as needed -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

The mat-table component includes a table element with a mat-table attribute. The [dataSource] attribute is used to bind the table to an array of data objects. The matSort attribute enables sorting for the table.

Inside the table element, you can define the columns for your table using the matColumnDef directive. Each column consists of a header cell and a data cell, which are defined using the mat-header-cell and mat-cell directives, respectively. The *matHeaderCellDef and *matCellDef structural directives are used to define the template for each cell.

You can also use the mat-sort-header directive to enable sorting for a specific column.

Finally, the mat-header-row and mat-row directives are used to define the template for the table header and rows, respectively. The *matHeaderRowDef and *matRowDef structural directives are used to define the template for each row.

Defining the table data

Next, you will need to define the data for your table. In your component or service, create a data source variable and assign it an array of data objects. For example:

dataSource = [
  { column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
  { column1: 'Value 4', column2: 'Value 5', column3: 'Value 6' },
  // Add additional rows as needed
];

displayedColumns: string[] = ['column1', 'column2', 'column3'];

The data source variable is an array of objects, with each object representing a row in the table. The displayedColumns variable is an array of strings that defines the columns to be displayed in the table.

Adding pagination and sorting

If you want to add pagination or sorting to your table, you can use the mat-paginator and mat-sort components. To do this, add the following components to your template:

<mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
<mat-sort (sortChange)="sortData($event)"></mat-sort>

The mat-paginator component allows you to add pagination to your table, while the mat-sort component enables sorting. The [pageSizeOptions] attribute defines the available page sizes, and the showFirstLastButtons attribute enables the first and last buttons for the paginator.

The mat-sort component includes a sortChange event that is emitted when the sort criteria changes. You can use this event to handle sorting in your component or service.

To handle the sortChange event and add pagination to your table, you will need to define a sortData() function and a paginator variable in your component or service.

paginator: MatPaginator;
sort: MatSort;

sortData(sort: MatSort) {
  // Sort the data based on the sort criteria
}

Finally, you will need to attach the paginator and sort variables to the mat-table component in your template.

<table mat-table [dataSource]="dataSource" matSort [matSort]="sort" class="mat-elevation-z8">
  <!-- Table columns go here -->
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Column 1 </th>
    <td mat-cell *matCellDef="let element"> {{element.column1}} </td>
  </ng-container>

  <!-- Add additional columns as needed -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25]" [length]="dataSource.length" [pageIndex]="0" [pageSize]="5" showFirstLastButtons></mat-paginator>

The mat-paginator component includes a length attribute that is used to bind to the length of the data source, a pageIndex attribute that is used to bind to the current page index, and a pageSize attribute that is used to bind to the page size.

By following these steps, you can create a simple table in Angular using the mat-table component. You can customize the table by adding additional columns or by modifying the appearance of the table using CSS.

I hope this helps! Let me know if you have any questions.