mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Andrew Seguin
6499ccbb5c
* docs(table): initial table docs * add filtering msg * add overview * fix height * split cdk table into guide * revisions * add to examples * fix heading * example changes * lint * example style prefix, rename file * newline
36 lines
1.3 KiB
HTML
36 lines
1.3 KiB
HTML
<div class="example-container mat-elevation-z8">
|
|
<div class="example-header"> Users </div>
|
|
|
|
<md-table #table [dataSource]="dataSource">
|
|
|
|
<!--- Note that these columns can be defined in any order.
|
|
The actual rendered columns are set as a property on the row definition" -->
|
|
|
|
<!-- ID Column -->
|
|
<ng-container cdkColumnDef="userId">
|
|
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
|
|
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Progress Column -->
|
|
<ng-container cdkColumnDef="progress">
|
|
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
|
|
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container cdkColumnDef="userName">
|
|
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
|
|
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
|
|
</ng-container>
|
|
|
|
<!-- Color Column -->
|
|
<ng-container cdkColumnDef="color">
|
|
<md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
|
|
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
|
|
</ng-container>
|
|
|
|
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
|
|
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
|
|
</md-table>
|
|
</div> |