C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-select-table/tibco-cloud-select-table.component.ts
A table that allows rows to be selected
<tc-tibco-cloud-select-table></tc-tibco-cloud-select-table>| selector | tc-tibco-cloud-select-table |
| styleUrls | ./tibco-cloud-select-table.component.css |
| templateUrl | ./tibco-cloud-select-table.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(logger: LogService)
|
||||||
|
Parameters :
|
| jsonSource | |
Type : string
|
|
|
Inherited from
TibcoCloudTableComponent
|
|
|
Defined in
TibcoCloudTableComponent:13
|
|
| selectedlines | |
Type : EventEmitter<any>
|
|
|
~event selectedlines : the lines selected ~payload any : The lines that are selected in the table by the user |
|
| Public clicked | ||||
clicked(row)
|
||||
|
Parameters :
Returns :
void
|
| highlight | ||||
highlight(element)
|
||||
|
Parameters :
Returns :
void
|
| camelCaseTW | ||||||
camelCaseTW(header: string | any)
|
||||||
|
Inherited from
TibcoCloudTableComponent
|
||||||
|
Defined in
TibcoCloudTableComponent:76
|
||||||
|
Parameters :
Returns :
any
|
| ngOnChanges | ||||
ngOnChanges(changes)
|
||||
|
Inherited from
TibcoCloudTableComponent
|
||||
|
Defined in
TibcoCloudTableComponent:30
|
||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:25
|
|
Returns :
void
|
| updateTable |
updateTable()
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:37
|
|
Returns :
void
|
| selected |
Type : object
|
Default value : {}
|
| columns |
Type : []
|
Default value : []
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:23
|
| dataSource |
Type : TibcoCloudTableDataSource
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:17
|
| displayedColumns |
Type : []
|
Default value : []
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:22
|
|
Columns displayed in the table. Columns IDs can be added, removed, or reordered. |
| id |
Type : string
|
Default value : '_' + Math.random().toString(36).substr(2, 9)
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:19
|
| paginator |
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator, {static: true})
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:14
|
| sort |
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: true})
|
|
Inherited from
TibcoCloudTableComponent
|
|
Defined in
TibcoCloudTableComponent:15
|
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {TibcoCloudTableComponent} from '../tibco-cloud-table/tibco-cloud-table.component';
import {LogService} from '../../services/tc-logging.service';
/**
* A table that allows rows to be selected
*
*@example <tc-tibco-cloud-select-table></tc-tibco-cloud-select-table>
*/
@Component({
selector: 'tc-tibco-cloud-select-table',
templateUrl: './tibco-cloud-select-table.component.html',
styleUrls: ['./tibco-cloud-select-table.component.css']
})
export class TibcoCloudSelectTableComponent extends TibcoCloudTableComponent {
/**
* ~event selectedlines : the lines selected
* ~payload any : The lines that are selected in the table by the user
*/
@Output() selectedlines: EventEmitter<any> = new EventEmitter<any>();
selected = {};
highlight(element) {
element.highlighted = !element.highlighted;
}
constructor(protected logger: LogService) { /*, protected tcfunctions: TcFunctionsService) {*/
super();
logger.info('Select Table Started... ');
}
public clicked(row) {
// console.log(row);
const myData = JSON.parse(JSON.stringify(this.dataSource.data));
// console.log(this.dataSource);
const selectedArray = new Array();
for (const line of myData) {
// console.log('s:' , line);
if (line.highlighted) {
delete line['hovered'];
delete line['highlighted'];
selectedArray.push(line);
}
}
// console.log('Selected Array: ' , selectedArray);
this.selected = JSON.stringify(selectedArray);
this.selectedlines.emit(this.selected);
}
}
<div class="mat-elevation-z8">
<table id="{{id}}" mat-table class="tcst-full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
<ng-container *ngFor="let column of columns" [matColumnDef]='column.columnDef'>
<mat-header-cell *matHeaderCellDef class="tcst-header" mat-sort-header>{{camelCaseTW(column.header)}}</mat-header-cell>
<mat-cell *matCellDef="let row" >{{ column.cell(row) }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let even = even;"
[ngClass]="{hovered: row.hovered, highlighted: row.highlighted, tcstgray: even}"
(click)="row.highlighted = !row.highlighted; clicked(row);" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</table> <!-- *ngIf="dataSource.data.length > 10" -->
<!-- <div class='' ngClass="{'tcst-hide': dataSource.data.length < 10}"> -->
<mat-paginator [ngClass]="{'tcst-hide': dataSource.data.length < 10}" #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20, 25]">
</mat-paginator>
</div>
<!--</div>-->
./tibco-cloud-select-table.component.css
.tcst-full-width-table {
width: 100%;
}
.mat-row.hovered {
background: #eee;
cursor: pointer;
}
.mat-row.highlighted {
background: #999;
}
.tcst-header{
/*
background-color: #d0d5e2;
font-size: 16px;*/
background: #0081cb;
color:white;
padding:5px 30px;
display:flex;
align-items: center;
}
.tcst-header:hover{
background-color: #229be0;
}
.tcstgray {
background-color: #f5f5f5;
}
.tcst-hide{
display: none;
}