Using column and row grouping

The DataTable component provides grouping on both column and row level.

Column grouping

Columns can be grouped at the header and footer area using p-headerColumnGroup and p-footerColumnGroup tags, which define the array of columns using colspan and rowspan properties. The table rows are defined using the p-row tag, which holds the column components. The component with column grouping would be written as follows:

<p-dataTable [value]="basicBrowsers">
  <p-headerColumnGroup>
    <p-row>
      <p-column header="Browser" rowspan="3"></p-column>
      <p-column header="Details" colspan="4"></p-column>
    </p-row>
    <p-row>
      <p-column header="Environment" colspan="2"></p-column>
      <p-column header="Performance" colspan="2"></p-column>
    </p-row>
    <p-row>
      <p-column header="Engine"></p-column>
      <p-column header="Platform"></p-column...