matsen-tool-fe/matsen-tool/src/app/_components/search-select/search-select.component.html

<div class="search-select">
    <div class="show-name">
        <p #paragraphRef (click)="openSearchBox()"></p>
        <span class="spt-clear" *ngIf="searchBoxFilled" (click)="clearSearch()"></span>
    </div>
<!--    <p>NAME {{documentForm.get(formId)}}<span>X</span></p>-->
    <div class="search-toggle" [class.search-box-open]="searchBoxOpen">
        <app-paging #pagingComponent
                        [getDataFunction]="getDataFunction"
                        [dataSource]="dataSource"
                        [searchable]="true"
                        [hidePageSize]="true"
            >

            <div *ngIf="searchSelectColDefs" class="table-responsive">
                <table mat-table [dataSource]="dataSource"  matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">

                    <ng-container *ngFor="let column of searchSelectColDefs" [matColumnDef]="column.column">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ column.columnHeader | translate }}
                        </th>
                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_POSITION">
                            <td mat-cell *matCellDef="let element">
                                {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
                            </td>
                        </ng-container>
                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_IMAGE">
                            <td  mat-cell *matCellDef="let element">
                                <img *ngIf="element.imageUrl !== null && element.imageUrl !== undefined"
                                     src="{{ getElementValue(element, column) }}" width="40" height="40"/>
                                <img *ngIf="element.imageUrl === null || element.imageUrl === undefined"
                                     src="/assets/images/icons/dummy-product.png" width="40" height="40" alt="" />
                            </td>
                        </ng-container>
                        <ng-container *ngIf="column.columnType == COLUMN_TYPE_TEXT">
                            <td  mat-cell *matCellDef="let element">
                                {{ getElementValue(element, column) }}
                            </td>
                        </ng-container>

                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row
                        *matRowDef="let row; columns: displayedColumns; index as i;"
                        (click)="onRowSelected(row, i)"
                        [ngClass]="{'highlighted': selectedRowIndex === i}"
                    ></tr>

                </table>
            </div>
        </app-paging>
    </div>
</div>