matsen-tool-fe/matsen-tool/src/app/products/products.component.html

<div class="spt-container">
    <div class="d-flex justify-content-between align-items-start">
        <h2>{{ 'basic.products' | translate }}</h2>
        <button class="btn btn-primary" (click)="openModalNewProduct()">{{ 'basic.new-product' | translate }}</button>
    </div>
    <table mat-table [dataSource]="productsDataSource" matSort (matSortChange)="onSortChange($event)"
           class="mat-elevation-z8 mb-3">

        <ng-container matColumnDef="pos">
            <th mat-header-cell *matHeaderCellDef>
                {{ 'overview.number' | translate }}
            </th>
            <td mat-cell
                *matCellDef="let element">{{ (productsPageSize * productsPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }}
            </td>
        </ng-container>

        <ng-container matColumnDef="image">
            <th mat-header-cell *matHeaderCellDef>
                {{ 'overview.image' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">
                <img role="button" src="{{ element.imageUrl }}" (click)="navigateToProductDetails(element)" width="40"
                     height="40"/>
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
                {{ 'overview.productname' | translate }}
            </th>
            <td mat-cell *matCellDef="let element"><span role="button"
                                                         (click)="navigateToProductDetails(element)">{{ element.name }}</span>
            </td>
        </ng-container>

        <ng-container matColumnDef="storage">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
                {{ 'overview.storage' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">{{ element.storage }}
            </td>
        </ng-container>

        <ng-container matColumnDef="number">
            <th mat-header-cell *matHeaderCellDef mat-sort-header
                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
                {{ 'overview.number-long' | translate }}
            </th>
            <td mat-cell *matCellDef="let element">{{ element.number }}
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator class="rounded-1"
                   [pageSizeOptions]="[10,25,50]"
                   [length]="productsLength"
                   (page)="handlePageEvent($event)"
                   [pageSize]="productsPageSize"
                   [pageIndex]="productsPageIndex"
                   showFirstLastButtons>
    </mat-paginator>
</div>