Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(table): clean up demo pages (#10669)
* chore(table): clean up demo pages * fix errors * update row contexts * fix imports * fix aot
- Loading branch information
1 parent
3b7fe64
commit deedebd
Showing
29 changed files
with
374 additions
and
1,084 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,9 @@ | ||
.mat-table { | ||
height: 300px; | ||
overflow: auto; | ||
.mat-table, wrapper-table { | ||
width: 100%; | ||
} | ||
|
||
.mat-card { | ||
margin: 8px 0; | ||
height: 300px; | ||
overflow: auto; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
<mat-table [dataSource]="dataSource"> | ||
<table mat-table [dataSource]="dataSource"> | ||
<ng-content></ng-content> | ||
|
||
<!-- Weight Column --> | ||
<ng-container matColumnDef="weight"> | ||
<mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell> | ||
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell> | ||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th> | ||
<td mat-cell *matCellDef="let element"> {{element.weight}} </td> | ||
</ng-container> | ||
|
||
<!-- Color Column --> | ||
<ng-container matColumnDef="symbol"> | ||
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> | ||
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell> | ||
<th mat-header-cell *matHeaderCellDef> Symbol </th> | ||
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td> | ||
</ng-container> | ||
</mat-table> | ||
</table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<div class="demo-action"> | ||
<button mat-raised-button (click)="addColumn()"> Add column </button> | ||
<button mat-raised-button (click)="removeColumn()"> Remove column </button> | ||
<button mat-raised-button (click)="shuffle()"> Shuffle </button> | ||
</div> | ||
|
||
<mat-card> | ||
<table cdk-table [dataSource]="dataSource"> | ||
<ng-container cdkColumnDef="{{column}}" *ngFor="let column of definedColumns"> | ||
<th cdk-header-cell *cdkHeaderCellDef> {{column}} </th> | ||
<td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td> | ||
</ng-container> | ||
|
||
<tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr> | ||
<tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay;"></tr> | ||
</table> | ||
</mat-card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
/** | ||
* @license | ||
* Copyright Google LLC All Rights Reserved. | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://angular.io/license | ||
*/ | ||
|
||
import {Component} from '@angular/core'; | ||
import {Element, ELEMENT_DATA} from '../element-data'; | ||
|
||
@Component({ | ||
moduleId: module.id, | ||
templateUrl: 'dynamic-columns.html', | ||
}) | ||
export class DynamicColumnsDemo { | ||
definedColumns = ['name', 'weight', 'symbol', 'position']; | ||
columnsToDisplay = this.definedColumns.slice(); | ||
dataSource: Element[] = ELEMENT_DATA.slice(); | ||
|
||
addColumn() { | ||
const randomColumn = Math.floor(Math.random() * 4); | ||
this.columnsToDisplay.push(this.definedColumns[randomColumn]); | ||
} | ||
|
||
removeColumn() { | ||
if (!this.columnsToDisplay.length) { return; } | ||
this.columnsToDisplay.pop(); | ||
} | ||
|
||
shuffle() { | ||
let currentIndex = this.columnsToDisplay.length; | ||
while (0 !== currentIndex) { | ||
let randomIndex = Math.floor(Math.random() * currentIndex); | ||
currentIndex -= 1; | ||
|
||
// Swap | ||
let temp = this.columnsToDisplay[currentIndex]; | ||
this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex]; | ||
this.columnsToDisplay[randomIndex] = temp; | ||
} | ||
} | ||
} |
22 changes: 22 additions & 0 deletions
22
src/demo-app/table/mat-table-data-source/mat-table-data-source.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
<div class="demo-action"> | ||
<button mat-raised-button (click)="toggleFilterPredicate()"> Toggle filter predicate </button> | ||
Status: {{useOverrideFilterPredicate}} | ||
</div> | ||
|
||
<mat-card> | ||
<mat-form-field> | ||
<input #filter matInput placeholder="Filter"> | ||
</mat-form-field> | ||
|
||
<table mat-table [dataSource]="dataSource" matSort matSortActive="symbol" matSortDirection="asc"> | ||
<ng-container matColumnDef="{{column}}" *ngFor="let column of columns"> | ||
<th mat-header-cell mat-sort-header *matHeaderCellDef> {{column}} </th> | ||
<td mat-cell *matCellDef="let element"> {{element[column]}} </td> | ||
</ng-container> | ||
|
||
<tr mat-header-row *matHeaderRowDef="columns"></tr> | ||
<tr mat-row *matRowDef="let row; columns: columns;"></tr> | ||
</table> | ||
|
||
<mat-paginator [pageSize]="5" showFirstLastButtons></mat-paginator> | ||
</mat-card> |
Oops, something went wrong.