PrimeNg TurboTable - ширина ячейки не соответствует ширине заголовка - PullRequest
Новая
       25

PrimeNg TurboTable - ширина ячейки не соответствует ширине заголовка

0 голосов
/ 23 апреля 2019

У меня есть TurboTable с группировкой строк и расширением строк, основанный на этой записи . Пример подзаголовка в документах делает нечто подобное. 

<ng-template pTemplate="body" let-expanded="expanded" let-columns="columns" let-rowData let-rowData.viewDetails="false" let-rowIndex="rowIndex">
    <ng-container *ngIf="groupField!=null">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData[groupField]] && rowGroupMetadata[rowData[groupField]].index === rowIndex">
            <td [attr.colspan]="columns.length+1"> <!-- Some custom logic for implementing row grouping as I need rowexpansion for something else -->
                <i (click)="toggleGroup(rowIndex)" [ngClass]="rowData.viewDetails ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                <span> {{rowData[groupField]}}</span>
            </td>
        </tr>
        <tr *ngIf="rowData.viewDetails">
            <td [attr.colspan]="1" [ngClass]="['table-action-element']">
                <!-- Checkbox here -->
            </td>
            <td [ngClass]="['table-action-element']"> <!-- This part links to the rowexpansion template which is working fine -->
                <a href="#" [pRowToggler]="rowData">
                <i [ngClass]="expanded ? 'fa fa-chevron-circle-down' : 'fa fa-chevron-circle-right'"></i>
                </a>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-container>
</ng-template>

Класс table-action-element обеспечивает width: 30px;, что можно увидеть в заголовках. Однако, когда я раскрываю группу строк, отображаемые столбцы строк не имеют этой ширины. Если я изменяю размер столбцов, вызывающих оскорбления, то они (вся вещь) изменяют размеры до правильной ширины.

Wrong width in columns

Когда я проверяю в браузере (Chrome / Firefox) и проверяю вычисленные значения, это то, что я вижу.

Computed width

... и ширина, поддерживаемая table-action-element, не переопределяется ни в одной точке (даже выше).

table-action-element CSS

Если я удаляю первый <tr> или создаю groupField=null (по сути, удаляю программно), форматирование выглядит нормально и, как и ожидалось. Right width in columns

Мне также нужен первый <tr>, чтобы делать то, что мне нужно, чтобы делать правильно. Как выяснить, откуда исходит помеха?

...