Несколько столбцов в заголовке строки группы в ngx-datatable angular6 - PullRequest
Новая
       15

Несколько столбцов в заголовке строки группы в ngx-datatable angular6

1 голос
/ 07 июня 2019

Я использую ngx-datatable для отображения таблицы данных с группировкой строк.

Вот HTML-код 

<ngx-datatable [rows]="data" [loadingIndicator]="loadingIndicator" [groupExpansionDefault]="false"
    [groupRowsBy]="'Route'">
    <!-- Header Template -->
    <ngx-datatable-group-header [rowHeight]="60">
        <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
            <div class="table-group-header group-header">
                <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                    [class.datatable-icon-down]="expanded" (click)="toggleExpandWaybills(group)">
                    {{group.key}}
                </span>
            </div>
        </ng-template>
    </ngx-datatable-group-header>

    <ngx-datatable-column name="Route" [width]="200">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.route}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Price" [width]="100">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.price}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Days" [width]="50">
        <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.days}}
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

Вот как это выглядит

enter image description here

Примеры, которые я видел, предоставляют один шаблон, который будет отображаться в строке заголовка.То, что я хочу, это общее количество каждого столбца в строке заголовка (отмечены красными прямоугольниками на изображении).Как я могу также предоставить несколько столбцов в строке заголовка группы?

Я попытался предоставить все значения в одном и том же шаблоне с правильной шириной, но проблема в том, что ширина зафиксирована для div в шаблоне и как размер столбцовможно изменить в ngx-datatable, чтобы макет шаблона строки заголовка не подходил (как я указал фиксированную ширину).

Вот как я это сделал 

<ngx-datatable-group-header [rowHeight]="60">
    <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div class="table-group-header group-header">
            <span style="cursor: pointer" [class.datatable-icon-right]="!expanded"
                [class.datatable-icon-down]="expanded" (click)="toggleExpandWaybills(group)">
                <span style="width: 300px;">
                    {{group.key}}
                </span>
                <span style="width: 100px;">
                    {{sumPropertyInArray(group.value, 'price') | number: 0}}
                </span>
                <span style="width: 50px;">
                    {{sumPropertyInArray(group.value, 'days')}}
                </span>
            </span>
        </div>
    </ng-template>
</ngx-datatable-group-header>
...