davidcanonieto 4cc449dfbb [ADF-4376] Fix Sticky Header in Datatable Component (#4582)
* [ADF-4376] Fix Sticky Header in Datatable Component

* [ADF-4374] Rebase branch

* remove search from permissions test

* remove search from permissions test
2019-04-12 17:27:51 +01:00

60 lines
2.3 KiB
HTML

<mat-form-field>
<input id="adf-datatable-filter-input" matInput placeholder="Name filter" [(ngModel)]="data.filterValue">
</mat-form-field>
<mat-slide-toggle
id="adf-toggle-sticky-header"
[color]="'primary'"
(change)="toggleStickyHeader()"
[checked]="stickyHeader">
Sticky header
</mat-slide-toggle>
<div style="height: 310px; overflow-y: auto;">
<adf-datatable
#dataTable
[data]="data"
[stickyHeader]="stickyHeader"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
[actions]="true"
rowStyleClass="custom-row-style"
(showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)"
(row-click)="onRowClick($event)" (row-dblclick)="onRowDblClick($event)">
<!-- HTML column definition demo -->
<!--
<data-columns>
<data-column type="image" key="icon" [sortable]="false"></data-column>
<data-column key="id" title="Id"></data-column>
<data-column key="createdOn" title="Created"></data-column>
<data-column key="name" title="Name" class="adf-full-width name-column"></data-column>
<data-column key="createdBy.name" title="Created By"></data-column>
</data-columns>
-->
</adf-datatable>
</div>
<div>
Selected items: {{ dataTable.selection?.length }}
</div>
<div data-automation-id="multiselect">
<mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
</div>
<div>
<p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</p>
<mat-form-field>
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
{{mode.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
<button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
<button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
<button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
</div>