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>

Largeminded

Please correct your tagging.... – Wardlaw

Ok. Updated the tags – Largeminded

NO, turbotable only has 1 template rowexpansion. If you want more, you need to use tree table – Jotting

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? – Largeminded

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 :) – Define

@SebOlens Thanks. I'm not quite sure I follow how that would happen. Can you show an example of how you would do that? – Largeminded

Just add a chevron and then after the closing <tr> add <ng-container *ngTemplateOutlet="yourOwnRowExtentionTemplate; context: rowData"></ng-container> with a proper ngIf directive. This way you can nest them however you want. – Define

@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. stackblitz.com/edit/angular-rzu7rt I would be glad to give you the 50 points – Largeminded

Answer 1

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

1. In pTemplate=body, after the last TR, add an ng-container, with context for data you want to add

2. 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")

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

Largeminded