All related items can be grouped under one sub-group using the sub-headers feature. This use case is similar to expanded row groups but these sub-headers cannot be collapsed. This behavior is enabled by setting rowGroupMode="subheader" and groupField="engine". The groupField property is set to a specific categorized column.

The row grouping feature with the sub-header option would be written as follows:

<p-dataTable [value]="browsers" sortField="engine"  
  rowGroupMode="subheader"
  groupField="engine" [styleClass]="'rowgroup-padding'">
  <p-header>Subheader</p-header>
  <ng-template pTemplate="rowgroupheader" let-rowData>
    {{rowData['engine']}}
  </ng-template>
  <p-column field="browser" header="Browser" sortable="true">
  </p-column>
  <p-column field="platform" header="Platform" sortable="true">
  </p-column>
  <p-column field="grade" header="Grade" sortable="true">
  </p-column>
</p-dataTable>

The following screenshot shows a snapshot result of the table with the sub-header grouping feature as an example:

In the preceding use case, all browser details are grouped based on a unique browser engine as a sub-header.