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