Angular 2 - Expandable table row containing another table

Question

I'm looking for a datatable which has expandable rows containing other rows (basically a table within a table).

I have found an PrimeNG example but this only displays more information about the same row when it's expanded. There seems to be a few AngularJS example but I can't find any for Angular 2.

This is another example of what I'm looking for on Bootply, but when I use it the rows don't expand. I have the bootstrap stylesheet imported in index.html and I'm able to use other bootstrap features.

You can add another table inside row expansion template, it is up to you what to display in expanded content. There is also row grouping primefaces.org/primeng/#/datatable/rowgroup — Cagatay Civici

karthiks3000 karthiks3000 · Accepted Answer · 2017-07-06T20:05:33

You can add a primeng datatable within the rowexpansion template with the value of the datatable set to a property (usually an array) of a row.

<ng-template let-cp pTemplate="rowexpansion">
      <p-dataTable *ngIf="cp.associated_seasons" #dtSeasons [value]="cp.associated_seasons">
      </p-dataTable>
</ng-template>

here "cp" is your reference to a row in the main data table and cp.associated_seasons refers to a property of the row called "associated_seasons".

Angular 2 - Expandable table row containing another table

1 Answers