title: PrimeNG: Datatable UI building list
body: <p>I am trying to build this UI where it uses the schoolName as the title and creates a new header for each schoolName and uses it as the heading for careOferingName.</p>
  
  <p><a href="https://i.stack.imgur.com/3nvio.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nvio.png" alt="enter image description here"></a>     </p>
  
  <p>HTML dataTable :</p>
  
  <pre><code> &lt;p-dataTable [value]="this.careOfferingSpaceList" [editable]="true" &gt;
                &lt;!-- &lt;p-header&gt;&lt;div class="ui-helper-clearfix" style="width:100%"&gt;&lt;span class="results-text" &gt;Showing {{mccCacheService.numOfSystemAlerts}} results&lt;/span&gt; &lt;button type="button" pButton icon="fa-plus" style="float:right" (click)="showDialogToAdd()" label="Add System Alerts"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/p-header&gt; --&gt;         
                &lt;p-column field="id" hidden="true"&gt;&lt;/p-column&gt;
                &lt;p-column field="careOfferingName" header="Total Spaces" &gt;&lt;/p-column&gt;         
                &lt;p-column field="spaceAvailable" header="Spaces Available" [editable]="true" &gt;&lt;/p-column&gt;         
              &lt;/p-dataTable&gt;
  </code></pre>
  
  <p>CareOfferingSpace class :</p>
  
  <pre><code> export class CareOfferingSpace {
          public id: number;
          public careOptionId: number;
          public weekNo: string;
          public startDate: string;
          public endDate: string;
          public spaceAvailable: string;
          public careOfferingSpaceAvailableId: number;
          public schoolId: number;
          public schoolName: string;
          public careOfferingName: string;
        }
  </code></pre>
  
  <p>Sample object response :</p>
  
  <pre><code>"careOffering": [
           {
              "id": 3,
              "careOptionId": 1713,
              "schoolId": 422,
              "schoolName": "ABC Learning",
              "careOfferingName": "Before School",
              "spaceAvailable": null,
              "careOfferingSpaceAvailableId": 3
            }, {
              "id": 3,
              "careOptionId": 1713,
              "schoolId": 422,
              "schoolName": "ABC Learning",
              "careOfferingName": "After School",
              "spaceAvailable": null,
              "careOfferingSpaceAvailableId": 3
           }, ...
  </code></pre>