PrimeNg развернул ряд на всю ширину контейнера

Question

У меня есть таблица PrimeNg с расширенной строкой для каждого элемента в таблице.

Расширенная строка должна содержать таблицу с данными

вот код шаблона.

<div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
<div class="col-12 text-right mb-2">
    <button class="btn btn-primary" (click)="createOrEditLandlordPropertyPortfolioModal.show()">
        <i class="fa fa-plus"></i> {{ l('Add') }}
    </button>
</div>
<p-table
    #dataTable
    (onLazyLoad)="getLandlordPropertyPortfolios($event)"
    [value]="primengTableHelper.records"
    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
    [paginator]="false"
    [lazy]="true"
    dataKey="id"
    [scrollable]="true"
    ScrollWidth="100%"
    [responsive]="primengTableHelper.isResponsive"
    [resizableColumns]="primengTableHelper.resizableColumns"
>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 20px"></th>
            <th style="width: 130px">
                {{ l('Actions') }}
            </th>
            <th style="width: 130px" pSortableColumn="id">
                {{ l('Id') }}
                <p-sortIcon field="id"></p-sortIcon>
            </th>
            <th style="width: 150px" pSortableColumn="name">
                {{ l('Name') }}
                <p-sortIcon field="name"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-record let-expanded="expanded">
        <tr>
            <td style="width: 10px">
                <a [pRowToggler]="record">
                    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                </a>
            </td>
            <td
                style="width: 130px"
                [hidden]="
                    !isGrantedAny(
                        'Pages.LandlordPropertyPortfolios.Edit',
                        'Pages.LandlordPropertyPortfolios.Delete'
                    )
                "
            >
                <div class="btn-group dropdown" dropdown container="body">
                    <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
                        <i class="fa fa-cog"></i><span class="caret"></span> {{ l('Actions') }}
                    </button>
                    <ul class="dropdown-menu" *dropdownMenu>
                        <li>
                            <a
                                href="javascript:;"
                                (click)="createOrEditLandlordPropertyPortfolioModal.show(record.id)"
                                >{{ l('Edit') }}</a
                            >
                        </li>
                        <li>
                            <a href="javascript:;" (click)="deleteReasonModal.show(record)">{{ l('Delete') }}</a>
                        </li>
                    </ul>
                </div>
            </td>
            <td style="width: 130px">
                <span class="ui-column-title"> {{ l('Id') }}</span>
                {{ record.id }}
            </td>
            <td style="width: 150px">
                <span class="ui-column-title"> {{ l('Name') }}</span>
                {{ record.name }}
            </td>
        </tr>
    </ng-template>

    <!--Nested table for property portfolios-->
    <ng-template pTemplate="rowexpansion">
        <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
            <p-table
                #nestedTable
                [value]="primengTableHelper.records"
                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                [paginator]="false"
                [lazy]="true"
                dataKey="id"
                [scrollable]="true"
                ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
            >
                <ng-template pTemplate="header">
                    <tr>

                        <th style="width: 130px" pSortableColumn="id">
                            {{ l('PropertyAddress') }}
                            <p-sortIcon field="id"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('PostalCode') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('AgentName') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Tenant') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                        <th style="width: 150px" pSortableColumn="name">
                            {{ l('Status') }}
                            <p-sortIcon field="name"></p-sortIcon>
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record let-expanded="expanded">
                    <tr>
                        <td style="width: 130px">
                            {{ record.properties.id}}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.postalCode }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.agentName }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.tenant }}
                        </td>
                        <td style="width: 150px">
                            {{ record.properties.status }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </ng-template>
</p-table>

Моя проблема в том, что p-таблица в развернутом ряду не имеет 100% ширины контейнера

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

Как мне сделать так, чтобы он соответствовал 100% ширине родительского контейнера?

Answer 1

Поскольку содержимое шаблона rowexpansion будет добавлено в таблицу, вы должны добавить теги tr и td следующим образом:

<ng-template pTemplate="rowexpansion">
    <tr>
        <td [attr.colspan]="columns.length + 1">
            <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                <p-table>
                ...
                </p-table>
            </div>
        </td>
    </tr>
</ng-template>

Answer 2

Я смог решить это следующим образом: colspan="4" атрибут

Вот код ответа

 <ng-template let-rowData pTemplate="rowexpansion" let-columns="columns">
        <tr>
            <td colspan="4">
                <p-table
                    #nestedTable
                    [value]="rowData.properties"
                    [tableStyle]="{ 'width.%': 100 }"
                    [scrollable]="true"
                    ScrollWidth="100%"
                >
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width: 130px" pSortableColumn="propertyAddress">
                                {{ l('PropertyAddress') }}
                                <p-sortIcon field="propertyAddress"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="postalCode">
                                {{ l('PostalCode') }}
                                <p-sortIcon field="postalCode"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="agentName">
                                {{ l('AgentName') }}
                                <p-sortIcon field="agentName"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="tenant">
                                {{ l('Tenant') }}
                                <p-sortIcon field="tenant"></p-sortIcon>
                            </th>
                            <th style="width: 150px" pSortableColumn="status">
                                {{ l('Status') }}
                                <p-sortIcon field="status"></p-sortIcon>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-record let-expanded="expanded">
                        <tr>
                            <td style="width: 130px">
                                {{ record.propertyAddress }}
                            </td>
                            <td style="width: 150px">
                                {{ record.postalCode }}
                            </td>
                            <td style="width: 150px">
                                {{ record.agentName }}
                            </td>
                            <td style="width: 150px">
                                {{ record.tenant }}
                            </td>
                            <td style="width: 150px">
                                {{ record.status }}
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </td>
        </tr>
    </ng-template>

Answer 3

Встроенный стиль

Попробуйте добавить следующую привязку встроенного свойства CSS к вложенной таблице:

[tableStyle]="{'width.%': 100}"

Отдельный стиль

Или, если вы не предпочитаете встроенные стилипопробуйте добавить это в связанный css-файл:

.expanded-table {
  width: 100%;
}

и класс во вложенную таблицу:

[tableStyleClass]="'expanded-table'"