Components
Table
Angular Material Table presents data in a structured grid format, making it easy to read and compare information.
Example
Below is an example of how BuilderKit restyles the Angular Material Table and gives it a more modern appearance.
| Item | Description | ||||
|---|---|---|---|---|---|
ID | Pos. | Name | Progress | Fruit | |
| 1 | 1 | Asher A. | 39% | lime | |
| 2 | 2 | Amelia A. | 20% | mango | |
| 3 | 3 | Isabella J. | 27% | peach | |
| 4 | 4 | Amelia A. | 89% | lychee | |
| 5 | 5 | Isla I. | 85% | mango | |
| Please note that the cost of items displayed are completely and totally made up. | |||||
| The items are not for sale and are not available for purchase. | |||||
5
1 – 5 of 100
<table mat-table [dataSource]="dataSource" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="progress">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Progress</th>
<td mat-cell *matCellDef="let row">{{ row.progress }}%</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25]" />