Two levels of row expansion

UI Components for Angular
Post Reply
g33
Posts: 7
Joined: 09 Jan 2019, 16:59

09 Jan 2019, 19:09

Can you have two levels of row expansion?

For example, could I add another rowexpansion template to the row group below so that they could see even more information beneath the vin/year/color row?

Code: Select all

<h3 class="first">Toggleable Row Groups</h3>
<p-table [value]="cars" dataKey="brand">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
    <!-- Is it possible to add another row expansion here? -->
</p-table>

g33
Posts: 7
Joined: 09 Jan 2019, 16:59

11 Jan 2019, 17:19

Posted on stackoverflow, and it seems like this is not possible...that there is only one level of row expansion allowed.

Can anyone confirm?

Thank you.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

15 Jan 2019, 10:57

I think it's not possible.

g33
Posts: 7
Joined: 09 Jan 2019, 16:59

16 Jan 2019, 18:03

Here's an answer showing how it can work:

https://stackblitz.com/edit/angular-rzu7rt

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests