Кастомизация табличных форм библиотечного проекта

<section class="p-mb-3" *ngIf="isBannerVisible">
    <q-banner [expanded]="true" caption="Договоры обслуживания" picture="/assets/banner-pics/banner-test-02.jpg" style="margin-bottom: 1rem;">
        <q-banner-block subtitle="Действующих договоров" caption="{{cnt_agr_act}}" badgeText="{{cnt_agr_act_plus}}" badgeColor="success"></q-banner-block>
        <q-banner-block subtitle="В процессе обработки" caption="{{cnt_agr_proc}}" badgeText="{{cnt_agr_proc_plus}}" badgeColor="warning"></q-banner-block>
    </q-banner>
</section>
 
<p-card styleClass="p-card--no-padding">
    <ng-template pTemplate="header">
        <div class="p-fluid p-d-flex p-flex-wrap p-flex-row p-jc-start p-ac-start p-d-flex--gap-2">
          <div class="q-filter__wrapper p-d-flex p-jc-between q-gap-4 p-grow-1">
            <div class="q-filter__container p-d-flex p-flex-wrap q-gap-2 p-grow-1">
              <q-filter-wrapper *ngFor="let filter of _selectedFilters"
                label="{{filter.label}}"
                (clear)="onClearFilter(filter); getAgreementList(undefined, true)"
              >
                <q-lookup *ngIf="filter.type == 'lookup'"
                  lookupField="{{filter.lookupField}}"
                  remoteWidgetComponentUrl="{{filter.remoteWidgetComponentUrl}}"
                  widgetComponentSelector="{{filter.widgetComponentSelector}}"
                  displayMode="modal"
                  size="small"
                  (selectedItem)="onSelectLookup($event, filter)"
                >
                </q-lookup>
                <input *ngIf="filter.type == 'input'"
                  id="{{filter.id}}"
                  type="text"
                  pInputText
                  [(ngModel)]="tableFilters[filter.field]"
                  (ngModelChange)="getAgreementList(undefined, true)"
                />
                <p-calendar *ngIf="filter.type == 'calendar'"
                  id="{{filter.id}}"
                  dateFormat="dd.mm.yy"
                  [(ngModel)]="tableFilters[filter.field]"
                  (ngModelChange)="getAgreementList(undefined, true)"
                ></p-calendar>
                <p-multiSelect *ngIf="filter.type == 'multiselect'"
                  styleClass="p-multiSelect-cust p-multiSelect-cust--filter-status"
                  [options]="filter.options"
                  [(ngModel)]="tableFilters[filter.field]"
                  [showHeader]="false"
                  [showToggleAll]="false"
                  [filter]="false"
                  [maxSelectedLabels]="2"
                  (onChange)="getAgreementList(undefined, true)"
                  optionLabel="{{filter.optionLabel}}"
                  optionValue="{{filter.optionValue}}"
                ></p-multiSelect>
              </q-filter-wrapper>
            </div>
            <div class="q-filter__actions p-d-flex p-jc-end q-gap-2">
              <button
                (click)="getAgreementList(undefined, true)"
                pButton
                class="p-button-sm p-button-raised p-button-text"
                label=""
                icon="pi pi-refresh"
                iconPos="left"
              ></button>
              <button
                (click)="op.toggle($event)"
                pButton
                class="p-button-sm p-button-text p-button-raised"
                icon="pi pi-filter"
                iconPos="left"
                pTooltip=""
              ></button>
              <button
                pButton
                class="p-button-sm p-button-md p-button-primary"
                label="{{ 'ACTION.ADD' | translate }}"
                (click)="addAgreement()"
                iconPos="left"
              ></button>
              <p-overlayPanel #op appendTo="body">
                <ng-template pTemplate>
                  <p-listbox
                    [options]="filters"
                    [filter]="false"
                    [(ngModel)]="selectedFilters"
                    [multiple]="true"
                    [checkbox]="true"
                    optionLabel="label"
                    pTooltip=""
                  >
                  </p-listbox>
                </ng-template>
              </p-overlayPanel>
 
            </div>
          </div>
        </div>
    </ng-template>
 
<p-table
[columns]="_selectedColumns"
[value]="agreementList"
[paginator]="true"
class="p-table"
[rows]="tableParams.count"
[first]="tableParams.first"
[sortField]="tableParams.sortField"
[sortOrder]="tableParams.sortOrder"
[totalRecords]="tableParams.recordsCount"
[loading]="loading"
[lazy]="true"
styleClass="p-datatable-sm"
[paginator]="true"
(onLazyLoad)="log('onLazyLoad'); getAgreementList($event)"
[rowsPerPageOptions]="[10, 25, 50]"
currentPageReportTemplate="Показаны {first} - {last} из {totalRecords} записей"
[showCurrentPageReport]="true"
[rowHover]="true"
dataKey="agreementId"
[reorderableColumns]="true"
[styleClass]="sizeClass"
>
<ng-template pTemplate="header" let-columns let-expanded="expanded">
  <tr>
    <th style="width: 3rem; flex: 0 0 auto" *ngIf="isExpanded"></th>
 
    <th *ngFor="let col of columns" [pSortableColumn]="col.field" pReorderableColumn>
      <div style="font-size: 13px">
        {{ col.header }}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </div>
    </th>
    <th style="text-align: right" [ngStyle]="{ width: '155px' }">
      <button
        #menuToggler
        (click)="tableMenu.toggle($event)"
        pButton
        class="p-button-xs p-button-text p-button-raised"
        icon="pi pi-sliders-v"
        iconPos="left"
      ></button>
 
      <p-tieredMenu
        #tableMenu
        [popup]="true"
        [model]="tableMenuItems"
        appendTo="body"
      ></p-tieredMenu>
      <p-dialog
        header="Отображение колонок"
        [(visible)]="colsToggler"
        [style]="{ width: '20rem' }"
        [contentStyle]="{padding: '2'}">
 
        <p-listbox
          [options]="cols"
          [(ngModel)]="selectedColumns"
          [metaKeyselection]="false"
          [checkbox]="true"
          [multiple]="true"
          optionLabel="header"
        >
          <ng-template let-col pTemplate="item">
            <div class="country-item">
              <div>{{ col.header }}</div>
            </div>
          </ng-template>
 
        </p-listbox>
      </p-dialog>
    </th>
  </tr>
</ng-template>
 
<ng-template pTemplate="body" let-item let-columns="columns" let-index="rowIndex" let-expanded="expanded">
  <tr [pReorderableRow]="index">
    <td *ngIf="isExpanded">
      <button
        type="button"
        pButton
        [pRowToggler]="item"
        class="p-button-text p-button-rounded p-button-plain p-button-xs"
        [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
      ></button>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.55em" *ngFor="let col of columns">
      <span title="{{ item[col.field] }}" *ngIf="!['isOffer', 'stateName', 'dateStart', 'dateEnd'].includes(col.field)">
        {{ item[col.field] }}
      </span>
      <span title="{{ item[col.field] }}" *ngIf="['dateStart', 'dateEnd'].includes(col.field)">
        {{ item[col.field] | date:'dd.MM.yyyy' }}
      </span>
      <span title="{{ item[col.field] }}" *ngIf="col.field == 'isOffer'">
        {{ getOfferValue(item.isOffer) }}
      </span>
      <span title="{{ item[col.field] }}" *ngIf="col.field == 'stateName'">
        <p-badge
          value="{{ item.stateName }}"
          styleClass="{{ getStateColor(item.stateName) }}"
        >
        </p-badge>
      </span>
    </td>
 
    <td [ngClass]="{ 'p-text-right': true }">
      <div
        class="p-fluid p-d-flex p-flex-row p-jc-end p-ac-end p-d-flex--gap-1 p-mt-0 p-mr-0 p-mb-0 p-ml-0 p-pt-0 p-pr-0 p-pb-0 p-pl-0"
      >
        <button
          pButton
          pTooltip="{{ 'ACTION.EDIT' | translate }}"
          (click)="onEditAgreement(item)"
          class="p-button-xs p-button-text p-button-raised"
          icon="pi pi-pencil"
          iconPos="left"
        ></button>
        <button
          pButton
          class="p-button-xs p-button-text p-button-raised"
          (click)="$event.stopPropagation(); onDeleteAgreement(item)"
          pTooltip="{{ 'ACTION.DELETE' | translate }}"
          tooltipPosition="left"
          icon="pi pi-trash"
          iconPos="left"
        ></button>
 
        <div
          #menudiv
          [ngStyle]="{position: 'fixed', top: 0, left: 0, 'z-index': 2000}"
          (mouseover)="visible = true"
          (mouseleave)="visible = false; tableMenu.hide()"
        ></div>
        <p-tieredMenu
          styleClass="p-tieredmenu-cust p-tieredmenu-cust--w20 p-tieredmenu-cust--submenu-left"
          #tableMenu
          [model]="menuItems"
          [appendTo]="menudiv"
          [popup]="true">
        </p-tieredMenu>
        <button
          pButton
          id="btn-tiered-menu"
          class="p-button-xs p-button-text p-button-raised"
          (click)="setupMenuItems(item); tableMenu.toggle($event)"
          (mouseleave)="pauseMenu(300)"
          icon="pi pi-ellipsis-h"
          iConPos="left"
        ></button>
      </div>
    </td>
  </tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-item>
  <tr>
    <td colSpan="{{_selectedColumns.length+2}}">
      <div class="p-fluid p-grid">
        <div class="p-col p-lg-12 p-md-12 p-col-12" *ngIf="(expandedLabel != '')">
          <p>
              <span class="p-text-left">
                <b> {{expandedLabel}} </b>
              </span>
          </p>
        </div>
 
        <div class="p-col p-lg-{{expCol.colspan}} p-md-{{expCol.colspan}} p-col-12" *ngFor="let expCol of expandedCols">
          <q-info label="{{expCol.caption}}">
            <ng-template>
              <p class="info-text-content p-mb-0">
                <span class="text__black p-text-left"> {{item[expCol.field]}} </span>
              </p>
            </ng-template>
          </q-info>
        </div>
 
      </div>
    </td>
  </tr>
</ng-template>
</p-table>
</p-card>