CODEWITHSUNDEEP
angularprimeng
ToDo
ToDo

Reputation: 782

Angular 2 - Expandable table row containing another table

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.

Upvotes: 2

Views: 5849

Answers (1)

karthiks3000
karthiks3000

Reputation: 912

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

Upvotes: 3

Related Questions