Row expansion by providing a row template

In many cases, it is not possible to accommodate all of the data in the table. The secondary or additional information of table data needs to be populated in a different representation. The row expansion features allows displaying detailed content for a particular row (that is, display data in a separate block which will appear on request). To use this feature, enable the expandableRows property and add an expander column using the expander property as a separate column along with regular columns in order to toggle the row. To declare the expanded content, provide a pTemplate directive with rowexpansion as the value. The local template reference variable from ng-template is used to access the table data.

The component with the row expansion feature to display full details of a browser would be written as follows:

<p-dataTable [value]="basicBrowsers" expandableRows="true"   
  [expandedRows]="expandedRows">
  <p-column expander="true" styleClass...