mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
chore(table): cleanup demo by moving to examples (#13576)
This commit is contained in:
Andrew Seguin
@@ -1,40 +0,0 @@
|
||||
<mat-card>
|
||||
<h3> MatTable with Simple Columns </h3>
|
||||
|
||||
<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>
|
||||
<simple-column name="position"></simple-column>
|
||||
|
||||
<!-- Name doesn't match the data property (or transform needed); define a custom data accessor -->
|
||||
<simple-column name="weight" [dataAccessor]="getWeight"></simple-column>
|
||||
|
||||
<!-- Name doesn't match desired header text; define a custom label -->
|
||||
<simple-column name="symbol" label="SYMBOL!"></simple-column>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
|
||||
<tr mat-row *matRowDef="let data; columns: columnsToDisplay;"></tr>
|
||||
</table>
|
||||
</mat-card>
|
||||
|
||||
|
||||
|
||||
<mat-card>
|
||||
<h3> Wrapper Table </h3>
|
||||
|
||||
<wrapper-table [dataSource]="wrapperTableDataSource" [columns]="columnsToDisplay"
|
||||
matSort #wrapperTableSort="matSort">
|
||||
<!-- Name (normal column) -->
|
||||
<ng-container matColumnDef="name">
|
||||
<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>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: columnsToDisplay; "></tr>
|
||||
</wrapper-table>
|
||||
</mat-card>
|
||||
@@ -1,9 +0,0 @@
|
||||
.mat-table, wrapper-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 8px 0;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
/**
|
||||
* @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, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatSort, MatTableDataSource} from '@angular/material';
|
||||
import {Element, ELEMENT_DATA} from '../element-data';
|
||||
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'custom-table-demo',
|
||||
templateUrl: 'custom-table.html',
|
||||
styleUrls: ['custom-table.css']
|
||||
})
|
||||
export class CustomTableDemo implements OnInit {
|
||||
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
|
||||
simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
||||
wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
||||
getWeight = (data: Element) => '~' + data.weight;
|
||||
|
||||
@ViewChild('simpleTableSort') simpleTableSort: MatSort;
|
||||
@ViewChild('wrapperTableSort') wrapperTableSort: MatSort;
|
||||
|
||||
ngOnInit() {
|
||||
this.simpleTableDataSource.sort = this.simpleTableSort;
|
||||
this.wrapperTableDataSource.sort = this.wrapperTableSort;
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
/**
|
||||
* @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 {DataSource} from '@angular/cdk/collections';
|
||||
import {
|
||||
AfterContentInit,
|
||||
Component,
|
||||
ContentChild,
|
||||
ContentChildren,
|
||||
Input,
|
||||
QueryList,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {MatColumnDef, MatHeaderRowDef, MatRowDef, MatTable} from '@angular/material';
|
||||
import {SimpleColumn} from './simple-column';
|
||||
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'wrapper-table',
|
||||
templateUrl: 'wrapper-table.html',
|
||||
styles: [`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
width: 100%;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class WrapperTable<T> implements AfterContentInit {
|
||||
/** Different ways the client can add column definitions */
|
||||
@ContentChildren(SimpleColumn) simpleColumns: QueryList<SimpleColumn<T>>;
|
||||
@ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
|
||||
|
||||
@ContentChild(MatHeaderRowDef) headerRowDef: MatHeaderRowDef;
|
||||
@ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
|
||||
|
||||
@ViewChild(MatTable) table: MatTable<T>;
|
||||
|
||||
@Input() columns: string[];
|
||||
|
||||
@Input() dataSource: DataSource<T>;
|
||||
|
||||
ngAfterContentInit() {
|
||||
// Register the simple columns to the table
|
||||
this.simpleColumns.forEach(simpleColumn => this.table.addColumnDef(simpleColumn.columnDef));
|
||||
|
||||
// Register the normal column defs to the table
|
||||
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
|
||||
|
||||
// Register any custom row definitions to the table
|
||||
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
||||
|
||||
// Register the header row definition.
|
||||
this.table.setHeaderRowDef(this.headerRowDef);
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
<div class="demo-actions">
|
||||
<strong>Input type: </strong>
|
||||
<mat-radio-group [value]="inputType" (change)="changeInput($event)">
|
||||
<mat-radio-button value="array">Array</mat-radio-button>
|
||||
<mat-radio-button value="stream">Stream</mat-radio-button>
|
||||
<mat-radio-button value="source">DataSource</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<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)="shuffle()"> Shuffle </button>
|
||||
</div>
|
||||
|
||||
<div class="demo-actions">
|
||||
<strong>Table: </strong>
|
||||
<button mat-raised-button (click)="this.renderRows()">Re-render</button>
|
||||
<button mat-raised-button (click)="this.removeDataSource()">Remove Data Source</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-actions">
|
||||
<button mat-raised-button (click)="highlightFirstRow()"> Highlight first row </button>
|
||||
</div>
|
||||
|
||||
<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> CdkTable </h3>
|
||||
|
||||
<table cdk-table #cdkTable [dataSource]="dataSource" [trackBy]="trackBy">
|
||||
<!-- Name (normal column) -->
|
||||
<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>
|
||||
|
||||
<tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
|
||||
<tr cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></tr>
|
||||
</table>
|
||||
</mat-card>
|
||||
@@ -1,12 +0,0 @@
|
||||
.demo-actions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.demo-track-by-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.demo-track-by-label {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/**
|
||||
* @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, ViewChild} from '@angular/core';
|
||||
import {Element, ELEMENT_DATA} from '../element-data';
|
||||
import {CdkTable} from '@angular/cdk/table';
|
||||
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,
|
||||
selector: 'data-input-table-demo',
|
||||
templateUrl: 'data-input-table.html',
|
||||
styleUrls: ['data-input-table.css'],
|
||||
})
|
||||
export class DataInputTableDemo {
|
||||
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
|
||||
|
||||
inputType: 'source' | 'stream' | 'array' | null = 'array';
|
||||
data = ELEMENT_DATA.slice();
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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.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: 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.matTableDataSource.data = this.data;
|
||||
}
|
||||
|
||||
reassignDataClone() {
|
||||
this.data = this.data.slice();
|
||||
|
||||
if (this.dataSource instanceof Array) {
|
||||
this.dataSource = this.data;
|
||||
}
|
||||
this.matTableDataSource.data = this.data;
|
||||
}
|
||||
|
||||
renderRows() {
|
||||
this.cdkTable.renderRows();
|
||||
this.matTable.renderRows();
|
||||
}
|
||||
|
||||
removeDataSource() {
|
||||
this.dataSource = null;
|
||||
this.inputType = null;
|
||||
}
|
||||
|
||||
highlightFirstRow() {
|
||||
document.querySelector('table tbody tr')!.setAttribute('style', 'background: red');
|
||||
}
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
export interface Element {
|
||||
position: number;
|
||||
name: string;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
export const ELEMENT_DATA: Element[] = [
|
||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
|
||||
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
|
||||
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
|
||||
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
|
||||
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
|
||||
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
|
||||
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
|
||||
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
|
||||
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
|
||||
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
|
||||
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
|
||||
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
|
||||
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
|
||||
];
|
||||
@@ -8,47 +8,10 @@
|
||||
|
||||
import {NgModule} from '@angular/core';
|
||||
import {TableDemo} from './table-demo';
|
||||
import {CustomTableDemo} from './custom-table/custom-table';
|
||||
import {
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatPaginatorModule,
|
||||
MatRadioModule,
|
||||
MatSlideToggleModule,
|
||||
MatSortModule,
|
||||
MatTableModule
|
||||
} from '@angular/material';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {CdkTableModule} from '@angular/cdk/table';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {WrapperTable} from './custom-table/wrapper-table';
|
||||
import {SimpleColumn} from './custom-table/simple-column';
|
||||
import {DataInputTableDemo} from './data-input-table/data-input-table';
|
||||
import {WhenRowsDemo} from './when-rows/when-rows';
|
||||
import {MaterialExampleModule} from '../example/example-module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MaterialExampleModule,
|
||||
CdkTableModule,
|
||||
MatTableModule,
|
||||
MatCardModule,
|
||||
MatPaginatorModule,
|
||||
MatSortModule,
|
||||
MatRadioModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
MatButtonModule,
|
||||
MatSlideToggleModule,
|
||||
],
|
||||
declarations: [
|
||||
CustomTableDemo,
|
||||
DataInputTableDemo,
|
||||
TableDemo,
|
||||
WrapperTable,
|
||||
SimpleColumn,
|
||||
WhenRowsDemo,
|
||||
],
|
||||
imports: [MaterialExampleModule],
|
||||
declarations: [TableDemo],
|
||||
})
|
||||
export class TableDemoModule { }
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
<material-example-list [ids]="examples"></material-example-list>
|
||||
|
||||
<custom-table-demo></custom-table-demo>
|
||||
|
||||
<data-input-table-demo></data-input-table-demo>
|
||||
|
||||
<when-rows-demo></when-rows-demo>
|
||||
@@ -12,7 +12,7 @@ import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
templateUrl: 'table-demo.html',
|
||||
template: '<material-example-list [ids]="examples"></material-example-list>',
|
||||
})
|
||||
export class TableDemo {
|
||||
examples = Object.keys(EXAMPLE_COMPONENTS)
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
<div>
|
||||
<button mat-raised-button (click)="shuffleArray()">Shuffle array</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button mat-raised-button (click)="changeRandomNumber()">Randomize</button>
|
||||
Highlighted rows: {{randomNumber}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-slide-toggle (change)="multiTemplateDataRows = $event.checked">
|
||||
Enable multiple data rows
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<mat-slide-toggle (change)="useTrackByValue = $event.checked">
|
||||
Enable track by value
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
|
||||
<mat-card>
|
||||
<h3> MatTable </h3>
|
||||
|
||||
<table mat-table style="width: 100%"
|
||||
[trackBy]="useTrackByValue ? trackByValue : undefined"
|
||||
[multiTemplateDataRows]="multiTemplateDataRows"
|
||||
[dataSource]="data">
|
||||
<!-- Data column -->
|
||||
<ng-container matColumnDef="data">
|
||||
<th mat-header-cell *matHeaderCellDef> Data </th>
|
||||
<td mat-cell *matCellDef="let data">
|
||||
{{data.value}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Index column -->
|
||||
<ng-container matColumnDef="index">
|
||||
<th mat-header-cell *matHeaderCellDef> Index </th>
|
||||
<td mat-cell *matCellDef="let data; let index = index">
|
||||
{{index}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Data index column -->
|
||||
<ng-container matColumnDef="dataIndex">
|
||||
<th mat-header-cell *matHeaderCellDef> Data Index </th>
|
||||
<td mat-cell *matCellDef="let data; let dataIndex = dataIndex">
|
||||
{{dataIndex}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Row Index column -->
|
||||
<ng-container matColumnDef="renderIndex">
|
||||
<th mat-header-cell *matHeaderCellDef> Render Index </th>
|
||||
<td mat-cell *matCellDef="let data; let renderIndex = renderIndex">
|
||||
{{renderIndex}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
|
||||
|
||||
<tr mat-row style="background: rgba(255, 0, 0, .2);"
|
||||
*matRowDef="let data; columns: columnsToDisplay; when: whenFn"></tr>
|
||||
<tr mat-row style="background: rgba(0, 255, 0, .2);"
|
||||
*matRowDef="let data; columns: columnsToDisplay;"></tr>
|
||||
</table>
|
||||
</mat-card>
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* @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, ViewChild} from '@angular/core';
|
||||
import {MatTable} from '@angular/material';
|
||||
|
||||
const DATA_LENGTH = 10;
|
||||
|
||||
export interface DemoDataObject {
|
||||
value: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'when-rows-demo',
|
||||
moduleId: module.id,
|
||||
templateUrl: 'when-rows.html',
|
||||
})
|
||||
export class WhenRowsDemo {
|
||||
columnsToDisplay = ['data', 'index', 'dataIndex', 'renderIndex'];
|
||||
data: DemoDataObject[] =
|
||||
(new Array(DATA_LENGTH) as DemoDataObject[]).fill({value: false}, 0, DATA_LENGTH);
|
||||
randomNumber = 0;
|
||||
multiTemplateDataRows = false;
|
||||
useTrackByValue = false;
|
||||
|
||||
whenFn = (_i: number, d: DemoDataObject) => d.value;
|
||||
trackByValue = (_i: number, d: DemoDataObject) => d.value;
|
||||
|
||||
@ViewChild(MatTable) table: MatTable<any>;
|
||||
|
||||
constructor() {
|
||||
this.changeRandomNumber();
|
||||
}
|
||||
|
||||
changeRandomNumber() {
|
||||
this.randomNumber = Math.floor(Math.random() * DATA_LENGTH);
|
||||
this.data = this.data.map((_d: DemoDataObject, i: number) => ({value: i < this.randomNumber}));
|
||||
if (this.table) {
|
||||
this.table.renderRows();
|
||||
}
|
||||
}
|
||||
|
||||
shuffleArray() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
|
||||
matSort #sort="matSort">
|
||||
<!-- Basic column: name is used for header label AND data property -->
|
||||
<simple-column name="name" sortable></simple-column>
|
||||
<simple-column name="position"></simple-column>
|
||||
|
||||
<!-- Name doesn't match the data property (or transform needed); define a custom data accessor -->
|
||||
<simple-column name="weight" [dataAccessor]="getWeight"></simple-column>
|
||||
|
||||
<!-- Name doesn't match desired header text; define a custom label -->
|
||||
<simple-column name="symbol" label="SYMBOL!"></simple-column>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let data; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
+47
-11
@@ -1,16 +1,52 @@
|
||||
/**
|
||||
* @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 {coerceBooleanProperty} from '@angular/cdk/coercion';
|
||||
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
|
||||
import {MatSortHeader} from '@angular/material/sort';
|
||||
import {MatColumnDef, MatTable} from '@angular/material/table';
|
||||
import {coerceBooleanProperty} from '@angular/cdk/coercion';
|
||||
import {
|
||||
MatColumnDef,
|
||||
MatSort,
|
||||
MatSortHeader,
|
||||
MatTable,
|
||||
MatTableDataSource
|
||||
} from '@angular/material';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
position: number;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
const ELEMENT_DATA: PeriodicElement[] = [
|
||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
|
||||
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
|
||||
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
|
||||
];
|
||||
|
||||
/**
|
||||
* @title Table with a custom column component for easy column definition reuse.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'table-simple-column-example',
|
||||
styleUrls: ['table-simple-column-example.css'],
|
||||
templateUrl: 'table-simple-column-example.html',
|
||||
})
|
||||
export class TableSimpleColumnExample implements OnInit {
|
||||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||
getWeight = (data: PeriodicElement) => '~' + data.weight;
|
||||
|
||||
@ViewChild('sort') sort: MatSort;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Column that shows simply shows text content for the header and row
|
||||
@@ -0,0 +1,3 @@
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<wrapper-table [dataSource]="dataSource" [columns]="displayedColumns"
|
||||
matSort #sort="matSort">
|
||||
<!-- Custom column definition to be provided to the wrapper table. -->
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Custom row definitions to be provided to the wrapper table. -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns; "></tr>
|
||||
</wrapper-table>
|
||||
@@ -0,0 +1,88 @@
|
||||
import {
|
||||
AfterContentInit,
|
||||
Component,
|
||||
ContentChildren,
|
||||
Input,
|
||||
OnInit,
|
||||
QueryList,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {
|
||||
MatColumnDef,
|
||||
MatHeaderRowDef,
|
||||
MatRowDef,
|
||||
MatSort,
|
||||
MatTable,
|
||||
MatTableDataSource
|
||||
} from '@angular/material';
|
||||
import {DataSource} from '@angular/cdk/collections';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
position: number;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
const ELEMENT_DATA: PeriodicElement[] = [
|
||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
|
||||
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
|
||||
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
|
||||
];
|
||||
|
||||
/**
|
||||
* @title Table example that shows how to wrap a table component for definition and behavior reuse.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'table-wrapped-example',
|
||||
styleUrls: ['table-wrapped-example.css'],
|
||||
templateUrl: 'table-wrapped-example.html',
|
||||
})
|
||||
export class TableWrappedExample implements OnInit {
|
||||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||
|
||||
@ViewChild('sort') sort: MatSort;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Table component that accepts column and row definitions in its content to be registered to the
|
||||
* table.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'wrapper-table',
|
||||
templateUrl: 'wrapper-table.html',
|
||||
styles: [`
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class WrapperTable<T> implements AfterContentInit {
|
||||
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
|
||||
@ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
|
||||
@ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
|
||||
|
||||
@ViewChild(MatTable) table: MatTable<T>;
|
||||
|
||||
@Input() columns: string[];
|
||||
|
||||
@Input() dataSource: DataSource<T>;
|
||||
|
||||
ngAfterContentInit() {
|
||||
this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
|
||||
this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
|
||||
this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
|
||||
}
|
||||
}
|
||||
+7
-1
@@ -1,6 +1,12 @@
|
||||
<table mat-table [dataSource]="dataSource">
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
<ng-content></ng-content>
|
||||
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="position">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="weight">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
|
||||
Reference in New Issue
Block a user