src/app/components/tissue-info-table/tissue-info-table.component.ts
Displays tissue metadata and information table
| selector | ccf-tissue-info |
| styleUrls | ./tissue-info-table.component.scss |
| templateUrl | ./tissue-info-table.component.html |
Properties |
|
Inputs |
Accessors |
| data | |
Type : TissueTableInfo
|
|
|
Sets the table data with correct tissue information |
|
| Readonly dataSource |
Default value : new MatTableDataSource<TableData>([])
|
|
Datasource to store table data |
| displayedColumns |
Default value : this.columns.map((c) => c.columnDef)
|
|
Column definitions of the columns to be displayed |
| sort | ||||||
setsort(sort: MatSort)
|
||||||
|
Sorts the table data
Parameters :
Returns :
void
|
| data | ||||||
setdata(value: TissueTableInfo)
|
||||||
|
Sets the table data with correct tissue information
Parameters :
Returns :
void
|
import { Component, Input, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { TableData, TissueTableInfo } from './tissue-info-table';
/** Displays tissue metadata and information table */
@Component({
selector: 'ccf-tissue-info',
templateUrl: './tissue-info-table.component.html',
styleUrls: ['./tissue-info-table.component.scss'],
})
export class TissueInfoTableComponent {
/** Sorts the table data */
@ViewChild(MatSort, { static: true }) set sort(sort: MatSort) {
this.dataSource.sort = sort;
}
/** Sets the table data with correct tissue information */
@Input()
set data(value: TissueTableInfo) {
this.dataSource.data = value.tissueData;
}
/** Datasource to store table data */
readonly dataSource = new MatTableDataSource<TableData>([]);
/** Details of the columns to be displayed */
columns = [
{
columnDef: 'label',
header: 'Label',
cell: (element: TableData) => `${element.label}`,
},
{
columnDef: 'value',
header: 'Value',
cell: (element: TableData) => `${element.value}`,
},
];
/** Column definitions of the columns to be displayed */
displayedColumns = this.columns.map((c) => c.columnDef);
}
<div class="table-container">
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 demo-table">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ column.header }}
</th>
<td mat-cell *matCellDef="let row">
<markdown>{{ column.cell(row) }}</markdown>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
./tissue-info-table.component.scss
:host {
.demo-table {
width: 100%;
}
.table-container {
padding-bottom: 2rem;
}
::ng-deep table > tbody > tr > td:nth-child(1) {
font-weight: 500;
font-size: 0.875rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #212121;
}
::ng-deep td:nth-child(2) {
font-weight: 300;
font-size: 0.875rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #212121;
}
::ng-deep th.mat-header-cell {
font-weight: 500;
font-size: 0.875rem;
line-height: 1.5rem;
letter-spacing: 0.005em;
color: #212121;
}
::ng-deep table > thead > tr > th:nth-child(1) .mat-sort-header-arrow {
color: #ebebeb !important;
}
::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
opacity: 0.54 !important;
transform: rotate(180deg) !important;
color: #ebebeb;
}
}