Angular Material Table provides a Material Design styled data-table that can be used to display rows of data. Tables in angular material design can be implemented by just adding the mat-table selector to your table component and passing in data. Material Table provides a lot of table data features like sorting, filtering, pagination etc which helps a user to provide a more interactive view of the data table. To implement an angular material table follow the steps below:
- The first step is to add mat-table selector in the table component as
<table mat-table></table>
Also, add MatTableModule to the imports in the module file of your application. Best way to pass the data in the material table is by passing an array of data to the table’s [dataSource] input. The table will render all the data as a row for each object in the array.
<table mat-table [dataSource]="arrayOfData"></table>
2. The next step is to write the table’s column template. The table column definition should have a unique name and contain the content for the column.
<ng-container matColumnDef="nameOfColumn">
<th *matHeaderCellDef mat-header-cell>Name of Column</th>
<td *matCellDef="let element" mat-cell>{{element.columnName}}</td>
</ng-container>
3. Finally, when you have defined all the columns of the table, it is required to specify which column will be rendered in the header and data rows respectively.
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
Features:
A lot of other features are there in the angular material table which can enhance the user experience for the table.
1.Pagination: This feature provides us pagination which helps to view a large amount of data conveniently. To add pagination in a table just add <mat-paginator></mat-paginator> tag after the table. Also, add MatPaginatorModule to the imports in the module file of your application. You can also provide page size option in the material table in the following way:
<mat-paginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
2. Sorting: To add sorting feature in the material table just add matSort in mat-table and mat-sort-header on the header cell which you want to allow sorting. Also, add MatSortModule to the imports in the module file of your application.
<th *matHeaderCellDef mat-header-cell mat-sort-header>Name of Column</th>
3. Filtering: Angular Material does not provide a specific component to be used for filtering the MatTable since there is no single common approach to adding a filter UI to table data. If you are using the, MatTableDataSource simply provide the filter string to it.
this.arrayOfData.filter = filterValue.trim().toLowerCase();
4. Footer Row: A footer row can be added to the table by adding a footer row definition to the table as
<tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>and adding footer cell templates to column definitions as
<td mat-footer-cell *matFooterCellDef> Name/Value of footer </td>
Note: The footer row will be rendered after the data rows.
5. Sticky Rows and Columns: The table’s rows and columns can be fixed so that they do not leave the viewport even when scrolled. This can be fixed by using position: sticky styling.
A column can be fixed as
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
A row can be fixed by adding sticky to the column definition as
<ng-container matColumnDef="name" sticky>
A footer can also be fixed as
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
Caution: Don’t forgot to add @angular/material module to the project using the command:
ng add @angular/material
The use of the tables in angular material design, as shown above with various customizations offers for a much better UI experience.
For full code, please visit https://github.com/knoldus/angular-material-table-full-features
References:
https://material.angular.io/components/table
