keevo-components 2.0.55 → 2.0.56

package/src/lib/components/kv-table-edit/kv-table-edit.component.html

@@ -0,0 +1,772 @@
+<div class="card kv-table-edit-container" id="tamanhotabela" [style.font-size]="'1px'">
+  <p-toast></p-toast>
+
+  @if(filtrosAvancados){
+    <p-panel
+      header="Filtros avançados"
+      [toggleable]="true"
+      [collapsed]="true"
+      (collapsedChange)="collapsed = !collapsed"
+      [style]="{ 'margin-bottom': '2px' }"
+    >
+      <ng-template pTemplate="headericons">
+        @if (!collapsed) {
+          <i class="pi pi-filter"></i>
+          }
+          <!-- Ícone quando o painel está aberto -->
+          @if (collapsed) {
+          <i class="pi pi-minus"></i>
+          }
+          <!-- Ícone quando o painel está fechado -->
+      </ng-template>
+      <ng-content></ng-content>
+    </p-panel>
+  }
+
+  <p-contextMenu #cm [model]="itemsContextMenu"></p-contextMenu>
+  <p-table
+    #te
+    [editMode]="editMode"
+    (onEditComplete)="onEditComplete($event)"
+    (onEditInit)="onEditInit($event)"
+    [reorderableColumns]="config.reorderableColumns || false"
+    *ngIf="config"
+    [value]="dataSource"
+    [dataKey]="config.dataKey"
+    [columns]="config.columns"
+    [scrollable]="true"
+    appendTo="body"
+    [styleClass]="selectedSize.class"
+    [(selection)]="selectedItems"
+    [rowSelectable]="isRowSelectable"
+    [globalFilterFields]="globalFilterFields"
+    [rows]="rows"
+    [paginator]="paginator"
+    [rowsPerPageOptions]="rowsPerPageOptions"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+    (selectionChange)="selectionChange($event)"
+    [rowHover]="true"
+    [totalRecords]="totalRecords"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    [groupRowsBy]="config.fieldGroup"
+    paginatorDropdownAppendTo="body"
+    [showFirstLastIcon]="showFirstLastIcon"
+    [pageLinks]="pageLinksOptions"
+    [scrollable]="isTableScrollable"
+    [scrollHeight]="scrollHeight"
+    [rowTrackBy]="rowTrackBy"
+    [(contextMenuSelection)]="selectedProduct"
+    [contextMenu]="isEditableTable() ? cm : null"
+  >
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+    @if (config.enableCation || enableSizes){
+      <ng-template pTemplate="caption">
+        <div
+          class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 p-0 m-0"
+        >
+          <div class="col-12 flex flex-column">
+            @if (config.title) {
+            <div class="text-md font-bold my-3">
+              {{ config.title }}
+            </div>
+            } @if (config.subtitle) {
+            <div class="text-sm mb-4 font-medium">
+              {{ config.subtitle }}
+            </div>
+            }
+          </div>
+
+          <div
+            class="flex flex-row align-items-center md:col-6 lg:col-4 {{
+              tamanhoTela < 768 ? 'col-10' : 'col-12'
+            }} mt-1 mb-2 gap-1"
+          >
+          
+            @if (config.enableFilter) {
+              <span class="p-input-icon-left">
+                <i class="pi pi-search text-sm"></i>
+    
+                <input
+                  pInputText
+                  pAutoFocus
+                  [autofocus]="true"
+                  type="text"
+                  (input)="onGlobalFilter(te, $event)"
+                  placeholder="Pesquisar..."
+                  class="h-1rem"
+                  autocomplete="off"
+                />
+              </span>
+              }
+
+              @if(enableSizes){
+                <div class="sizes-controls">
+              
+                  <kv-button (click)="menu.toggle($event)"
+                    [severity]="'tertiary'"
+                    [icon]="'match_case'"
+                    [pTooltip]="'Tamanho da fonte'"
+                    size="small"
+                  >
+                  </kv-button>
+    
+                  <p-tieredMenu
+                    [style]="{ 'font-size': '0.7rem' }"
+                    styleClass="menuSizes"
+                    appendTo="body"
+                    #menu
+                    [model]="sizes"
+                    [popup]="true"
+                  >
+                    <ng-template let-item pTemplate="item">
+                      <div
+                        class="cursor-pointer flex gap-2 align-items-center pl-1 m-2 menu-sizes"
+                        (click)="item.command()"
+                      >
+                        @if(this.selectedSize.size != item.size){
+                          <div
+                          class="tag"
+                          [style.background-color]="'#EAEAEA'"
+                        ></div>
+                        }
+                       
+                        @if(this.selectedSize.size == item.size){
+                          <div
+                          class="tag"
+                          [style.background-color]="'#1DA750'"
+                        ></div>
+                        }
+                        
+                        {{ item.label }}
+                      </div>
+                    </ng-template>
+                  </p-tieredMenu>
+                </div>
+              }
+          </div>
+
+          @if(isEditing){
+            <span class="text-aviso">
+              Tabela em modo de edição
+            </span>
+          }
+         
+          <div class="flex flex-row col-2 justify-content-end gap-2">
+            @for (action of config.actionsLote; track i; let i = $index) {
+              @if(!isEditing){
+                <div class="flex align-items-center justify-content-center">
+                  @if ((selectedItems.length > 0 || action.showAcoesLote) &&
+                  (getOrExecute(action.visible, selectedItems) ?? true)) {
+                  <kv-button
+                    (onClick)="action?.command(); activeItemLote(selectedItems)"
+                    [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+                    [tooltipPosition]="
+                      (getOrExecute(action.tooltip, selectedItems)?.length ??
+                        0 > 7) &&
+                      config.actionsLote &&
+                      i == config.actionsLote.length - 1
+                        ? 'left'
+                        : 'bottom'
+                    "
+                    [disabled]="getOrExecute(action.disabled, selectedItems) || false"
+                    [icon]="getOrExecute(action.icon, selectedItems)"
+                    [severity]="action.severity || 'tertiary'"
+                    size="small"
+                  />
+                  }
+                </div>
+              }
+            }
+
+            @if (isEditableTable() && !hideBtnEdit) {
+              <div>
+                <kv-button
+                  (click)="this.isEditing = !this.isEditing"
+                  [pTooltip]="!isEditing ? 'Habilitar Edição' : 'Desabilitar Edição'"
+                  [tooltipPosition]="'left'"
+                  [severity]="'tertiary'"
+                  [icon]="'edit_square'"
+                  size="small"
+                >
+                </kv-button>
+              </div>
+            }
+          </div>
+
+          <!---------------->
+          
+        </div>
+      </ng-template>
+    }
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @if(config.enableSelect && !isEditing){
+          <th
+          [class]="selectedSize.class + 'th'"
+          >
+            <p-tableHeaderCheckbox
+              (click)="activeItemLote(selectedItems)"
+            ></p-tableHeaderCheckbox>
+          </th>
+        }
+        @for(col of columns; track $index){
+          <th
+            [pSortableColumn]="col.field"
+            [pSortableColumnDisabled]="col.sortable === false"
+            [style.min-width]="col.width * selectedSize.size + 'px'"
+            pReorderableColumn
+            [class]="selectedSize.class + 'th'"
+        
+          >
+          <div
+            [class]="
+              centralizarColunas(col) && alignColunasHeader(col) == ''
+                ? 'flex flex-row justify-content-center'
+                : 'flex flex-row'
+            "
+            [style]="alignColunasHeader(col)"
+          >
+            <span class="text-xs font-medium">{{ col.header }}</span>
+            @if(col.sortable === true) {
+                <p-sortIcon [field]="col.field"></p-sortIcon>
+            }
+            @if(col.headerTooltip){
+              <span
+                class="material-symbols-outlined flex align-items-center"
+                [pTooltip]="col.headerTooltip"
+              >
+                info
+              </span>
+            }
+           
+          </div>
+        </th>
+        }
+      
+       @if(!isEditing && config.actions && config.actions.length > 0){
+        <th></th>
+       }
+
+       @if(isEditableTable() && this.editMode == 'row'){
+        <th
+          id="th-edit"
+          style="width: 20px"
+        >
+          Editar
+        </th>
+       }
+       
+      </tr>
+    </ng-template>
+
+
+    
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+    <ng-template
+      pTemplate="body"
+      let-rowData
+      let-editing="editing"
+      let-ri="rowIndex"
+      let-columns="columns"
+      let-rowgroup="rowgroup"
+      let-rowspan="rowspan"
+    >
+      <tr
+        [pEditableRow]="rowData"
+        [pEditableRowDisabled]="false"
+        [pContextMenuRow]="{rowData, editing}"
+        [class]="selectedSize.class + '-tr'"
+        (dblclick)="doubleClick($event, rowData)"
+      >
+      @if(config.enableSelect && !isEditing){
+        <td
+        [style]="applyStyle(rowData, { field: 'check-box', header: '' })"
+        >
+        
+          <p-tableCheckbox
+            class="check-edit-list"
+            [value]="rowData"
+            [disabled]="isDisabledCheckbox(rowData)"
+            (click)="activeItemLote(selectedItems)"
+          ></p-tableCheckbox>
+        </td>
+      }
+        @for (col of columns; track i; let i = $index){
+          <ng-container>
+            <!-- FIXME: Testar a implementação abaixo e mesaclar as duas formas -->
+  
+            <ng-template #templateInput let-rowData="rowData" let-col="col">
+              <ng-container *ngIf="isEditing; else templatevisualedicao">
+                <ng-container [ngSwitch]="col.fieldControlType">
+                  <ng-container *ngSwitchCase="'text'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid">
+                      <kv-input-text
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        [(ngModel)]="rowData[col.field]"
+                        [required]="col.required ?? true"
+                      ></kv-input-text>
+                    </div>
+                  </ng-container>
+  
+                  <ng-container *ngSwitchCase="'number'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid">
+                      <kv-input-number
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        [(ngModel)]="rowData[col.field]"
+                        [required]="col.required ?? true"
+                      ></kv-input-number>
+                    </div>
+                  </ng-container>
+  
+                  <ng-container *ngSwitchCase="'mask'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid">
+                      <kv-input-mask
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        [mask]="col.mask"
+                        [required]="col.required ?? true"
+                        [(ngModel)]="rowData[col.field]"
+                      ></kv-input-mask>
+                    </div>
+                  </ng-container>
+  
+                  <ng-container *ngSwitchCase="'switch'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid">
+                      <kv-switch
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        [(ngModel)]="rowData[col.field]"
+                      ></kv-switch>
+                    </div>
+                  </ng-container>
+  
+                  <ng-container *ngSwitchCase="'calendar'">
+                    <div [style.width]="col.width">
+                      <div
+                        [style.width]="col.width"
+                        class="grid formgrid p-fluid"
+                      >
+                        <kv-input-calendar
+                          class="cellControl col"
+                          [(ngModel)]="rowData[col.field]"
+                        ></kv-input-calendar>
+                      </div>
+                    </div>
+                  </ng-container>
+                  <ng-container *ngSwitchCase="'dropdown'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid">
+                      <p-dropdown
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        appendTo="body"
+                        [panelStyle]="{ 'font-size': '0.75rem' }"
+                        [optionLabel]="col.fieldDropDownControl.descricaoobjeto"
+                        [optionValue]="col.fieldDropDownControl.idobjeto"
+                        [options]="
+                          col.fieldDropDownControl.fieldControlDropdownSource
+                        "
+                        [(ngModel)]="rowData[col.field]"
+                      >
+                      </p-dropdown>
+                    </div>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+  
+              <ng-template #templatevisualedicao>
+                <ng-container
+                  *ngTemplateOutlet="
+                    templateOutput;
+                    context: { rowData: rowData, col: col }
+                  "
+                ></ng-container>
+              </ng-template>
+            </ng-template>
+  
+            <ng-template #templateOutput let-rowData="rowData" let-col="col">
+              <ng-container [ngSwitch]="col.fieldControlType">
+                <ng-container *ngSwitchCase="'dropdown'">
+                  <ng-container *ngIf="rowData[col.field]">
+                    {{ transformValueDrop(retornaDescricaoDrop(rowData, col), col) }}
+                  </ng-container>
+                </ng-container>
+  
+                <ng-container *ngSwitchCase="'switch'">
+                  <kv-switch
+                    [(ngModel)]="rowData[col.field]"
+                    [disabled]="true"
+                  ></kv-switch>
+                </ng-container>
+  
+                <ng-container *ngSwitchCase="'calendar'">
+                  {{ rowData[col.field] | date }}
+                </ng-container>
+  
+                <ng-container *ngSwitchCase="'mask'">
+                  {{ rowData[col.field] | mask : col.mask }}
+                </ng-container>
+  
+                <ng-container *ngSwitchDefault>
+                  {{  transformValue(rowData, col) }}
+                </ng-container>
+              </ng-container>
+            </ng-template>
+  
+            @if(editMode == 'cell' && col.fieldControlType){
+              <td
+              [pEditableColumn]="rowData"
+              [pEditableColumnField]="col.field"
+              [pEditableColumnRowIndex]="rowData[config.dataKey]"
+              [id]="'rowTable' + rowData[config.dataKey]"
+              (click)="activeItem(rowData)"
+              (dblclick)="dbClickEdit()"
+              class="rowTable"
+              [style]="
+                applyStyle(rowData, col) +
+                centralizarColunas(col) +
+                alignColunas(col)
+              "
+              [pTooltip]="returnTooltipRow(rowData, col)"
+            >
+              <p-cellEditor>
+                <ng-container>
+                  <ng-template pTemplate="input">
+                    <ng-container
+                      *ngTemplateOutlet="
+                        templateInput;
+                        context: { rowData: rowData, col: col }
+                      "
+                    ></ng-container>
+                  </ng-template>
+  
+                  <ng-template pTemplate="output">
+                    <ng-container
+                      *ngTemplateOutlet="
+                        templateOutput;
+                        context: { rowData: rowData, col: col }
+                      "
+                    ></ng-container>
+                  </ng-template>
+                </ng-container>
+  
+              </p-cellEditor>
+            </td>
+            }
+  
+            <!-- NOTE: Edição de linha -->
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+  
+            <!-- Celula que armazena os controles de edição para os campos -->
+            @if(false && col.fieldControlType && editMode == 'row'){
+              <td
+              [id]="'rowTable' + rowData[config.dataKey]"
+              (click)="activeItem(rowData)"
+              (dblclick)="dbClickEdit()"
+              class="rowTable"
+              [style]="
+                applyStyle(rowData, col) +
+                centralizarColunas(col) +
+                alignColunas(col)
+              "
+              [pTooltip]="returnTooltipRow(rowData, col)"
+            >
+              <p-cellEditor
+                [ngClass]="{ switch: col.fieldControlType == 'switch' }"
+              >
+                <ng-template pTemplate="input">
+                  <ng-container
+                    *ngTemplateOutlet="
+                      templateInput;
+                      context: { rowData: rowData, col: col }
+                    "
+                  ></ng-container>
+                </ng-template>
+  
+                <ng-template pTemplate="output">
+                  <ng-container
+                    *ngTemplateOutlet="
+                      templateOutput;
+                      context: { rowData: rowData, col: col }
+                    "
+                  ></ng-container>
+                </ng-template>
+              </p-cellEditor>
+            </td>
+            }
+  
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+            <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+  
+            <td
+              *ngIf="rowgroup && !col.template"
+              [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
+              class="rowTable"
+              [style]="
+                applyStyle(rowData, col) +
+                centralizarColunas(col) +
+                alignColunas(col)
+              "
+              [pTooltip]="returnTooltipRow(rowData, col)"
+            >
+              <span class="p-column-title">{{ col.header }}:</span>
+  
+              <span
+                *ngIf="!isBooleanField(rowData, col); else booleanField"
+                [class]="returnRowClass(rowData, col)"
+              >
+                <span
+                  *ngIf="
+                    !isChipField(col) && !col.iconField && !isImageField(col)
+                  "
+                >
+                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
+                  {{ transformValue(rowData, col) }}
+                </span>
+  
+                <div *ngIf="isChipField(col) && !col.iconField">
+                  <span
+                    [class]="returnClassChip(rowData, col)"
+                    [pTooltip]="returnTooltipIcon(rowData, col)"
+                    >{{ transformValue(rowData, col) }}</span
+                  >
+                </div>
+              </span>
+  
+              <span *ngIf="isImageField(col)">
+                <span>
+                  <img class="image" [src]="loadImage(rowData, col)" />
+                </span>
+              </span>
+  
+              <i
+                *ngIf="col.iconField"
+                [ngClass]="{
+                  'material-icons': col.indIconMaterial,
+                  'material-symbols-outlined mr-2': !col.indIconMaterial
+                }"
+                [pTooltip]="returnTooltipIcon(rowData, col)"
+              >
+                {{ returnClassIcon(rowData, col) }}
+              </i>
+  
+              <ng-template #booleanField>
+                <i
+                  *ngIf="!col.iconField && !isSwitchField(col)"
+                  [ngClass]="
+                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                  "
+                  ><span class="material-symbols-outlined">
+                    {{ rowData[col.field] ? "check" : "close" }}
+                  </span>
+                </i>
+  
+                <span
+                  *ngIf="isSwitchField(col)"
+                  [class]="returnRowClass(rowData, col)"
+                >
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col?.onlyReadField ?? true"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                </span>
+              </ng-template>
+            </td>
+  
+            <td
+              *ngIf="
+                !rowgroup &&
+                !col.grouped &&
+                !col.template &&
+                !col.fieldControlType
+              "
+              [style]="
+                applyStyle(rowData, col) +
+                centralizarColunas(col) +
+                alignColunas(col)
+              "
+              class="rowTable"
+              [pTooltip]="returnTooltipRow(rowData, col)"
+            >
+              <span class="p-column-title">{{ col.header }}:</span>
+  
+              <span
+                *ngIf="!isBooleanField(rowData, col); else booleanField"
+                [class]="returnRowClass(rowData, col)"
+              >
+                <span
+                  *ngIf="
+                    !isChipField(col) && !col.iconField && !isImageField(col)
+                  "
+                >
+                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
+                  {{ transformValue(rowData, col) }}
+                </span>
+  
+                <div *ngIf="isChipField(col) && !col.iconField">
+                  <span
+                    [class]="returnClassChip(rowData, col)"
+                    [pTooltip]="returnTooltipIcon(rowData, col)"
+                  >
+                    {{ transformValue(rowData, col) }}</span
+                  >
+                </div>
+              </span>
+  
+              <span *ngIf="isImageField(col)">
+                <span>
+                  <img class="image" [src]="loadImage(rowData, col)" />
+                </span>
+              </span>
+  
+              <i
+                *ngIf="col.iconField"
+                [ngClass]="{
+                  'material-icons': col.indIconMaterial,
+                  'material-symbols-outlined mr-2': !col.indIconMaterial
+                }"
+                [pTooltip]="returnTooltipIcon(rowData, col)"
+              >
+                {{ returnClassIcon(rowData, col) }}
+              </i>
+  
+              <ng-template #booleanField>
+                <i
+                  *ngIf="!col.iconField && !isSwitchField(col)"
+                  [ngClass]="
+                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                  "
+                  ><span class="material-symbols-outlined">
+                    {{ rowData[col.field] ? "check" : "close" }}
+                  </span>
+                </i>
+  
+                <span
+                  *ngIf="isSwitchField(col)"
+                  [class]="returnRowClass(rowData, col)"
+                >
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col?.onlyReadField ?? true"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                </span>
+              </ng-template>
+            </td>
+  
+            <td
+              *ngIf="col.template && !isEditableTable()"
+              [style]="
+                applyStyle(rowData, col) +
+                centralizarColunas(col) +
+                alignColunas(col)
+              "
+              class="rowTable"
+            >
+              <span class="p-column-title">{{ col.header }}:</span>
+              <ng-container
+                *ngIf="getCustomTemplate(col.template.name)"
+                [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                [ngTemplateOutletContext]="{ $implicit: rowData }"
+              >
+              </ng-container>
+            </td>
+          </ng-container>
+        }
+        
+
+        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
+        <!-- Controle de ação  -->
+         @if(!isEditing && config.actions && config.actions.length > 0){
+            <td
+            [ngClass]="{
+              'td-tools': isEditableTable() && this.editMode == 'row',
+              'td-tools-sticky': !isEditableTable() || this.editMode == 'cell'
+            }"
+            [style]="
+              applyStyle(rowData, { field: 'btns-options', header: '' }) +
+              'border-right: 1px solid #ddd !important; border-left: 1px solid #ddd !important; padding-right: 8px !important;'
+            "
+            >
+              <div class="flex flex-row justify-content-end w-full">
+              
+                <span
+                  class="material-symbols-outlined cursor-pointer icon-more-horiz"
+                  style="font-size: 1rem; height: 10px; width: 20px"
+                  (click)="menu.toggle($event); activeItem(rowData)"
+                >
+                  more_horiz
+                </span>
+                <!-- </button> -->
+
+                <div *ngFor="let action of config.actions">
+                  {{ criarMenusModal(rowData) }}
+                </div>
+
+
+                <p-menu
+                  #menu
+                  [popup]="true"
+                  [model]="menuItems"
+                  appendTo="body"
+                ></p-menu>
+              </div>
+            </td>
+         }
+       
+        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
+        <!-- Controle de edição -->
+         @if(this.isEditableTable() && this.editMode == 'row'){
+          <td class="td-edit">
+            <div class="flex align-items-center justify-content-center gap-2">
+              @if(!editing){
+                <button
+                [style.height]="'28px'"
+                [id]="'rowEdit' + rowData[config.dataKey]"
+                [style.width]="'28px'"
+                [disabled]="isDisableEditRowFunction(rowData)"
+                pButton
+                pRipple
+                type="button"
+                pInitEditableRow
+                icon="pi pi-pencil"
+                (click)="onRowEditInit(rowData)"
+                class="p-button-rounded p-button-text"
+              ></button>
+              }
+            
+              @if(editing){
+                <button
+                [style.height]="'28px'"
+                [style.width]="'28px'"
+                [disabled]="isDisableEditRowFunction(rowData)"
+                pButton
+                pRipple
+                type="button"
+                pCancelEditableRow
+                icon="pi pi-times"
+                (click)="onRowEditCancel(rowData, ri)"
+                [id]="'rowCancel' + rowData[config.dataKey]"
+                class="p-button-rounded p-button-text p-button-danger"
+              ></button>
+              }
+            
+            </div>
+          </td>
+         }
+      
+      </tr>
+    </ng-template>
+  </p-table>
+</div>