PrimeNG：数据表UI构建列表

Question

我正在尝试构建此UI，它使用schoolName作为标题，并为每个schoolName创建一个新标头，并将其用作careOferingName的标题。

HTML dataTable：

const request = require('request');
const API_KEY = '************';


var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&safeSearch=strict&maxResults=5&videoSyndicated=true&videoEmbeddable=true&q=Helge&type=video&key=" + API_KEY;
request(url, function (error, response, body) {
    if (!error && response.statusCode == 200) {
        obj = JSON.parse(body);
        var items = obj.items;
    }});

CareOfferingSpace课程：

 <p-dataTable [value]="this.careOfferingSpaceList" [editable]="true" >
              <!-- <p-header><div class="ui-helper-clearfix" style="width:100%"><span class="results-text" >Showing {{mccCacheService.numOfSystemAlerts}} results</span> <button type="button" pButton icon="fa-plus" style="float:right" (click)="showDialogToAdd()" label="Add System Alerts"></button></div></p-header> -->         
              <p-column field="id" hidden="true"></p-column>
              <p-column field="careOfferingName" header="Total Spaces" ></p-column>         
              <p-column field="spaceAvailable" header="Spaces Available" [editable]="true" ></p-column>         
            </p-dataTable>

示例对象响应：

 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;
      }