Homec4science
Diffusion svg-test-app (master) Browse

svg-test-app/src/app/data-list-view/data-list-view-table/data-list-view-table.component.html
9f17b704f8damaster

Last Change
Raw File

data-list-view-table.component.html
View Options

<!-- FILTER -->
<div *ngIf="dataListSettings.filter.showFilter && dataSource && dataSource.data">
<mat-form-field>
<input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
<mat-hint *ngIf="paginator">Showing {{paginator.length}} of {{dataSource.data.length}} entries in total</mat-hint>
</mat-form-field>
</div>
<!--TABLE-->
<mat-table #table [dataSource]="dataSource"
matSort
[matSortDisabled] ="this.dataListSettings.sort.disallowSorting"
[multiTemplateDataRows]="true">
<ng-container *ngFor="let col of displayedColumns; let i = index" [cdkColumnDef]="col" [sticky]="isColumnSticky(i)">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>{{col}}</mat-header-cell>
<mat-cell *cdkCellDef="let row; let i = $implicit;"
[ngStyle]= "dataListSettings.styles.cellStyle"
(click)="onThisClick(row[col], i)"
[ngClass]="col">
<!-- SETTING [ngClass]="col" enables to define styles for each column, setting it to row[col].value will enable to define a style for certain cell content -->
<span *ngIf="row[col]">
<span [ngStyle] = "getStyle()" [innerHTML]="row[col]" ></span>
</span>
<!-- {{ showValue(row, col) }} &lt;!&ndash; | highlight: toHighlightByFilter &ndash;&gt;-->
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row
matRipple
*matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<!-- PAGINATION -->
<mat-paginator #paginator
[pageIndex]= "dataListSettings.paginator.pageIndex"
[pageSize]= "dataListSettings.paginator.pageSize"
[pageSizeOptions]= "dataListSettings.paginator.pageSizeOptions"
[ngStyle]= "{display: dataListSettings.paginator.paginate ? 'block' : 'none'}">
</mat-paginator>
<!-- EXPORT -->
<div *ngIf="dataListSettings.export.showExport">
<mat-form-field>
<mat-label>Export options</mat-label>
<mat-select [(value)]="exportSelection">
<mat-option value="displayed">Displayed data only</mat-option>
<mat-option value="complete">Complete export</mat-option>
</mat-select>
</mat-form-field>
<button (click)="exportToCsv()">Export to CSV</button>
</div>
c4science · Help