ngx-wapp-components 1.8.2 → 1.8.4

package/src/lib/tables/w-table-lazy/w-table-lazy.component.ts

@@ -0,0 +1,268 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ConfirmationService, LazyLoadEvent } from 'primeng/api';
+import { Table } from 'primeng/table';
+import { LazyElementQueryRequest } from '../../shared/models/lazy-element-query-request.model';
+import { WappTableLazyLoading } from '../../shared/models/wapp-table-lazy-loading.model';
+import { TableColumnFilterTypes, TableColumnTypes, WDatePipeFormatType, WappTableColumnAlignTypes } from '../../shared/models/enums.model';
+
+@Component({
+  selector: 'w-table-lazy',
+  templateUrl: './w-table-lazy.component.html',
+  styleUrls: ['./w-table-lazy.component.scss']
+})
+export class WTableLazyComponent implements OnInit {
+  selectedElements: any[] = [];
+  translations: any;
+  lastQuery!: LazyElementQueryRequest;
+
+  selectAll: boolean = false;
+  filterElementsIndex: number = 0;
+  wappDateFormat: typeof WDatePipeFormatType = WDatePipeFormatType;
+
+  @Input('loading') loading!: boolean;
+  @Input('elements') elements!: any[];
+  @Input('rowsPerPage') rowsPerPage: number = 10;
+  @Input('allElements') allElements!: any[];
+  @Input('totalRecords') totalRecords!: number;
+  @Input('maxRowsPerPage') maxRowsPerPage: number = 50;
+  @Input('wappTableLazyLoadingObject') wappTableLazyLoadingObject!: WappTableLazyLoading;
+
+  @Output('queryElements') queryElements = new EventEmitter<LazyElementQueryRequest>();
+
+  @Output('onElementSelect') onElementSelect = new EventEmitter<any>();
+  @Output('onViewElementSelect') onViewElementSelect = new EventEmitter<any>();
+  @Output('onCustomElementSelect') onCustomElementSelect = new EventEmitter<any>();
+  @Output('onCopyElementSelect') onCopyElementSelect = new EventEmitter<any>();
+  @Output('onEditElementSelect') onEditElementSelect = new EventEmitter<any>();
+  @Output('onDeleteElementSelect') onDeleteElementSelect = new EventEmitter<any[]>();
+  @Output('onAllElementSelect') onAllElementSelect = new EventEmitter<boolean>();
+
+  @ViewChild('table', { static: false }) dataTable!: Table;
+
+  constructor(
+    private confirmationService: ConfirmationService
+  ) { }
+
+  ngOnInit(): void {
+    this.loading = true;
+  }
+
+  loadElements(event: LazyLoadEvent) {
+    this.loading = true;
+    let adaptedQuery: LazyElementQueryRequest = {
+      first: event.first!,
+      rows: this.rowsPerPage!,
+      sortOrder: event.sortOrder!,
+      sortField: event.sortField!,
+      filters: Object.keys(event.filters!).map((key) => {
+        return {
+          columnName: key!,
+          value: event.filters![key].value,
+          matchMode: event.filters![key].matchMode!
+        }
+      })
+    }
+    this.lastQuery = adaptedQuery;
+    this.queryElements.emit(adaptedQuery);
+    setTimeout(() => {    
+      this.loading = false;
+    }, 1000);
+  }
+
+  reloadElements() {
+    this.lastQuery.rows = this.rowsPerPage;
+    this.queryElements.emit(this.lastQuery);
+  }
+
+  readProperty(obj: any, prop: string): any {
+    if (typeof obj === 'undefined') {
+      return false;
+    }
+
+    const properties = prop.split('.');
+    let result = obj;
+
+    for (const property of properties) {
+      const match = property.match(/(.+?)\[(\d+)\]/);
+      if (match) {
+        const arrayProp = match[1];
+        const index = parseInt(match[2], 10);
+        if (!Array.isArray(result[arrayProp]) || isNaN(index) || index < 0 || index >= result[arrayProp].length) {
+          return undefined;
+        }
+        result = result[arrayProp][index];
+      } else {
+        if (typeof result[property] === 'undefined') {
+          return undefined;
+        }
+        result = result[property];
+      }
+    }
+
+    return result;
+  }
+
+  onElement(element: any) {
+    this.onElementSelect.emit(element);
+  }
+
+  viewElement(element: any) {
+    this.onViewElementSelect.emit(element);
+  }
+  customElement(element: any) {
+    this.onCustomElementSelect.emit(element);
+  }
+
+  editElement(element: any) {
+    this.onEditElementSelect.emit(element);
+  }
+
+  confirmDeleteSelection(event: any) {
+    this.confirmationService.confirm({
+      target: event.target as EventTarget,
+      message: this.wappTableLazyLoadingObject.confirmMultipleDeleteLabel,
+      icon: "pi pi-exclamation-triangle",
+      acceptLabel: this.wappTableLazyLoadingObject.confirmDeleteBtnLabel,
+      accept: () => {
+        this.deleteSelectedElements();
+      }
+    });
+  }
+
+  deleteSelectedElements() {
+    this.onDeleteElementSelect.emit(this.selectedElements)
+    this.selectedElements = [];
+  }
+
+  confirmDelete(event: Event, element: any) {
+    this.confirmationService.confirm({
+      target: event.target as EventTarget,
+      message: this.wappTableLazyLoadingObject.confirmSingleDeleteLabel,
+      icon: "pi pi-exclamation-triangle",
+      acceptLabel: this.wappTableLazyLoadingObject.confirmDeleteBtnLabel,
+      accept: () => {
+        this.deleteSingleElement(element);
+      }
+    });
+  }
+
+  deleteSingleElement(element: any) {
+    this.onDeleteElementSelect.emit([element])
+  }
+
+  copyElement(element: any) {
+    this.onCopyElementSelect.emit(element);
+  }
+
+  confirmCopy(event: Event, element: any) {
+    this.confirmationService.confirm({
+      target: event.target as EventTarget,
+      message: this.wappTableLazyLoadingObject.confirmCopyLabel,
+      icon: "pi pi-exclamation-triangle",
+      acceptLabel: this.wappTableLazyLoadingObject.confirmCopyBtnLabel,
+      accept: () => {
+        this.copyElement(element);
+      }
+    });
+  }
+
+  onSelectionChange(value = []) {
+    this.selectAll = value.length === this.totalRecords;
+    this.selectedElements = value;
+  }
+
+  onSelectAllChange(event: any) {
+    const checked = event.checked;
+
+    if (checked) {
+      this.onAllElementSelect.emit(true);
+      this.loading = true;
+      setTimeout(() => {
+        this.selectedElements = this.wappTableLazyLoadingObject.disableCheckbox ? this.getSelectableElements(this.allElements) : this.allElements;
+        this.selectAll = true;
+        this.loading = false;
+      }, 1000);
+    }
+    else {
+      this.selectedElements = [];
+      this.selectAll = false;
+    }
+  }
+
+  getSelectableElements(allElements: any[]) {
+    return allElements.filter((element: any) => !this.readProperty(element, this.wappTableLazyLoadingObject.disableCheckbox!));
+  }
+
+  getBooleanColumnClass(index: number, valueProperty: boolean) {
+    const booleanIconClasses = [];
+
+    if (valueProperty == true) {
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].trueIcon ?? '');
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].trueIconColor ?? '');
+    } else if (valueProperty == false) {
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].falseIcon ?? '');
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].falseIconColor) ?? '';
+    } else if (valueProperty == null) {
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].nullIcon ?? '');
+      booleanIconClasses.push(this.wappTableLazyLoadingObject.columnBooleanTypeIcons[index].nullIconColor ?? '');
+    }
+
+    return booleanIconClasses;
+  }
+
+  clear(table: Table) {
+    table.clear();
+  }
+
+  public get tableColumnFilterTypes(): typeof TableColumnFilterTypes {
+    return TableColumnFilterTypes;
+  }
+
+  public get tableColumnTypes(): typeof TableColumnTypes {
+    return TableColumnTypes;
+  }
+
+  clearFilters() {
+    this.dataTable.clear();
+  }
+
+  getTableColumnAlignClass(alignment: number) {
+    if(alignment == WappTableColumnAlignTypes.Right) return 'text-right';
+    if(alignment == WappTableColumnAlignTypes.Left) return 'text-left';
+    if(alignment == WappTableColumnAlignTypes.Center) return 'text-center';
+    return 'text-left'
+  }
+
+  getTableColumnAlignClassDefaultByColumnType(columnType: TableColumnTypes) {
+    if(columnType == TableColumnTypes.Text) return 'text-left';
+    if(columnType == TableColumnTypes.Currency) return 'text-left';
+    if(columnType == TableColumnTypes.Date) return 'text-left';
+    if(columnType == TableColumnTypes.Badge) return 'text-center';
+    if(columnType == TableColumnTypes.Boolean) return 'text-center';
+    if(columnType == TableColumnTypes.Image) return 'text-center';
+    if(columnType == TableColumnTypes.Number) return 'text-right';
+    return 'text-left'
+  }
+
+  calculateColspan() {
+    let colspan = this.wappTableLazyLoadingObject.headers.length;
+    this.wappTableLazyLoadingObject.hasCheckbox ? 
+      colspan += 1 : '';
+      this.hasActionButtons() ?
+        colspan += 1 : '';
+      return colspan;
+  }
+
+  hasActionButtons() : boolean {
+    return this.wappTableLazyLoadingObject.hasCopyButton ||
+            this.wappTableLazyLoadingObject.hasEditButton ||
+            this.wappTableLazyLoadingObject.hasViewButton ||
+            this.wappTableLazyLoadingObject.hasDeleteButton || 
+            this.wappTableLazyLoadingObject.customButtonConfig?.hasCustomButton ?
+          true : false;
+  }
+
+  refreshPagination(first: number) {
+    this.dataTable._first = first;
+  }
+}

package/src/lib/tables/w-tree-table/w-tree-table.component.html

@@ -0,0 +1,289 @@
+<div *ngIf="wappTreeTableObject" [class.table-container]="wappTreeTableObject.tableContainer">
+    <p-treeTable *ngIf="!loading && elements; else loadingTable"
+        #treeTable [value]="elements" 
+        class="w-table-styles"
+        [columns]="columns" 
+        [scrollable]="true"
+        [tableStyle]="{'min-width': wappTreeTableObject.tableMinWidth!}"
+        [loading]="loadingElements"
+        [showLoader]="false"
+        [paginator]="true"
+        [rows]="rowsPerPage"
+        [rowHover]="true"
+        [totalRecords]="totalRecords"
+        [showCurrentPageReport]="true"
+        [currentPageReportTemplate]="wappTreeTableObject.currentPageReportTemplate ? wappTreeTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!"
+        styleClass="p-treetable-striped">
+
+        <ng-template *ngIf="true" pTemplate="caption">
+            <span class="flex align-items-center table-paginator p-0">
+                <span class="showing-per-page"> {{wappTreeTableObject.currentPageReportTemplate}} </span>
+                <p-inputNumber 
+                        class="pl-2 showing-per-page" [size]="1" [(ngModel)]="rowsPerPage" [showButtons]="true" 
+                        buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords!"
+                        decrementButtonClass="p-button-outlined" 
+                        incrementButtonClass="p-button-outlined" 
+                        incrementButtonIcon="pi pi-plus" 
+                        decrementButtonIcon="pi pi-minus" 
+                        mode="decimal"
+                        (ngModelChange)="updateShowingTableRows()">
+                    </p-inputNumber>
+                    <span class="p-input-icon-left ml-auto">
+                        <i class="pi pi-search"></i>
+                        <input pInputText type="text" #filter (input)="filterGlobal(treeTable, $event)" 
+                            [placeholder]="wappTreeTableObject.searchPlaceholder" class="w-full height-input wapp-input"/>
+                    </span>
+            </span>
+        </ng-template>
+
+        <ng-template pTemplate="header" let-columns>
+        <tr>
+            <th *ngFor="let col of columns; index as i"  
+                class="'{{col.field}}-field'"
+                [ttSortableColumn]="col.field"
+                [style]="'width: '+wappTreeTableObject.columnWidths[i]">
+                <div [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignFlexClass(wappTreeTableObject.columnAlign[i]) : 'flex justify-content-start'" >
+                    <div>
+                        {{ col.header }}
+                    </div>
+                    <div>
+                        <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
+                    </div>
+                </div>
+            </th>
+            <th class="buttons-field">
+            </th>
+        </tr>
+        </ng-template>
+
+        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+        <tr>
+            <ng-template ngFor let-columnType [ngForOf]="wappTreeTableObject.columnTypes!" let-i="index">
+                <td *ngIf="columnType == tableColumnTypes.Image" [style]="'width: '+wappTreeTableObject.columnWidths[i]" [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-center'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            <img *ngIf="readProperty(rowData, wappTreeTableObject.columns[i].field)" 
+                            [src]="readProperty(rowData, wappTreeTableObject.columns[i].field)" 
+                            class="element-image-width"/>
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Text"  [style]="'width: '+wappTreeTableObject.columnWidths[i]" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) }}
+                        </div>
+                    </div>                        
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Number"  [style]="'width: '+wappTreeTableObject.columnWidths[i]" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-right'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Currency" [style]="'width: '+wappTreeTableObject.columnWidths[i]" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-right'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | currency }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Badge" [style]="'width: '+wappTreeTableObject.columnWidths[i]" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-center'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            <w-badge [label]="readProperty(rowData, wappTreeTableObject.columns[i].field)" [color]="'info'"></w-badge>                  
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Boolean" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-center'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            <i class="pi" [ngClass]="getBooleanColumnClass(i, readProperty(rowData, wappTreeTableObject.columns[i].field))"></i>
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.Date" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | wappDate }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.ShortDate" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | wappDate : wappDateFormat.d }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.LongDate" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | wappDate : wappDateFormat.D }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeShortTime" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | wappDate : wappDateFormat.g }}
+                        </div>
+                    </div>
+                </td>
+                <td *ngIf="columnType == tableColumnTypes.GeneralDateTimeLongTime" 
+                    [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                    <div [class.flex]="i === 0" [class.justify-content-between]="i === 0">
+                        <div [class.align-content-center]="i === 0">
+                            <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
+                        </div>
+                        <div [class.my-auto]="i === 0">
+                            {{ readProperty(rowData, wappTreeTableObject.columns[i].field) | wappDate : wappDateFormat.G }}
+                        </div>
+                    </div>
+                </td>
+            </ng-template>
+            <td class="buttons-field">
+                <div class="flex justify-content-end">
+                    <span *ngFor="let button of wappTreeTableObject.actionButtons">
+                        <p-button [icon]="'pi '+ button.icon" (click)="actionButtonClicked(button.id, rowData)"  [pTooltip]="button.tooltip!" [tooltipPosition]="button.tooltipPosition!" [styleClass]="button.styleClass!"></p-button>
+                    </span>
+                    <p-button *ngIf="wappTreeTableObject.hasDeleteButton" icon="pi pi-trash" (click)="confirmDeleteSelected($event, rowData)" [pTooltip]="wappTreeTableObject.deleteButtonTooltip!" tooltipPosition="bottom" class="px-2" styleClass="p-button-text p-button-danger"></p-button>
+                </div>
+            </td>
+        </tr>
+        </ng-template>
+            
+        <ng-template pTemplate="emptymessage" let-columns>
+        <tr>
+            <td [attr.colspan]="columns.length">
+                {{wappTreeTableObject.noRecordsLabel}}
+            </td>
+        </tr>
+        </ng-template>
+    </p-treeTable>
+
+    <ng-template #loadingTable>
+        <p-treeTable
+        #treeTable [value]="tableSkeletons" 
+        class="w-table-styles"
+        [columns]="columns" 
+        [scrollable]="true"
+        [tableStyle]="{'min-width':'50rem'}"
+        [loading]="loadingElements"
+        [showLoader]="false"
+        [paginator]="true"
+        [rows]="rowsPerPage"
+        [rowHover]="true"
+        [totalRecords]="totalRecords"
+        [showCurrentPageReport]="true"
+        [currentPageReportTemplate]="wappTreeTableObject.currentPageReportTemplate ? wappTreeTableObject.currentPageReportTemplate + ' ' +  rowsPerPage + ' de ' + totalRecords! : 'Showing ' + rowsPerPage + ' of ' + totalRecords!"
+        styleClass="p-treetable-striped">
+
+        <ng-template *ngIf="true" pTemplate="caption">
+            <span class="flex align-items-center table-paginator p-0">
+                <span class="showing-per-page"> {{wappTreeTableObject.currentPageReportTemplate}} </span>
+                <p-inputNumber 
+                        class="pl-2 showing-per-page" [size]="1" [(ngModel)]="rowsPerPage" [showButtons]="true" 
+                        buttonLayout="horizontal" inputId="horizontal" spinnerMode="horizontal" [step]="1" [min]="1" [max]="totalRecords!"
+                        decrementButtonClass="p-button-outlined" 
+                        incrementButtonClass="p-button-outlined" 
+                        incrementButtonIcon="pi pi-plus" 
+                        decrementButtonIcon="pi pi-minus" 
+                        mode="decimal"
+                        (ngModelChange)="updateShowingTableRows()">
+                    </p-inputNumber>
+                    <span class="p-input-icon-left ml-auto">
+                        <i class="pi pi-search"></i>
+                        <input pInputText type="text" #filter (input)="filterGlobal(treeTable, $event)" 
+                            [placeholder]="wappTreeTableObject.searchPlaceholder" class="w-full height-input wapp-input"/>
+                    </span>
+            </span>
+        </ng-template>
+
+        <ng-template pTemplate="header" let-columns>
+        <tr>
+            <th *ngFor="let col of columns; index as i" 
+                class="{{col.field}}-field'"
+                [ttSortableColumn]="col.field">
+                <div [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignFlexClass(wappTreeTableObject.columnAlign[i]) : 'flex justify-content-start'">
+                    <div>
+                        {{ col.header }}
+                    </div>
+                    <div>
+                        <p-treeTableSortIcon [field]="col.field"></p-treeTableSortIcon>
+                    </div>
+                </div>
+            </th>
+            <th class="buttons-field">
+            </th>
+        </tr>
+        </ng-template>
+
+        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+        <tr>
+            <td *ngFor="let col of columns; let i = index" [ngClass]="wappTreeTableObject.columnAlign ? getTableColumnAlignClass(wappTreeTableObject.columnAlign[i]) : 'text-left'">
+                <p-skeleton></p-skeleton>
+            </td>
+            <td class="buttons-field">
+                <div class="flex justify-content-end">
+                    <span *ngFor="let button of wappTreeTableObject.actionButtons">
+                        <p-button [icon]="'pi '+ button.icon" (click)="actionButtonClicked(button.id, rowData)"  [pTooltip]="button.tooltip!" [tooltipPosition]="button.tooltipPosition!" [styleClass]="button.styleClass!"></p-button>
+                    </span>
+                    <p-button *ngIf="wappTreeTableObject.hasDeleteButton" icon="pi pi-trash" (click)="confirmDeleteSelected($event, rowData)" [pTooltip]="'Tooltip' " tooltipPosition="bottom" class="px-2" styleClass="p-button-text p-button-danger"></p-button>
+                </div>
+            </td>
+        </tr>
+        </ng-template>
+            
+        <ng-template pTemplate="emptymessage" let-columns>
+        <tr>
+            <td [attr.colspan]="columns.length">
+                {{wappTreeTableObject.noRecordsLabel}}
+            </td>
+        </tr>
+        </ng-template>
+    </p-treeTable>
+    </ng-template>
+</div>
+
+<p-confirmPopup></p-confirmPopup>