common-ui/src/lib/listing/table/table.component.html
2021-08-30 13:06:36 +03:00

45 lines
1.8 KiB
HTML

<iqser-table-header
[bulkActions]="bulkActions"
[hasEmptyColumn]="!!emptyColumnWidth"
[selectionEnabled]="selectionEnabled"
[tableColumnConfigs]="tableColumnConfigs"
[tableHeaderLabel]="tableHeaderLabel"
>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</iqser-table-header>
<iqser-empty-state
(action)="noDataAction.emit()"
*ngIf="listingComponent.entitiesService.noData$ | async"
[buttonLabel]="noDataButtonLabel"
[icon]="noDataIcon"
[showButton]="showNoDataButton"
[text]="noDataText"
></iqser-empty-state>
<iqser-empty-state *ngIf="listingComponent.noMatch$ | async" [text]="noMatchText"></iqser-empty-state>
<cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
<div
*cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$ | async; trackBy: listingComponent.trackByPrimaryKey"
[ngClass]="getTableItemClasses(entity)"
[routerLink]="routerLinkFn(entity)"
>
<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
<iqser-round-checkbox [active]="listingComponent.isSelected(entity)"></iqser-round-checkbox>
</div>
<ng-container *ngFor="let column of tableColumnConfigs">
<ng-container *ngTemplateOutlet="column.template; context: { entity: entity, extra: column.extra }"></ng-container>
</ng-container>
<div *ngIf="!!actionsTemplate" class="actions-container">
<ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: entity }"></ng-container>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
<iqser-scroll-button *ngIf="hasScrollButton" [itemSize]="itemSize" [scrollViewport]="scrollViewport"></iqser-scroll-button>