PrimeNg expanded row full width of container

I have a PrimeNg table with an expanded row for every item in the table.

The expanded row should contain a table with data

here is the code of the template.

<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>

My problem is that p-table, that in an expanded row, have not 100% width of the container

Here is how it's like

How I can make it fit 100% width of parent container?

Inline style

Try adding the following inline CSS property binding to your nested table:

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

Or if you don't prefer inline styles, try adding this to the associated css file:

.expanded-table {
  width: 100%;
}

and the class to the nested table:

[tableStyleClass]="'expanded-table'"

Table - Row Expansion expand all lines, <div class="ui-g"> <div class="ui-sm-2 ui-md-2 ui-lg-2 ui-xl-2"> </div> <div You need to fill-in the expanded row keys, there is a prob for it. PrimeNG is developed by PrimeTek Informatics, the world-renowned vendor with years of expertise in developing open source UI component libraries. 80+ Components The most complete set of native widgets featuring 80+ easy to use components for all your UI requirements.

As the content of the rowexpansion template will be added inside of the table you have to add the tr and td tag like that:

<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>

Row Expand Pushes Columns & Ruins Dropdown Filter, Board index Angular PrimeNG � Row Expand Pushes Columns & Ruins Dropdown Filter <ng-template pTemplate="rowexpansion" pTemplate="header " let-columns> <tr> <th style="width: 3em"></th> <th + 1" *ngIf="logsObs. exception"> <div class="ui-g ui-fluid" style="font-size:16px;padding:20px"> <div� Both examples work as expected, the template passed in the ng-template is then displayed in whichever row is expanded. My question is whether in the case of passing a component in the ng-template, it is possible to get a reference of the child component in the expanded row (anotherDatatable in this case).

I was able to solve it like this Using colspan="4" attribute

Here is the code of answer

 <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>

Get reference of component inside ng-template, I've created a wrapper component for PrimeNG data table to be able to handle all data expander="true" [style]="{'width':'35px'}"></p-column> <p-column *ngFor=" let col of <ng-container *ngTemplateOutlet="rowTemplate; context: {$implicit: (Of course the component in the expanded row could be any� PrimeNG has Grid CSS--a responsive and fluid layout system optimized for mobile devices, tablets, and desktops. PrimeNG components use Grid CSS internally, but this lightweight utility can be used as standalone as well. CSS Grid is based on the 12-columns layout as many other grid systems. The total width of all columns is 100%.

Table scroll with lazyload and row expansion has a wrong behavior , In cols, i don't have set the width attribute in pixels. so the table has only the vertical scroll here. The scroller has the appropriate size. Everything� PrimeNG 4.2.2 Released. PrimeNG 4.2.2 is now available with 50+ improvements featuring the all new Sidebar component, performance enhancements and improved quality. Sidebar. Sidebar is the new addition to the suite, it is a container component displayed at the edges of the screen as an overlay. There is also a full screen mode available as well.

The responsive grid system in PrimeNG, The total width of all columns is 100%. In this section, we will explain all features of the PrimeNG grid system in details. Basic principles. The� A Row is a widget used to display child widgets in a horizontal manner. The Row widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient

Expandable rows support for Frozen Columns � Issue #6596 , rowexpansion is not expanding to full width when we have frozen columns, but a PrimeNG version: 6.1.3 @thedanielgray I think it can be achieved by using position: fixed on a container div , and scrolling can be solve like� To create a full-width button, add a width of 100% and make it into a block element:

Comments
  • You can put this example in JSFiddle or any one, plz
  • This not helps :(
  • Looks like it helped a little. Glad you were able to solve it with the colspan. :-)