The mat-table attribute turns a standard HTML table into an Angular Material table. Bind its dataSource to the collection to display, then define the table's columns, headers, and cells. section 2.5
Bind a to-do list to a table
<table mat-table [dataSource]="items"> <ng-container matColumnDef="task"> <th mat-header-cell *matHeaderCellDef>Task</th> <td mat-cell *matCellDef="let item">{{ item.task }}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="['task']"></tr> <tr mat-row *matRowDef="let row; columns: ['task'];"></tr> </table> The square brackets bind the table's data source. Each ng-container groups a column definition, while the header and cell directives configure how that column is rendered. section 2.5
Configure the table through its template and data source:
- Define columns with matColumnDef, placing mat-header-cell and mat-cell elements inside an ng-container. section 2.5
- Use MatTableDataSource when application data feeds the table; refresh it when repository data changes. section 7.5.3
- Add MatPaginator and connect it to the data source when the product table needs pagination. section 7.5.3
Listing 2.17. Adding a table in the app.component.html file in the src/app folder
<mat-toolbar color="primary" class="mat-elevation-z3">
<span class="spacer"></span>
<span>{{ username }}'s To Do List</span>
<span class="spacer"></span>
<mat-icon matBadge="{{ itemCount }}" matBadgeColor="accent">
checklist
</mat-icon>
</mat-toolbar>
<div class="tableContainer">
<table mat-table [dataSource]="items"
class="mat-elevation-z3 fullWidth">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let i = index"> {{ i + 1 }} </td>
</ng-container>
<ng-container matColumnDef="task">
<th mat-header-cell *matHeaderCellDef>Task</th>
<td mat-cell *matCellDef="let item"> {{ item.task }} </td>
</ng-container>
<ng-container matColumnDef="done">
<th mat-header-cell *matHeaderCellDef>Done</th>
<td mat-cell *matCellDef="let item"> {{ item.complete }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['id', 'task', 'done']"></tr>
<tr mat-row *matRowDef="let row; columns: ['id', 'task', 'done'];">
</tr>
</table>
</div>
Inspect the complete to-do-list template, including the data binding, column definitions, and row declarations. section 2.5
Listing 7.29. The productTable.component.html file in the src/app/admin folder
<table mat-table [dataSource]="dataSource">
<mat-text-column name="id"></mat-text-column>
<mat-text-column name="name"></mat-text-column>
<mat-text-column name="category"></mat-text-column>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef>Price</th>
<td mat-cell *matCellDef="let item">
{{item.price | currency:"USD"}}
</td>
</ng-container>
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let p">
<button mat-flat-button color="accent"
(click)="deleteProduct(p.id)">
Delete
</button>
<button mat-flat-button color="warn"
[routerLink]="['/admin/main/products/edit', p.id]">
Edit
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="colsAndRows"></tr>
<tr mat-row *matRowDef="let row; columns: colsAndRows"></tr>
</table>
<button mat-flat-button color="primary"
routerLink="/admin/main/products/create">
Create New Product
</button>
Compare a product table that combines text columns with custom price and action columns. section 7.5.3
