PrimeNG TurboTable手风琴滚动列

Question

我是PrimeNG及其涡轮增压表组件的新手。我试图创建一个网格，其中几列已固定，其余为水平滚动。我也能够实现同样的目标。

现在我想添加一个手风琴，默认情况下在滚动列区域的每一行下打开。我需要两侧的行也是同步的。当我尝试打印任何值时，它会在固定列和滚动列下打印。有什么方法可以实现这个功能吗？屏幕截图和使用的示例代码如下所示。

https://www.primefaces.org/primeng/#/table/scroll

HTML

<p-table [columns]="scrollableCols" [frozenColumns]="frozenColumns" [value]="ratios" [scrollable]="true" 
frozenWidth="50%" class="grid-ratios" dataKey="strokeId" [expandedRowKeys]="expandedRows">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns;">
    </colgroup>
  </ng-template>
 <ng-template pTemplate="header" let-columns>
   <tr>
      <th *ngFor="let col of columns;">
          {{col.header}}
      </th>
   </tr>
 </ng-template>
 <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
   <tr>
      <td *ngFor="let col of columns">
          {{rowData[col.field]}}
      </td>
   </tr>
 </ng-template>
 <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
 <tr>
   <td [attr.colspan]="columns.length + 1">
     <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
      zam zam
     </div>
   </td>
 </tr>
</ng-template>
</p-table>

TS

this.scrollableCols = [
  {field: 'key6', header: 'Header 6'},
  {field: 'key7', header: 'Header 7'},
  {field: 'key8', header: 'Header 8'},
  {field: 'key9', header: 'Header 9'},
  {field: 'key10', header: ''}
];

this.frozenColumns = [
  {field: 'key1', header: 'Header 1'},
  {field: 'key2', header: 'Header 2'},
  {field: 'key3', header: 'Header 3'},
  {field: 'key4', header: 'Header 4'},
  {field: 'key5', header: 'Header 5'},
];

this.ratios = [
  {id: 1234, key1: ' BLACK', key2: '100', key3: 'AA', key4: 'ZW', key5: '10',
  key6: 'Template 01', key7: '12/03/2018', key8: '12/04/2019', key9: 'Zam', key10: 'zamzamzam'},
  {id: 1235, key1: ' RED', key2: '100', key3: 'AB', key4: 'ZW', key5: '10',
  key6: 'Template 01', key7: '12/03/2018', key8: '12/04/2019', key9: 'Zam', key10: 'zamzamzam'}
];

// Row expand by default
const thisRef = this;
this.ratios.forEach(function(ratio) {
  thisRef.expandedRows[ratio.strokeId] = 1;
});