Features

There are several features that are facilitated by Angular Material, in order to organize the content of the table in a specific order, along with dividing the large segments into pieces of small content with particular pages. The required features are described below:

Sorting

• Material Table provides a sorting feature on table headers. It can be implemented by adding matSort in the table.

<table mat-table matSort [dataSource]="data">

• Now, add mat-sort-header in the column header cell

<th mat-header-cell *matHeaderCellDef mat-sort-header> Column Name </th>

Please visit this article for more information about sorting.

Pagination

Angular Material provides pagination that can be added to tables for dividing large data into different pages. It can be implemented by adding <mat-paginator> at the bottom of the table.

<mat-paginator [pageSizeOptions]="[10, 50, 100]" 
                       [showFirstLastButtons]="true" 
                       [pageSize]="10">
</mat-paginator>

Filtering

Material Table also provides a way to filter the data in the table. It can be achieved by adding an input field and assigning the value of the input to the MatTableDataSource filter.

this.dataSource.filter = 'input text value';

We will see a detailed example below of how to filter using MatTableDataSource as a data source.

Angular Material is a UI component library for Angular to build customizable, responsive, and visually appealing web applications. It takes care of the UI so developers can focus only on core application functionalities. There are several main features, such as it provides numerous UI components out of the box like buttons, tables, tooltips, etc, along with facilitating multiple themes to customize colors, layout, and typography to match the brand. In Angular Material, its components implement ARIA standards to make them accessible, & it’s open-source, with an active community of developers maintaining it. 

Material Table is a data table to display data in tabular format. It can be created using <table mat-table>. It displays complex data in a visually simple format.