mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-22 00:27:15 +00:00
Angular material docs updated,
+ @angular/material-moment-adapter added to package.json
This commit is contained in:
mustafahlvc
@@ -1,18 +1,9 @@
|
||||
/* Structure */
|
||||
.example-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.example-header {
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
|
||||
@@ -1,32 +1,28 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
|
||||
<mat-table #table [dataSource]="dataSource">
|
||||
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="userId">
|
||||
<mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="progress">
|
||||
<mat-header-cell *matHeaderCellDef> Progress</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="position">
|
||||
<mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="userName">
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="weight">
|
||||
<mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="color">
|
||||
<mat-header-cell *matHeaderCellDef> Color</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}}</mat-cell>
|
||||
<ng-container matColumnDef="symbol">
|
||||
<mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
@@ -34,9 +30,7 @@
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator
|
||||
[length]="exampleDatabase.data.length"
|
||||
[pageIndex]="0"
|
||||
[pageSize]="25"
|
||||
[pageSizeOptions]="[5, 10, 25, 100]">
|
||||
[pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,11 +1,5 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { MatPaginator } from '@angular/material';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/startWith';
|
||||
import 'rxjs/add/observable/merge';
|
||||
import 'rxjs/add/operator/map';
|
||||
import { MatPaginator, MatTableDataSource } from '@angular/material';
|
||||
|
||||
/**
|
||||
* @title Table with pagination
|
||||
@@ -17,113 +11,148 @@ import 'rxjs/add/operator/map';
|
||||
})
|
||||
export class TablePaginationExample
|
||||
{
|
||||
displayedColumns = ['userId', 'userName', 'progress', 'color'];
|
||||
exampleDatabase = new ExampleDatabase();
|
||||
dataSource: ExampleDataSource | null;
|
||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
|
||||
ngOnInit()
|
||||
/**
|
||||
* Set the paginator after the view init since this component will
|
||||
* be able to query its view for the initialized paginator.
|
||||
*/
|
||||
ngAfterViewInit()
|
||||
{
|
||||
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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
|
||||
export interface Element
|
||||
{
|
||||
id: string;
|
||||
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[]
|
||||
const ELEMENT_DATA: Element[] = [
|
||||
{
|
||||
return this.dataChange.value;
|
||||
}
|
||||
|
||||
constructor()
|
||||
position: 1,
|
||||
name : 'Hydrogen',
|
||||
weight : 1.0079,
|
||||
symbol : 'H'
|
||||
},
|
||||
{
|
||||
// Fill up the database with 100 users.
|
||||
for ( let i = 0; i < 100; i++ )
|
||||
{
|
||||
this.addUser();
|
||||
}
|
||||
}
|
||||
|
||||
/** Adds a new user to the database. */
|
||||
addUser()
|
||||
position: 2,
|
||||
name : 'Helium',
|
||||
weight : 4.0026,
|
||||
symbol : 'He'
|
||||
},
|
||||
{
|
||||
const copiedData = this.data.slice();
|
||||
copiedData.push(this.createNewUser());
|
||||
this.dataChange.next(copiedData);
|
||||
}
|
||||
|
||||
/** Builds and returns a new User. */
|
||||
private createNewUser()
|
||||
position: 3,
|
||||
name : 'Lithium',
|
||||
weight : 6.941,
|
||||
symbol : 'Li'
|
||||
},
|
||||
{
|
||||
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))]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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<any>
|
||||
{
|
||||
constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator)
|
||||
position: 4,
|
||||
name : 'Beryllium',
|
||||
weight : 9.0122,
|
||||
symbol : 'Be'
|
||||
},
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||
connect(): Observable<UserData[]>
|
||||
position: 5,
|
||||
name : 'Boron',
|
||||
weight : 10.811,
|
||||
symbol : 'B'
|
||||
},
|
||||
{
|
||||
const displayDataChanges = [
|
||||
this._exampleDatabase.dataChange,
|
||||
this._paginator.page
|
||||
];
|
||||
|
||||
return Observable.merge(...displayDataChanges).map(() => {
|
||||
const data = this._exampleDatabase.data.slice();
|
||||
|
||||
// Grab the page's slice of data.
|
||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
return data.splice(startIndex, this._paginator.pageSize);
|
||||
});
|
||||
}
|
||||
|
||||
disconnect()
|
||||
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'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user