search-table.component.html

<div fxLayout="column" fxFill="100" style=" top: 5px; bottom: 5px; left: 5px; right: 5px;">
  <spinner [show]="showSpinner" [size]="150"></spinner>
  <div *ngIf="showSearchPanel" fxFlex="170px" class="selectionCriteria">
    <mat-card>
      <mat-card-content>
        <div class="panel">
          <form name="filterForm" #filterForm="ngForm" (ngSubmit)="search()">
            <ng-container *ngTemplateOutlet="searchPanel"></ng-container>
            <div class="searchArea">
              <button mat-raised-button color="primary" [disabled]="!filterForm.form.valid" id="searchbutton_id">
                <mat-icon>search</mat-icon>
                <span>Search</span>
              </button>
            </div>
          </form>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <form class="panel" fxFlex fxLayout="column" name="tableForm" #tableForm="ngForm">
    <ng-container *ngTemplateOutlet="tableTitle"></ng-container>
    <div class="group-filter-button" fxFlex="50px">
      <span class="row-button">
        <app-row-limiter [pageSizes]="rowLimiter.pageSizes"
                         (onPageSizeChanged)="changePageSize($event.value)"></app-row-limiter>
      </span>
      <!-- span class="column-filter-button">
        <app-column-picker [allColumns]="columnPicker.allColumns" [selectedColumns]="columnPicker.selectedColumns"
                           (onSelectedColumnsChanged)="columnPicker.changeSelectedColumns($event)"></app-column-picker>
      </span -->
    </div>
    <ngx-datatable #searchTable fxFlex id="searchTable"
                   class="expandable"
                   [messages]="datatableMessages"
                   [rowClass]="getRowClass"
                   [rows]="rows"
                   [columns]="columnPicker.selectedColumns"
                   [columnMode]="'force'"
                   [headerHeight]="38"
                   [footerHeight]="32"
                   [scrollbarH]="true"
                   [scrollbarV]="true"
                   [virtualization]="false"
                   [externalPaging]="true"
                   [externalSorting]="true"
                   [loadingIndicator]="loading"
                   [count]="count"
                   [offset]="offset"
                   [limit]="rowLimiter.pageSize"
                   (page)="onPage($event)"
                   (sort)="onSort($event)"
                   [selected]="selected"
                   [selectionType]="'single'"
                   (activate)="onActivate($event)"
                   (select)="onSelect($event)"
    >
      <!-- Row Detail Template -->
      <ngx-datatable-row-detail id="rowDetail" [rowHeight]="'auto'"
                                (toggle)="onDetailToggle($event)">
        <ng-template let-row="row" let-expanded="expanded" let-enabled="enabled" ngx-datatable-row-detail-template>
          <ng-container [ngTemplateOutlet]="tableRowDetailContainer"
                        [ngTemplateOutletContext]="{row:row}"></ng-container>
        </ng-template>
      </ngx-datatable-row-detail>

    </ngx-datatable>

    <ng-template #rowIndex let-row="row" ngx-datatable-cell-template>
      <span>{{row.index + 1}}</span>
    </ng-template>


    <ng-template #rowExpand let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
      <a
        href="javascript:void(0)"

        title="Expand/Collapse Row"
        (click)="toggleExpandRow(row)">
        <mat-icon>
          {{expanded ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </a>
    </ng-template>

    <ng-template #rowActions let-row="row" ngx-datatable-cell-template>
      <div>
        <ng-container [ngTemplateOutlet]="additionalRowActionButtons"
                      [ngTemplateOutletContext]="{row:row}"></ng-container>

        <button id="editSearchRowButton" *ngIf="allowEditItems" mat-icon-button color="primary"
                [disabled]="row.deleted || loading"
                (click)="editSearchTableEntityRow(row)" matTooltip="Edit">
          <mat-icon>edit</mat-icon>
        </button>
        <button id="deleteRowButton" *ngIf="allowDeleteItems" mat-icon-button color="primary"
                [disabled]="row.deleted || loading"
                (click)="onDeleteRowActionClicked(row)" matTooltip="Delete">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </ng-template>


    <mat-toolbar fxFlex="50px" *ngIf=showActionButtons class="mat-elevation-z2" style="flex-grow: 0">
      <mat-toolbar-row class="smp-toolbar-row">
        <ng-container>

          <button id="cancelButton" mat-raised-button (click)="onCancelButtonClicked()" color="primary"
                  [disabled]="!submitButtonsEnabled">
            <mat-icon>cancel</mat-icon>
            <span>Cancel</span>
          </button>
          <button id="saveButton" mat-raised-button (click)="onSaveButtonClicked(false)" color="primary"
                  [disabled]="!submitButtonsEnabled">
            <mat-icon>save</mat-icon>
            <span>Save</span>
          </button>

          <tool-button-spacer *ngIf="allowNewItems || allowEditItems || allowDeleteItems"></tool-button-spacer>

          <!-- new button enabled -->
          <button *ngIf="allowNewItems" id="newButton" mat-raised-button (click)="onNewButtonClicked()"
                  [disabled]="loading || !allowNewItems" color="primary">
            <mat-icon>add</mat-icon>
            <span>New</span>
          </button>
          <button *ngIf="allowEditItems" id="editButton" mat-raised-button (click)="onEditButtonClicked()"
                  [disabled]="!editButtonEnabled || loading" color="primary">
            <mat-icon>edit</mat-icon>
            <span>Edit</span>
          </button>
          <button *ngIf="allowDeleteItems" id="deleteButton" mat-raised-button (click)="onDeleteButtonClicked()"
                  [disabled]="!deleteButtonEnabled || loading || !allowDeleteItems" color="primary">
            <mat-icon>delete</mat-icon>
            <span>Delete</span>
          </button>
        </ng-container>
        <ng-container *ngTemplateOutlet="additionalToolButtons"></ng-container>
      </mat-toolbar-row>
    </mat-toolbar>
  </form>
</div>