Skip to content

chore(table): clean up demo pages #10669

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 19, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/demo-app/table/custom-table/custom-table.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<mat-card>
<h3> MatTable with Simple Columns </h3>

<mat-table [dataSource]="simpleTableDataSource"
<table mat-table [dataSource]="simpleTableDataSource"
matSort #simpleTableSort="matSort">
<!-- Basic column: name is used for header label AND data property -->
<simple-column name="name" sortable></simple-column>
Expand All @@ -13,9 +13,9 @@ <h3> MatTable with Simple Columns </h3>
<!-- Name doesn't match desired header text; define a custom label -->
<simple-column name="symbol" label="SYMBOL!"></simple-column>

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
</mat-table>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let data; columns: columnsToDisplay;"></tr>
</table>
</mat-card>


Expand All @@ -27,14 +27,14 @@ <h3> Wrapper Table </h3>
matSort #wrapperTableSort="matSort">
<!-- Name (normal column) -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<!-- Position (simple column) -->
<simple-column name="position"></simple-column>

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let row; columns: columnsToDisplay; "></mat-row>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay; "></tr>
</wrapper-table>
</mat-card>
7 changes: 4 additions & 3 deletions src/demo-app/table/custom-table/custom-table.scss
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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alphabetical order.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have a rule for css property order, actually

overflow: auto;
}
9 changes: 2 additions & 7 deletions src/demo-app/table/custom-table/simple-column.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,8 @@ import {MatColumnDef, MatTable} from '@angular/material';
selector: 'simple-column',
template: `
<ng-container matColumnDef>
<mat-header-cell *matHeaderCellDef mat-sort-header>
{{label || name}}
</mat-header-cell>

<mat-cell *matCellDef="let data">
{{getData(data)}}
</mat-cell>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{label || name}} </th>
<td mat-cell *matCellDef="let data"> {{getData(data)}}</td>
</ng-container>
`,
host: {
Expand Down
12 changes: 6 additions & 6 deletions src/demo-app/table/custom-table/wrapper-table.html
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>
8 changes: 6 additions & 2 deletions src/demo-app/table/custom-table/wrapper-table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,13 @@ import {SimpleColumn} from './simple-column';
selector: 'wrapper-table',
templateUrl: 'wrapper-table.html',
styles: [`
:host {
display: block;
width: 100%;
}

.mat-table {
height: 300px;
overflow: auto;
width: 100%;
}
`]
})
Expand Down
49 changes: 25 additions & 24 deletions src/demo-app/table/data-input-table/data-input-table.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@

<div class="demo-actions">
<strong>Data Changes: </strong>
<button mat-raised-button (click)="addRow()">Add Row</button>
<button mat-raised-button (click)="removeRow()">Remove Row</button>
<button mat-raised-button (click)="reassignDataClone()">Clone Data</button>
<button mat-raised-button (click)="addRow()"> Add Row </button>
<button mat-raised-button (click)="removeRow()"> Remove Row </button>
<button mat-raised-button (click)="reassignDataClone()"> Clone Data </button>
<button mat-raised-button (click)="shuffle()"> Shuffle </button>
</div>

<div class="demo-actions">
Expand All @@ -20,32 +21,32 @@
<button mat-raised-button (click)="this.removeDataSource()">Remove Data Source</button>
</div>

<mat-card>
<h3> CdkTable </h3>

<cdk-table #cdkTable [dataSource]="dataSourceInput">
<!-- Name (normal column) -->
<ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
<cdk-header-cell *cdkHeaderCellDef> {{column}} </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element[column]}} </cdk-cell>
</ng-container>
<div class="demo-actions">
<button mat-raised-button (click)="highlightFirstRow()"> Highlight first row </button>
</div>

<cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></cdk-header-row>
<cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></cdk-row>
</cdk-table>
</mat-card>
<div class="demo-actions">
<div class="demo-track-by-select">
<div class="demo-track-by-label">Track By</div>
<mat-radio-group [(ngModel)]="trackByStrategy">
<mat-radio-button [value]="'reference'"> Reference </mat-radio-button>
<mat-radio-button [value]="'position'"> Position </mat-radio-button>
<mat-radio-button [value]="'index'"> Index </mat-radio-button>
</mat-radio-group>
</div>
</div>

<mat-card>
<h3> MatTable </h3>
<h3> CdkTable </h3>

<mat-table #matTable [dataSource]="dataSourceInput">
<table cdk-table #cdkTable [dataSource]="dataSource" [trackBy]="trackBy">
<!-- Name (normal column) -->
<ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay">
<mat-header-cell *matHeaderCellDef> {{column}} </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
<ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
<th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
<td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
</ng-container>

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
<mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
</mat-table>
<tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
<tr cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></tr>
</table>
</mat-card>
18 changes: 5 additions & 13 deletions src/demo-app/table/data-input-table/data-input-table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,11 @@
margin-top: 24px;
}

mat-card {
margin: 8px 0;
}

cdk-table {
display: table;
width: 100%;

cdk-header-row, cdk-row {
display: table-row;
}
.demo-track-by-select {
display: flex;
align-items: center;

cdk-header-cell, cdk-cell {
display: table-cell;
.demo-track-by-label {
margin-right: 8px;
}
}
62 changes: 50 additions & 12 deletions src/demo-app/table/data-input-table/data-input-table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
import {Observable} from 'rxjs';
import {DataSource} from '@angular/cdk/collections';

export type TrackByStrategy = 'position' | 'reference' | 'index';

@Component({
moduleId: module.id,
templateUrl: 'data-input-table.html',
Expand All @@ -23,39 +25,71 @@ export class DataInputTableDemo {

inputType: 'source' | 'stream' | 'array' | null = 'array';
data = ELEMENT_DATA.slice();
tableDataSource = new MatTableDataSource(this.data);
matTableDataSource = new MatTableDataSource(this.data);

trackByStrategy: TrackByStrategy = 'reference';
trackBy = (index: number, item: Element) => {
switch (this.trackByStrategy) {
case 'position': return item.position;
case 'reference': return item;
case 'index': return index;
}
}

dataSourceInput: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;

@ViewChild(CdkTable) cdkTable: CdkTable<Element>;
@ViewChild(MatTable) matTable: MatTable<Element>;

changeInput(e: MatRadioChange) {
this.inputType = e.value;
switch (this.inputType) {
case 'array': this.dataSourceInput = this.data; break;
case 'stream': this.dataSourceInput = this.tableDataSource.connect(); break;
case 'source': this.dataSourceInput = this.tableDataSource; break;
case 'array': this.dataSource = this.data; break;
case 'stream': this.dataSource = this.matTableDataSource.connect(); break;
case 'source': this.dataSource = this.matTableDataSource; break;
}
}

addRow() {
this.data.push({name: 'new', weight: 0, symbol: 'New', position: 0});
this.tableDataSource.data = this.data;
this.data.push({
name: 'new',
weight: Math.floor(Math.random() * 25),
symbol: 'New',
position: Math.floor(Math.random() * 25)
});

this.matTableDataSource.data = this.data;
}

shuffle() {
let dataToShuffle = this.data.slice();
let currentIndex = dataToShuffle.length;
while (0 !== currentIndex) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// Swap
let temp = dataToShuffle[currentIndex];
dataToShuffle[currentIndex] = dataToShuffle[randomIndex];
dataToShuffle[randomIndex] = temp;
}

this.data = dataToShuffle;
this.matTableDataSource.data = dataToShuffle;
}

removeRow() {
this.data.pop();
this.tableDataSource.data = this.data;
this.matTableDataSource.data = this.data;
}

reassignDataClone() {
this.data = this.data.slice();

if (this.dataSourceInput instanceof Array) {
this.dataSourceInput = this.data;
if (this.dataSource instanceof Array) {
this.dataSource = this.data;
}
this.tableDataSource.data = this.data;
this.matTableDataSource.data = this.data;
}

renderRows() {
Expand All @@ -64,7 +98,11 @@ export class DataInputTableDemo {
}

removeDataSource() {
this.dataSourceInput = null;
this.dataSource = null;
this.inputType = null;
}

highlightFirstRow() {
document.querySelector('table tbody tr')!.setAttribute('style', 'background: red');
}
}
17 changes: 17 additions & 0 deletions src/demo-app/table/dynamic-columns/dynamic-columns.html
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>
43 changes: 43 additions & 0 deletions src/demo-app/table/dynamic-columns/dynamic-columns.ts
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;
}
}
}
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>
Loading