diff --git a/src/app/main/angular-material-elements/example-components.ts b/src/app/main/angular-material-elements/example-components.ts index e00357a2..fcc36b09 100644 --- a/src/app/main/angular-material-elements/example-components.ts +++ b/src/app/main/angular-material-elements/example-components.ts @@ -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, diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css deleted file mode 100755 index 1922e7ff..00000000 --- a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css +++ /dev/null @@ -1,3 +0,0 @@ -table { - width: 100%; -} diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html deleted file mode 100755 index 61979707..00000000 --- a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - -
diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts deleted file mode 100755 index dddbea40..00000000 --- a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts +++ /dev/null @@ -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(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: ` - - {{label || name}} - {{getData(data)}} - - `, - host: { - 'class': 'simple-column cdk-visually-hidden', - '[attr.ariaHidden]': 'true', - } -}) -export class SimpleColumn 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) { } - - 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]; - } -}