skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update table examples (#11112)

Browse Source
This commit is contained in:
Andrew Seguin
2018-05-09 11:38:05 -07:00
committed by Jeremy Elbourn
parent 714f0652e5
commit 8c16f0103c
47 changed files with 598 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/table/custom-table/custom-table.ts
+4 -4
View File
@@ -8,7 +8,7 @@
import {Component, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource} from '@angular/material';
import {Element, ELEMENT_DATA} from '../element-data';
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
@Component({
@@ -18,9 +18,9 @@ import {Element, ELEMENT_DATA} from '../element-data';
})
export class CustomTableDemo {
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
getWeight = (data: Element) => '~' + data.weight;
simpleTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
wrapperTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
getWeight = (data: PeriodicElement) => '~' + data.weight;
@ViewChild('simpleTableSort') simpleTableSort: MatSort;
@ViewChild('wrapperTableSort') wrapperTableSort: MatSort;
src/demo-app/table/data-input-table/data-input-table.ts
+7 -5
View File
@@ -7,7 +7,7 @@
*/
import {Component, ViewChild} from '@angular/core';
import {Element, ELEMENT_DATA} from '../element-data';
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
import {CdkTable} from '@angular/cdk/table';
import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
import {Observable} from 'rxjs';
@@ -28,7 +28,7 @@ export class DataInputTableDemo {
matTableDataSource = new MatTableDataSource(this.data);
trackByStrategy: TrackByStrategy = 'reference';
trackBy = (index: number, item: Element) => {
trackBy = (index: number, item: PeriodicElement) => {
switch (this.trackByStrategy) {
case 'position': return item.position;
case 'reference': return item;
@@ -36,10 +36,12 @@ export class DataInputTableDemo {
}
}
dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
dataSource: DataSource<PeriodicElement> |
Observable<PeriodicElement[]> |
PeriodicElement[] | null = this.data;
@ViewChild(CdkTable) cdkTable: CdkTable<Element>;
@ViewChild(MatTable) matTable: MatTable<Element>;
@ViewChild(CdkTable) cdkTable: CdkTable<PeriodicElement>;
@ViewChild(MatTable) matTable: MatTable<PeriodicElement>;
changeInput(e: MatRadioChange) {
this.inputType = e.value;
src/demo-app/table/dynamic-columns/dynamic-columns.ts
+2 -2
View File
@@ -7,7 +7,7 @@
*/
import {Component} from '@angular/core';
import {Element, ELEMENT_DATA} from '../element-data';
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
@Component({
moduleId: module.id,
@@ -16,7 +16,7 @@ import {Element, ELEMENT_DATA} from '../element-data';
export class DynamicColumnsDemo {
definedColumns = ['name', 'weight', 'symbol', 'position'];
columnsToDisplay = this.definedColumns.slice();
dataSource: Element[] = ELEMENT_DATA.slice();
dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
addColumn() {
const randomColumn = Math.floor(Math.random() * 4);
src/demo-app/table/element-data.ts
+2 -2
View File
@@ -6,14 +6,14 @@
* found in the LICENSE file at https://angular.io/license
*/
export interface Element {
export interface PeriodicElement {
position: number;
name: string;
weight: number;
symbol: string;
}
export const ELEMENT_DATA: Element[] = [
export 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'},
src/demo-app/table/expandable-rows/expandable-rows.ts
+2 -2
View File
@@ -7,7 +7,7 @@
*/
import {Component, ViewChild} from '@angular/core';
import {Element, ELEMENT_DATA} from 'table/element-data';
import {PeriodicElement, ELEMENT_DATA} from 'table/element-data';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
@@ -48,7 +48,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
export class ExpandableRowsDemo {
dataSource = new MatTableDataSource(ELEMENT_DATA.slice());
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
expandedElement: Element;
expandedElement: PeriodicElement;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
src/demo-app/table/mat-table-data-source/mat-table-data-source.ts
+3 -3
View File
@@ -8,7 +8,7 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {Element, ELEMENT_DATA} from '../element-data';
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
import {fromEvent} from 'rxjs';
@Component({
@@ -21,7 +21,7 @@ import {fromEvent} from 'rxjs';
})
export class MatTableDataSourceDemo {
columns = ['name', 'weight', 'symbol', 'position'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
// Add button that lets you override the filter predicate with a strict name match
originalFilterPredicate = this.dataSource.filterPredicate;
@@ -41,7 +41,7 @@ export class MatTableDataSourceDemo {
toggleFilterPredicate() {
this.useOverrideFilterPredicate = !this.useOverrideFilterPredicate;
this.dataSource.filterPredicate = this.useOverrideFilterPredicate ?
(d: Element, filter: string) => d.name.indexOf(filter) != -1 :
(d: PeriodicElement, filter: string) => d.name.indexOf(filter) != -1 :
this.originalFilterPredicate;
}
}
src/demo-app/table/table-demo.ts
+2 -2
View File
@@ -7,7 +7,7 @@
*/
import {Component} from '@angular/core';
import {Element, ELEMENT_DATA} from './element-data';
import {PeriodicElement, ELEMENT_DATA} from './element-data';
@Component({
moduleId: module.id,
@@ -26,5 +26,5 @@ import {Element, ELEMENT_DATA} from './element-data';
})
export class TableDemo {
columns = ['name', 'weight', 'symbol', 'position'];
dataSource: Element[] = ELEMENT_DATA.slice();
dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
}
src/demo-app/table/when-rows/when-rows.ts
+1
View File
@@ -16,6 +16,7 @@ export interface DemoDataObject {
}
@Component({
selector: 'when-rows-demo',
moduleId: module.id,
templateUrl: 'when-rows.html',
})
src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
+10
View File
@@ -0,0 +1,10 @@
/**
* Add basic flex styling so that the cells evenly space themselves in the row.
*/
cdk-row, cdk-header-row, cdk-footer-row {
display: flex;
}
cdk-cell, cdk-header-cell, cdk-footer-cell {
flex: 1;
}
src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
+28
View File
@@ -0,0 +1,28 @@
<cdk-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
<cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="name">
<cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
</ng-container>
<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
<cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
<cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
</cdk-table>
src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
+55
View File
@@ -0,0 +1,55 @@
import {DataSource} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
/**
* @title Basic use of `<cdk-table>` (uses display flex)
*/
@Component({
selector: 'cdk-table-basic-flex-example',
styleUrls: ['cdk-table-basic-flex-example.css'],
templateUrl: 'cdk-table-basic-flex-example.html',
})
export class CdkTableBasicFlexExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new ExampleDataSource();
}
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'},
];
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<PeriodicElement> {
/** Stream of data that is provided to the table. */
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<PeriodicElement[]> {
return this.data;
}
disconnect() {}
}
src/material-examples/cdk-table-basic/cdk-table-basic-example.css
+4 -36
View File
@@ -1,39 +1,7 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
table {
width: 100%;
}
/*
* Styles to make the demo's cdk-table match the material design spec
* https://material.io/guidelines/components/data-tables.html
*/
.example-table {
flex: 1 1 auto;
overflow: auto;
max-height: 500px;
}
.example-header-row, .example-row {
display: flex;
border-bottom: 1px solid #ccc;
align-items: center;
height: 32px;
padding: 0 8px;
}
.example-cell, .example-header-cell {
flex: 1;
}
.example-header-cell {
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
}
.example-cell {
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
th {
text-align: left;
}
src/material-examples/cdk-table-basic/cdk-table-basic-example.html
+24 -32
View File
@@ -1,36 +1,28 @@
<div class="example-container mat-elevation-z8">
<cdk-table #table [dataSource]="dataSource" class="example-table">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<table cdk-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
<th cdk-header-cell *cdkHeaderCellDef> No. </th>
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef> Name </th>
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
</ng-container>
<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
<th cdk-header-cell *cdkHeaderCellDef> Weight </th>
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
<th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
<td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Color Column -->
<ng-container cdkColumnDef="color">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"
[style.color]="row.color">
{{row.color}}
</cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
</cdk-table>
</div>
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/material-examples/cdk-table-basic/cdk-table-basic-example.ts
+23 -56
View File
@@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new ExampleDataSource();
}
/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
export interface UserData {
id: string;
export interface PeriodicElement {
name: string;
progress: string;
color: string;
position: number;
weight: number;
symbol: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[] { return this.dataChange.value; }
constructor() {
// Fill up the database with 100 users.
for (let i = 0; i < 100; i++) { this.addUser(); }
}
/** Adds a new user to the database. */
addUser() {
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser() {
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: (this.data.length + 1).toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
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'},
];
/**
* Data source to provide what data should be rendered in the table. Note that the data source
@@ -74,14 +42,13 @@ export class ExampleDatabase {
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
export class ExampleDataSource extends DataSource<PeriodicElement> {
/** Stream of data that is provided to the table. */
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
connect(): Observable<PeriodicElement[]> {
return this.data;
}
disconnect() {}
src/material-examples/table-basic-flex/table-basic-flex-example.css
+3
View File
@@ -0,0 +1,3 @@
table {
width: 100%;
}
src/material-examples/table-basic-flex/table-basic-flex-example.html
+28
View File
@@ -0,0 +1,28 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/material-examples/table-basic-flex/table-basic-flex-example.ts
+34
View File
@@ -0,0 +1,34 @@
import {Component} from '@angular/core';
/**
* @title Basic use of `<mat-table>` (uses display flex)
*/
@Component({
selector: 'table-basic-flex-example',
styleUrls: ['table-basic-flex-example.css'],
templateUrl: 'table-basic-flex-example.html',
})
export class TableBasicFlexExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
}
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'},
];
src/material-examples/table-basic/table-basic-example.css
+2 -6
View File
@@ -1,7 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
overflow: auto;
table {
width: 100%;
}
src/material-examples/table-basic/table-basic-example.html
+27 -28
View File
@@ -1,34 +1,33 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
src/material-examples/table-basic/table-basic-example.ts
+3 -13
View File
@@ -1,7 +1,7 @@
import {Component} from '@angular/core';
/**
* @title Basic table
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
@@ -13,14 +13,14 @@ export class TableBasicExample {
dataSource = ELEMENT_DATA;
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
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'},
@@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [
{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'},
];
src/material-examples/table-dynamic-columns/table-dynamic-columns-example.css
+7
View File
@@ -0,0 +1,7 @@
table {
width: 100%;
}
button {
margin: 16px 8px;
}
src/material-examples/table-dynamic-columns/table-dynamic-columns-example.html
+13
View File
@@ -0,0 +1,13 @@
<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>
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
src/material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
+59
View File
@@ -0,0 +1,59 @@
import {Component} from '@angular/core';
/**
* @title Table dynamically changing the columns displayed
*/
@Component({
selector: 'table-dynamic-columns-example',
styleUrls: ['table-dynamic-columns-example.css'],
templateUrl: 'table-dynamic-columns-example.html',
})
export class TableDynamicColumnsExample {
definedColumns = ['name', 'weight', 'symbol', 'position'];
columnsToDisplay = this.definedColumns.slice();
data: PeriodicElement[] = ELEMENT_DATA;
addColumn() {
const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
this.columnsToDisplay.push(this.definedColumns[randomColumn]);
}
removeColumn() {
if (this.columnsToDisplay.length) {
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;
}
}
}
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'},
];
src/material-examples/table-filtering/table-filtering-example.css
+2 -11
View File
@@ -1,15 +1,6 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
}
.example-header {
min-height: 64px;
padding: 8px 24px 0;
table {
width: 100%;
}
.mat-form-field {
src/material-examples/table-filtering/table-filtering-example.html
+27 -31
View File
@@ -1,37 +1,33 @@
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/material-examples/table-filtering/table-filtering-example.ts
+2 -12
View File
@@ -20,14 +20,14 @@ export class TableFilteringExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
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'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
{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'},
];
src/material-examples/table-footer-row/table-footer-row-example.css
+4 -8
View File
@@ -1,11 +1,7 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
table {
width: 100%;
}
.mat-table {
overflow: auto;
max-height: 500px;
tr.mat-footer-row {
font-weight: bold;
}
src/material-examples/table-footer-row/table-footer-row-example.html
+17 -20
View File
@@ -1,22 +1,19 @@
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="transactions">
<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
<!-- Item Column -->
<ng-container matColumnDef="item">
<th mat-header-cell *matHeaderCellDef> Item </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Item Column -->
<ng-container matColumnDef="item">
<mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.item}} </mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<!-- Cost Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
</ng-container>
<!-- Cost Column -->
<ng-container matColumnDef="cost">
<mat-header-cell *matHeaderCellDef> Cost </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </mat-cell>
<mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>
src/material-examples/table-http/table-http-example.css
+7 -10
View File
@@ -1,19 +1,16 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
position: relative;
max-height: 500px;
}
.example-table-container {
position: relative;
max-height: 400px;
overflow: auto;
}
.example-header {
min-height: 64px;
display: flex;
align-items: center;
padding-left: 24px;
font-size: 20px;
table {
width: 100%;
}
.example-loading-shade {
src/material-examples/table-http/table-http-example.html
+30 -34
View File
@@ -7,44 +7,40 @@
</div>
</div>
<table mat-table #table [dataSource]="dataSource" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
<div class="example-table-container">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
<!-- Number Column -->
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let row">{{ row.number }}</td>
</ng-container>
<!-- Number Column -->
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let row">{{ row.number }}</td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let row">{{ row.title }}</td>
</ng-container>
<!-- Title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let row">{{ row.title }}</td>
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>State</th>
<td mat-cell *matCellDef="let row">{{ row.state }}</td>
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>State</th>
<td mat-cell *matCellDef="let row">{{ row.state }}</td>
</ng-container>
<!-- Created Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
Created
</th>
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
</ng-container>
<!-- Created Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef
mat-sort-header
disableClear="true">
Created
</th>
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="30">
</mat-paginator>
<mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
</div>
src/material-examples/table-http/table-http-example.ts
+6 -6
View File
@@ -1,6 +1,6 @@
import {HttpClient} from '@angular/common/http';
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort} from '@angular/material';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
styleUrls: ['table-http-example.css'],
templateUrl: 'table-http-example.html',
})
export class TableHttpExample implements AfterViewInit {
export class TableHttpExample implements OnInit {
displayedColumns = ['created', 'state', 'number', 'title'];
exampleDatabase: ExampleHttpDao | null;
dataSource = new MatTableDataSource();
data: GithubIssue[] = [];
resultsLength = 0;
isLoadingResults = true;
@@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit {
constructor(private http: HttpClient) {}
ngAfterViewInit() {
ngOnInit() {
this.exampleDatabase = new ExampleHttpDao(this.http);
// If the user changes the sort order, reset back to the first page.
@@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit {
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(data => this.dataSource.data = data);
).subscribe(data => this.data = data);
}
}
src/material-examples/table-native-only/table-native-only-example.css
+3
View File
@@ -0,0 +1,3 @@
table {
width: 100%;
}
src/material-examples/table-native-only/table-native-only-example.html
+1 -1
View File
@@ -1,4 +1,4 @@
<table class="mat-table">
<table class="mat-table mat-elevation-z8">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell"> No. </th>
src/material-examples/table-overview/table-overview-example.css
+5 -11
View File
@@ -1,14 +1,5 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
}
.example-header {
min-height: 64px;
padding: 8px 24px 0;
table {
width: 100%;
}
.mat-form-field {
@@ -16,3 +7,6 @@
width: 100%;
}
td, th {
width: 25%;
}
src/material-examples/table-overview/table-overview-example.html
+4 -7
View File
@@ -1,11 +1,8 @@
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
src/material-examples/table-pagination/table-pagination-example.css
+2 -7
View File
@@ -1,8 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
table {
width: 100%;
}
src/material-examples/table-pagination/table-pagination-example.html
+3 -7
View File
@@ -1,5 +1,5 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
@@ -29,9 +29,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
src/material-examples/table-pagination/table-pagination-example.ts
+3 -3
View File
@@ -11,7 +11,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
})
export class TablePaginationExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
@@ -20,14 +20,14 @@ export class TablePaginationExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
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'},
src/material-examples/table-row-context/table-row-context-example.css
+3
View File
@@ -0,0 +1,3 @@
table {
width: 100%;
}
src/material-examples/table-row-context/table-row-context-example.html
+46
View File
@@ -0,0 +1,46 @@
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<!-- Index Column -->
<ng-container matColumnDef="$implicit">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let data"> {{data}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef> index </th>
<td mat-cell *matCellDef="let index = index"> {{index}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="count">
<th mat-header-cell *matHeaderCellDef> count </th>
<td mat-cell *matCellDef="let count = count"> {{count}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="first">
<th mat-header-cell *matHeaderCellDef> first </th>
<td mat-cell *matCellDef="let first = first"> {{first}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="last">
<th mat-header-cell *matHeaderCellDef> last </th>
<td mat-cell *matCellDef="let last = last"> {{last}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="even">
<th mat-header-cell *matHeaderCellDef> even </th>
<td mat-cell *matCellDef="let even = even"> {{even}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="odd">
<th mat-header-cell *matHeaderCellDef> odd </th>
<td mat-cell *matCellDef="let odd = odd"> {{odd}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/material-examples/table-row-context/table-row-context-example.ts
+14
View File
@@ -0,0 +1,14 @@
import {Component} from '@angular/core';
/**
* @title Table showing each row context properties.
*/
@Component({
selector: 'table-row-context-example',
styleUrls: ['table-row-context-example.css'],
templateUrl: 'table-row-context-example.html',
})
export class TableRowContextExample {
displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
data: string[] = ['one', 'two', 'three', 'four', 'five'];
}
src/material-examples/table-selection/table-selection-example.css
+2 -10
View File
@@ -1,11 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
overflow: auto;
}
.mat-column-select {
overflow: visible;
table {
width: 100%;
}
src/material-examples/table-selection/table-selection-example.html
+41 -43
View File
@@ -1,49 +1,47 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</tr>
</table>
src/material-examples/table-selection/table-selection-example.ts
+4 -14
View File
@@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections';
})
export class TableSelectionExample {
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
selection = new SelectionModel<Element>(true, []);
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
@@ -30,14 +30,14 @@ export class TableSelectionExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
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'},
@@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [
{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'},
];
src/material-examples/table-sorting/table-sorting-example.css
+3 -7
View File
@@ -1,11 +1,7 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
overflow: auto;
max-height: 500px;
table {
width: 100%;
}
.mat-header-cell.mat-sort-header-sorted {
th.mat-sort-header-sorted {
color: black;
}
src/material-examples/table-sorting/table-sorting-example.html
+24 -26
View File
@@ -1,31 +1,29 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 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>
<!-- 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>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
src/material-examples/table-sorting/table-sorting-example.ts
+2 -12
View File
@@ -20,14 +20,14 @@ export class TableSortingExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
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'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
{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'},
];