@@ -5,20 +5,20 @@ <h2>Basic Table</h2>
55 < mat-table aria-readonly ="true "
66 [dataSource] ="basicDataSource "
77 aria-label ="Users favorite colors and age ">
8- < ng-container cdkColumnDef ="name ">
9- < mat-header-cell *cdkHeaderCellDef > Name</ mat-header-cell >
10- < mat-cell *cdkCellDef ="let row "> {{row.name}}</ mat-cell >
8+ < ng-container matColumnDef ="name ">
9+ < mat-header-cell *matHeaderCellDef > Name</ mat-header-cell >
10+ < mat-cell *matCellDef ="let row "> {{row.name}}</ mat-cell >
1111 </ ng-container >
12- < ng-container cdkColumnDef ="color ">
13- < mat-header-cell *cdkHeaderCellDef > Color</ mat-header-cell >
14- < mat-cell *cdkCellDef ="let row "> {{row.color}}</ mat-cell >
12+ < ng-container matColumnDef ="color ">
13+ < mat-header-cell *matHeaderCellDef > Color</ mat-header-cell >
14+ < mat-cell *matCellDef ="let row "> {{row.color}}</ mat-cell >
1515 </ ng-container >
16- < ng-container cdkColumnDef ="age ">
17- < mat-header-cell *cdkHeaderCellDef > Age</ mat-header-cell >
18- < mat-cell *cdkCellDef ="let row "> {{row.age}}</ mat-cell >
16+ < ng-container matColumnDef ="age ">
17+ < mat-header-cell *matHeaderCellDef > Age</ mat-header-cell >
18+ < mat-cell *matCellDef ="let row "> {{row.age}}</ mat-cell >
1919 </ ng-container >
20- < mat-header-row *cdkHeaderRowDef ="displayedColumns "> </ mat-header-row >
21- < mat-row *cdkRowDef ="let row; columns: displayedColumns; "> </ mat-row >
20+ < mat-header-row *matHeaderRowDef ="displayedColumns "> </ mat-header-row >
21+ < mat-row *matRowDef ="let row; columns: displayedColumns; "> </ mat-row >
2222 </ mat-table >
2323 </ section >
2424
@@ -30,20 +30,20 @@ <h2>Sortable Table</h2>
3030 aria-readonly ="true "
3131 matSort matSortActive ="age "
3232 matSortDirection ="asc ">
33- < ng-container cdkColumnDef ="name ">
34- < mat-header-cell *cdkHeaderCellDef > Name</ mat-header-cell >
35- < mat-cell *cdkCellDef ="let row "> {{row.name}}</ mat-cell >
33+ < ng-container matColumnDef ="name ">
34+ < mat-header-cell *matHeaderCellDef > Name</ mat-header-cell >
35+ < mat-cell *matCellDef ="let row "> {{row.name}}</ mat-cell >
3636 </ ng-container >
37- < ng-container cdkColumnDef ="color ">
38- < mat-header-cell *cdkHeaderCellDef > Color</ mat-header-cell >
39- < mat-cell *cdkCellDef ="let row "> {{row.color}}</ mat-cell >
37+ < ng-container matColumnDef ="color ">
38+ < mat-header-cell *matHeaderCellDef > Color</ mat-header-cell >
39+ < mat-cell *matCellDef ="let row "> {{row.color}}</ mat-cell >
4040 </ ng-container >
41- < ng-container cdkColumnDef ="age ">
42- < mat-header-cell *cdkHeaderCellDef mat-sort-header > Age</ mat-header-cell >
43- < mat-cell *cdkCellDef ="let row "> {{row.age}}</ mat-cell >
41+ < ng-container matColumnDef ="age ">
42+ < mat-header-cell *matHeaderCellDef mat-sort-header > Age</ mat-header-cell >
43+ < mat-cell *matCellDef ="let row "> {{row.age}}</ mat-cell >
4444 </ ng-container >
45- < mat-header-row *cdkHeaderRowDef ="displayedColumns "> </ mat-header-row >
46- < mat-row *cdkRowDef ="let row; columns: displayedColumns; "> </ mat-row >
45+ < mat-header-row *matHeaderRowDef ="displayedColumns "> </ mat-header-row >
46+ < mat-row *matRowDef ="let row; columns: displayedColumns; "> </ mat-row >
4747 </ mat-table >
4848 </ section >
4949
@@ -53,20 +53,20 @@ <h2>Paginated Table</h2>
5353 < mat-table [dataSource] ="paginatedDataSource "
5454 aria-readonly ="true "
5555 aria-label ="Users favorite colors and age ">
56- < ng-container cdkColumnDef ="name ">
57- < mat-header-cell *cdkHeaderCellDef > Name</ mat-header-cell >
58- < mat-cell *cdkCellDef ="let row "> {{row.name}}</ mat-cell >
56+ < ng-container matColumnDef ="name ">
57+ < mat-header-cell *matHeaderCellDef > Name</ mat-header-cell >
58+ < mat-cell *matCellDef ="let row "> {{row.name}}</ mat-cell >
5959 </ ng-container >
60- < ng-container cdkColumnDef ="color ">
61- < mat-header-cell *cdkHeaderCellDef > Color</ mat-header-cell >
62- < mat-cell *cdkCellDef ="let row "> {{row.color}}</ mat-cell >
60+ < ng-container matColumnDef ="color ">
61+ < mat-header-cell *matHeaderCellDef > Color</ mat-header-cell >
62+ < mat-cell *matCellDef ="let row "> {{row.color}}</ mat-cell >
6363 </ ng-container >
64- < ng-container cdkColumnDef ="age ">
65- < mat-header-cell *cdkHeaderCellDef > Age</ mat-header-cell >
66- < mat-cell *cdkCellDef ="let row "> {{row.age}}</ mat-cell >
64+ < ng-container matColumnDef ="age ">
65+ < mat-header-cell *matHeaderCellDef > Age</ mat-header-cell >
66+ < mat-cell *matCellDef ="let row "> {{row.age}}</ mat-cell >
6767 </ ng-container >
68- < mat-header-row *cdkHeaderRowDef ="displayedColumns "> </ mat-header-row >
69- < mat-row *cdkRowDef ="let row; columns: displayedColumns; "> </ mat-row >
68+ < mat-header-row *matHeaderRowDef ="displayedColumns "> </ mat-header-row >
69+ < mat-row *matRowDef ="let row; columns: displayedColumns; "> </ mat-row >
7070 </ mat-table >
7171 < mat-paginator #paginator
7272 [length] ="6 "
0 commit comments