mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Updated existing Angular Material examples
This commit is contained in:
parent
bb3764aaff
commit
226f3fb440
|
@ -171,7 +171,6 @@ import { StepperLabelPositionBottomExample } from 'assets/angular-material-examp
|
|||
import { StepperStatesExample } from 'assets/angular-material-examples/stepper-states/stepper-states-example';
|
||||
import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-errors/stepper-errors-example';
|
||||
import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
|
||||
import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
|
||||
import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
|
||||
import { PlainInputAutocompleteExample } from 'assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example';
|
||||
import { ChipsDragDropExample } from 'assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example';
|
||||
|
@ -385,7 +384,6 @@ export const COMPONENT_MAP = {
|
|||
'table-pagination',
|
||||
'table-row-context',
|
||||
'table-selection',
|
||||
'table-simple-column',
|
||||
'table-sorting',
|
||||
'table-sticky-columns',
|
||||
'table-sticky-complex',
|
||||
|
@ -1017,10 +1015,6 @@ export const EXAMPLE_COMPONENTS = {
|
|||
title : 'Table with selection',
|
||||
component: TableSelectionExample
|
||||
},
|
||||
'table-simple-column' : {
|
||||
title : 'Table with a custom column component for easy column definition reuse',
|
||||
component: TableSimpleColumnExample
|
||||
},
|
||||
'table-sorting' : {
|
||||
title : 'Table with sorting',
|
||||
component: TableSortingExample
|
||||
|
@ -1317,7 +1311,6 @@ export const EXAMPLE_LIST = [
|
|||
TablePaginationExample,
|
||||
TableRowContextExample,
|
||||
TableSelectionExample,
|
||||
TableSimpleColumnExample, SimpleColumn,
|
||||
TableSortingExample,
|
||||
TableStickyColumnsExample,
|
||||
TableStickyComplexExample,
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
table {
|
||||
width: 100%;
|
||||
}
|
|
@ -1,15 +0,0 @@
|
|||
<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>
|
|
@ -1,125 +0,0 @@
|
|||
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
|
||||
import {coerceBooleanProperty} from '@angular/cdk/coercion';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import { MatColumnDef, MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
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);
|
||||
|
||||
@ViewChild('sort', {static: true}) sort: MatSort;
|
||||
getWeight = (data: PeriodicElement) => '~' + data.weight;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Column that shows simply shows text content for the header and row
|
||||
* cells. By default, the name of this column will be assumed to be both the header
|
||||
* text and data property used to access the data value to show in cells. To override
|
||||
* the header text, provide a label text. To override the data cell values,
|
||||
* provide a dataAccessor function that provides the string to display for each row's cell.
|
||||
*
|
||||
* Note that this component sets itself as visually hidden since it will show up in the `mat-table`
|
||||
* DOM because it is an empty element with an ng-container (nothing rendered). It should not
|
||||
* interfere with screen readers.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'simple-column',
|
||||
template: `
|
||||
<ng-container matColumnDef>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{label || name}} </th>
|
||||
<td mat-cell *matCellDef="let data"> {{getData(data)}}</td>
|
||||
</ng-container>
|
||||
`,
|
||||
host: {
|
||||
'class': 'simple-column cdk-visually-hidden',
|
||||
'[attr.ariaHidden]': 'true',
|
||||
}
|
||||
})
|
||||
export class SimpleColumn<T> implements OnDestroy, OnInit {
|
||||
/** Column name that should be used to reference this column. */
|
||||
@Input()
|
||||
get name(): string { return this._name; }
|
||||
set name(name: string) {
|
||||
this._name = name;
|
||||
this.columnDef.name = name;
|
||||
}
|
||||
_name: string;
|
||||
|
||||
/**
|
||||
* Text label that should be used for the column header. If this property is not
|
||||
* set, the header text will default to the column name.
|
||||
*/
|
||||
@Input() label: string;
|
||||
|
||||
/**
|
||||
* Accessor function to retrieve the data should be provided to the cell. If this
|
||||
* property is not set, the data cells will assume that the column name is the same
|
||||
* as the data property the cells should display.
|
||||
*/
|
||||
@Input() dataAccessor: ((data: T, name: string) => string);
|
||||
|
||||
/** Alignment of the cell values. */
|
||||
@Input() align: 'before' | 'after' = 'before';
|
||||
|
||||
/** Whether the column is sortable */
|
||||
@Input()
|
||||
get sortable(): boolean { return this._sortable; }
|
||||
set sortable(sortable: boolean) {
|
||||
this._sortable = coerceBooleanProperty(sortable);
|
||||
}
|
||||
_sortable: boolean;
|
||||
|
||||
@ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
|
||||
|
||||
@ViewChild(MatSortHeader, {static: true}) sortHeader: MatSortHeader;
|
||||
|
||||
constructor(@Optional() public table: MatTable<any>) { }
|
||||
|
||||
ngOnInit() {
|
||||
if (this.table) {
|
||||
this.table.addColumnDef(this.columnDef);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.table) {
|
||||
this.table.removeColumnDef(this.columnDef);
|
||||
}
|
||||
}
|
||||
|
||||
getData(data: T): any {
|
||||
return this.dataAccessor ? this.dataAccessor(data, this.name) : (data as any)[this.name];
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user