Two levels of row expansion with primeNG turbo table

Question

What would be a good way to add two levels of row expansion with the primeng turbo table extension?

I've tried thinking through how to do this, as it does not seem to come out of the box.

There is only one rowexpansion template to the row group below. I would like it to look like the first option on the site (here), but also have another toggle row beneath the data (two levels)

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

NO, turbotable only has 1 template rowexpansion. If you want more, you need to use tree table — phucnh, Jan 11 '19 at 02:18
Thanks. Is there another way I might be able to do this? Could I somehow toggle inserting/removing a row in a way that works with turbo table? — user749798, Jan 11 '19 at 18:03
You can always just implement your own rowexpansion in the `pTemplate=body` template and add as many rowexpansions as you like. I did that in some project a year ago and it worked fine :) — SebOlens, Jan 14 '19 at 23:27
@SebOlens Thanks. I'm not quite sure I follow how that would happen. Can you show an example of how you would do that? — user749798, Jan 14 '19 at 23:53
Just add a chevron and then after the closing `` add `` with a proper ngIf directive. This way you can nest them however you want. — SebOlens, Jan 15 '19 at 09:24
@SedoOlens Thanks for the help. I'm getting close but still unclear how to get the 2nd row toggler to work (under vin). How do I reference the container to toggle it? Here is a stackblitz. https://stackblitz.com/edit/angular-rzu7rt I would be glad to give you the 50 points — user749798, Jan 15 '19 at 16:27

score 4 · Accepted Answer · answered Jan 16 '19 at 16:11

Below is one way to get two level expansion to work, thanks to directional help from @SebOlens.

In pTemplate=body, after the last TR, add an ng-container, with context for data you want to add
Add an extension template. In the template, make the row visible only if the 2nd level expansion is clicked (i.e., use a property such as "viewDetails")
Add the dropdown chevron wherever you like in the pTemplate body. Toggle the value of "viewDetails" when clicked

Here is the stackblitz link: https://stackblitz.com/edit/angular-rzu7rt

Template code:

<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 ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex" let-rowData.viewDetails="false">
        <tr>
            <td>{{rowData.vin}}
                <! -- added row expansion chevron -->
                    <i (click)="rowData.viewDetails = !rowData.viewDetails" [ngClass]="rowData.viewDetails ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
            </td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
        <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
        <ng-template #extensiontemplate>
            <tr *ngIf="rowData.viewDetails">
                <td colspan="3">
                    Additional row data here for VIN ID: {{rowData.vin}}                  
                </td>
            </tr>
        </ng-template>
    </ng-template>
</p-table>

Two levels of row expansion with primeNG turbo table

1 Answers1