<button class="btn btn-success" (click)="testStrings()">Test Strings</button>
</div>
+<br/>
+<hr>
+<br/>
+
+
+<div class="row">
+ <div class="col-lg-4">
+ <input class="form-control"
+ (keyup)="applyFilter($event.target.value)" placeholder="Filter"/>
+ </div>
+</div>
+
+ <div class="row float-right">
+ <button mat-button [matMenuTriggerFor]="menu">
+ Actions
+ <span class="material-icons">arrow_drop_down</span>
+ </button>
+ <mat-menu #menu="matMenu">
+ <button mat-menu-item>Action 1</button>
+ <button mat-menu-item>Action 2</button>
+ </mat-menu>
+ <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+ <button mat-button [matMenuTriggerFor]="menu2">
+ <span class="material-icons">arrow_drop_down</span>
+ </button>
+ <mat-menu #menu2="matMenu">
+ <button mat-menu-item>Configure Columns...</button>
+ </mat-menu>
+
+ </div>
+ <div style="clear:both"></div>
+
+ <mat-table [dataSource]="dataSource" matSort>
+
+ <ng-container matColumnDef="select">
+ <mat-header-cell *matHeaderCellDef>
+ <mat-checkbox (change)="$event ? masterToggle() : null"
+ [checked]="selection.hasValue() && isAllSelected()"
+ [indeterminate]="selection.hasValue() && !isAllSelected()">
+ </mat-checkbox>
+ </mat-header-cell>
+ <mat-cell *matCellDef="let row">
+ <mat-checkbox (click)="$event.stopPropagation()"
+ (change)="$event ? selection.toggle(row) : null"
+ [checked]="selection.isSelected(row)">
+ </mat-checkbox>
+ </mat-cell>
+ </ng-container>
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row
+ (click)="logClick(row)"
+ *matRowDef="let row; columns: displayedColumns;"
+ [ngClass]="{'grid-row-selected': rowIsSelected(row)}">
+ </mat-row>
+
+ <ng-container matColumnDef="name">
+ <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+ <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="state">
+ <mat-header-cell *matHeaderCellDef mat-sort-header> State </mat-header-cell>
+ <mat-cell *matCellDef="let row"> {{row.state}} </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="stuff">
+ <mat-header-cell *matHeaderCellDef mat-sort-header> Stuff </mat-header-cell>
+ <mat-cell *matCellDef="let row"> {{row.stuff}} </mat-cell>
+ </ng-container>
+
+ <ng-container *ngFor="let col of dynamicColumns()" matColumnDef="{{col.field}}">
+ <mat-header-cell *matHeaderCellDef mat-sort-header>{{col.label}}</mat-header-cell>
+ <mat-cell *matCellDef="let row"> {{col.cell(row)}} </mat-cell>
+ </ng-container>
+
+
+ </mat-table>
+
import {EgToastService} from '@eg/share/toast/toast.service';
import {EgStringService} from '@eg/share/string/string.service';
import {Observable} from 'rxjs/Rx';
+import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {SelectionModel} from '@angular/cdk/collections';
+
+const USERS = [
+ {id: 1, name: 'jane', state: 'az', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 2, name: 'jim', state: 'ga', stuff: 'asffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 3, name: 'barry', state: 'nc', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 4, name: 'larry', state: 'sc', stuff: 'sdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 5, name: 'garry', state: 'al', stuff: 'asdadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 6, name: 'garry', state: 'nj', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 7, name: 'garry', state: 'ny', stuff: 'asdasffsadf asdlfkaj sdflajs'},
+ {id: 8, name: 'garry', state: 'wy', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 9, name: 'garry', state: 'wa', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 10,name: 'garry', state: 'or', stuff: 'asffasffasfsafssdfsadfsadfasffsadf asdlfkaj sdflajs'},
+ {id: 11,name: 'garry', state: 'ca', stuff: 'asfssdfsadfsadfasffsadf asdlfkaj sdflajs'}
+];
+
+interface UserData {
+ name: string,
+ state: string,
+ id: number
+}
@Component({
- templateUrl: 'sandbox.component.html'
+ templateUrl: 'sandbox.component.html',
+ styleUrls: ['sandbox.component.css']
})
export class EgSandboxComponent implements OnInit {
//@ViewChild('helloStr') private helloStr: EgStringComponent;
+ displayedColumns = ['select', 'id', 'name', 'state', 'stuff'];
+ dataSource: MatTableDataSource<UserData>;
+ selection: SelectionModel<UserData>;
+ @ViewChild(MatSort) sort: MatSort;
+ @ViewChild(MatPaginator) paginator: MatPaginator;
testStr: string;
@Input() set testString(str: string) {
constructor(
private strings: EgStringService,
private toast: EgToastService
- ) {}
+ ) {
+ this.dataSource = new MatTableDataSource(USERS);
+ this.selection = new SelectionModel<UserData>(true, []);
+ }
+
+ ngOnInit() { }
+
+ ngAfterViewInit() {
+ this.dataSource.paginator = this.paginator;
+ this.dataSource.sort = this.sort;
+ }
+
+ dynamicColumns(): any {
+ return [
+ { field: 'id',
+ label: 'ID',
+ cell : (row) => `${row.id}` // stringify
+ }]
+ // append to displayColumns at initial column generation time.
+ }
- ngOnInit() {
-
+ /** Whether the number of selected elements matches the total number of rows. */
+ isAllSelected() {
+ const numSelected = this.selection.selected.length;
+ const numRows = this.dataSource.data.length;
+ return numSelected === numRows;
+ }
+
+ logClick(row) {
+ console.log('clicked on row ' + row.name);
+ }
+ rowIsSelected(row): boolean { // grid row
+ return this.selection.selected &&
+ this.selection.selected.filter(r => r.id == row.id).length > 0;
+ }
+
+ /** Selects all rows if they are not all selected; otherwise clear selection. */
+ masterToggle() {
+ this.isAllSelected() ?
+ this.selection.clear() :
+ this.dataSource.data.forEach(row => this.selection.select(row));
+ }
+
+ applyFilter(filterValue: string) {
+ filterValue = filterValue.trim(); // Remove whitespace
+ filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+ this.dataSource.filter = filterValue;
}
showProgress() {
.then(txt => this.toast.success(txt));
}, 4000);
}
+
}
+
projects / working / Evergreen.git / commitdiff