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="col-icon" header="Toggle">
  </p-column>
  <p-column field="engine" header="Engine"></p-column>
  <p-column field="browser" header="Browser"></p-column>
  <p-column field="platform" header="Platform"></p-column>
  <p-column field="grade" header="Grade"></p-column>
  <ng-template let-browser pTemplate="rowexpansion">
    <div class="ui-grid ui-grid-responsive ui-fluid 
      rowexpansion-layout">
      <div class="ui-grid-row">
        <div class="ui-grid-col-9">
          <div class="ui-grid ui-grid-responsive ui-grid-pad">
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Engine:</div>
              <div class="ui-grid-col-10">{{browser.engine}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Browser:</div>
              <div class="ui-grid-col-10">{{browser.browser}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Platform:</div>
              <div class="ui-grid-col-10">{{browser.platform}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Version:</div>
              <div class="ui-grid-col-10">{{browser.version}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Rating:</div>
              <div class="ui-grid-col-10">{{browser.rating}}</div>
            </div>
            <div class="ui-grid-row">
              <div class="ui-grid-col-2 label">Grade:</div>
              <div class="ui-grid-col-10">{{browser.grade}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</p-dataTable>

If required, the expanded rows can be stored in an array variable inside the component class using the expandedRows property. The following screenshot shows a snapshot result of a component with the row expansion feature as an example:

By default, multiple rows can be expanded at once. We can make a strict single row expansion using the rowExpandMode property by setting it as single.

We can apply the row expansion behavior for grouped tables as well:

• The component provides an expandableRowGroups Boolean property which is used to create the icon to toggle the row groups.
• By default, all the rows will be expanded. The expandedRowGroups property is used to hold the row data instance to expand specific row groups by default.