коврик на заказ

Question

Я использую мат-стол из angular материала со складными рядами. Каждая строка родительской таблицы подразумевается как заголовок и может быть развернута для отображения вложенной таблицы внутри этой родительской таблицы в качестве содержимого расширенной строки.

Я хочу использовать нумерацию страниц с этой родительской таблицей с элементами дочерних таблиц. Ie, каждая строка родительской таблицы является только заголовком дочерней таблицы, которая содержится внутри расширяемой строки. Если в строке 1 родительской таблицы размещены 3 элемента в дочерней таблице, то я хочу, чтобы нумерация страниц работала с 3 элементами.

Ie в нем должно отображаться 1-3 из x. Если размер страницы равен 5, а две строки содержат по 3 элемента в каждой, вторая строка должна предпочтительно перейти на следующую страницу.

<div fxLayout="column">
    <div fxLayout="row" class="pg-top">
        <h1 class="page-heading">{{'REQUISITES' | translate}}</h1>
        <div>
            <button mat-button class="add-btn" [routerLink]="['./add']"> {{'ADD' | translate}}
            </button>
            <mat-menu #menu="matMenu" class="page-dropdown-menu">
                <button mat-menu-item>{{'IMPORT REQUISITES' | translate}}</button>
                <button mat-menu-item [routerLink]="['./add']">{{'ADD REQUISITES' | translate}}</button>
            </mat-menu>

            <button [matMenuTriggerFor]="menu" mat-button class="action-button">
                {{'ACTIONS' | translate}}
                <mat-icon>keyboard_arrow_down</mat-icon>
            </button>
        </div>
    </div>

    <div fxLayout="column">
        <div fxLayout="row" fxLayoutAlign="space-between" class="search-sorting-menu">
            <div class="form-filter elsicon-search icon-btn">
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'SEARCH' | translate}}">
            </div>
            <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
                <button class="elsicon-print icon-btn"></button>
                <button class="elsicon-v-menu icon-btn"></button>
                <button class="elsicon-h-menu icon-btn"></button>
            </div>
        </div>

        <div *ngIf="selection.hasValue()" class="check-select-list-bar" fxLayout="row" fxLayoutAlign="space-between">
            <div class="details">
                <span class="select-count"
                    *ngIf="selection.selected.length!=dataSource.data.length">{{selection.selected.length}}
                    Selected</span>
                <span class="select-count" *ngIf="selection.selected.length==dataSource.data.length">All
                    Courses ({{selection.selected.length}})
                    selected</span>
                <span class="select-all-btn" *ngIf="selection.selected.length!=dataSource.data.length"
                    (click)="selectAll()">(Select all)</span>
                <span class="select-delete-btn" (click)="removeSelectedRows()">Delete</span>
            </div>
            <span class="close-btn"></span>
        </div>
    </div>

    <div class="table-container" #scrollMe>
        <table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortStart="asc" matSortDisableClear
            class="list-table list-table hand_cursor" multiTemplateDataRows>

            <!--checkbox-->

            <ng-container matColumnDef="source">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'SOURCE' |translate}} </th>
                <td mat-cell *matCellDef="let element" class="grey"> {{element.name}} </td>
            </ng-container>
            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'NAME' |translate}} </th>
                <td mat-cell *matCellDef="let element"> </td>
            </ng-container>
            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'TYPE' |translate}} </th>
                <td mat-cell *matCellDef="let element"> </td>
            </ng-container>
            <ng-container matColumnDef="must_complete">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'MUST COMPLETE' |translate}} </th>
                <td mat-cell *matCellDef="let element"> </td>
            </ng-container>
            <ng-container matColumnDef="repeat_interval">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'REPEATS' |translate}} </th>
                <td mat-cell *matCellDef="let element"> </td>
            </ng-container>
            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'ACTIONS' |translate}} </th>
                <td mat-cell *matCellDef="let element"><i class="material-icons">keyboard_arrow_down</i>
                </td>
            </ng-container>

            <ng-container matColumnDef="expandedDetail">
                <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                    <div class="example-element-detail" [@detailExpand]="element.isExpanded ? 'expanded' :
                        'collapsed'">
                        <table mat-table [dataSource]="element.dataSource" matSort matSortActive="name"
                            matSortStart="asc" matSortDisableClear class="list-table list-table hand_cursor item-table"
                            multiTemplateDataRows>

                            <!--checkbox-->
                            <ng-container matColumnDef="source">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'SOURCE' |translate}} </th>
                                <td mat-cell *matCellDef="let element"> {{element.enrollable_name}} </td>
                            </ng-container>
                            <!-- Name Column -->
                            <ng-container matColumnDef="name">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'NAME' |translate}} </th>
                                <td mat-cell *matCellDef="let element"> {{element.enrollable_name}} </td>
                            </ng-container>

                            <!-- Identifier Column -->
                            <ng-container matColumnDef="type">
                                <th mat-header-cell *matHeaderCellDef> {{'TYPE' | translate}} </th>
                                <td mat-cell *matCellDef="let element"> {{element.enrollable_name}} </td>
                            </ng-container>

                            <!-- Description Column -->
                            <ng-container matColumnDef="must_complete">
                                <th mat-header-cell *matHeaderCellDef> {{'MUST COMPLETE' |translate}} </th>
                                <td mat-cell *matCellDef="let element"> {{element.enrollable_name}} </td>
                            </ng-container>
                            <ng-container matColumnDef="repeat_interval">
                                <th mat-header-cell *matHeaderCellDef> {{'REPEATS' |translate}} </th>
                                <td mat-cell *matCellDef="let element"> {{element.repeat_interval}}
                                </td>
                            </ng-container>

                            <ng-container matColumnDef="actions" class="actions">
                                <th mat-header-cell *matHeaderCellDef>

                                    <a [matMenuTriggerFor]="menu" mat-icon-button class="checkboxactions"
                                        appClickStopPropagation *ngIf="itemsSelected" matTooltip="Actions">
                                        <i class="material-icons"> more_vert </i>
                                    </a>
                                    <mat-menu #menu="matMenu" class="page-dropdown-menu">
                                        <button mat-menu-item (click)="removeSelectedRows()">
                                            <mat-icon>delete</mat-icon> <span>Delete</span>
                                        </button>
                                        <button mat-menu-item>
                                            <mat-icon>move_to_inbox</mat-icon> <span>Move to</span>
                                        </button>
                                        <button mat-menu-item>
                                            <mat-icon>report</mat-icon> <span>Report spam</span>
                                        </button>
                                    </mat-menu>
                                </th>
                                <td mat-cell *matCellDef="let element">

                                    <a class="menus" mat-icon-button aria-label="Details"
                                        matTooltip="{{'DETAILS'|translate}}"><i
                                            class="material-icons">format_list_bulleted</i></a>
                                    <a class="edit" mat-icon-button aria-label="Edit"><i class="material-icons"
                                            matTooltip="{{'EDIT'|translate}}">edit</i></a>

                                    <a [matMenuTriggerFor]="menu" mat-icon-button aria-label="menu"
                                        appClickStopPropagation matTooltip="{{'ACTIONS'|translate}}">
                                        <i class="material-icons"> more_vert </i>
                                    </a>
                                    <mat-menu #menu="matMenu" class="page-dropdown-menu">
                                        <button mat-menu-item>{{'REQUISITIES'|translate}}</button>
                                        <button mat-menu-item>{{'PERMISSIONS'|translate}}</button>
                                        <button mat-menu-item
                                            (click)="onDelete(element)">{{'DELETE'|translate}}</button>
                                    </mat-menu>
                                </td>
                            </ng-container>
                            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky:true"></tr>
                            <tr mat-row *matRowDef="let element; columns: displayedColumns;"> </tr>
                        </table>
                    </div>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky:true"></tr>
            <tr mat-row *matRowDef="let element; columns: displayedColumns;"
                [class.example-expanded-row]="element.isExpanded" class="example-element-row"
                (click)="element.isExpanded?element.isExpanded= false:element.isExpanded= true"> </tr>
            <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

        </table>
        <div *ngIf="noData | async" class="no-records">
            <i class="elsicon-no-found"></i>
            <span class="no-found-text">{{'NO RECORDS FOUND' |translate}}</span>
        </div>
        <mat-paginator
            [pageSizeOptions]="configurationService.pageSizeOptions"
            showFirstLastButtons
            class="mat-paginator table-paginaton">
        </mat-paginator>
    </div>
</div>