I'm trying to create a table with frozen columns, ideally for horizontal scrolling if I can get it to work. What I'm getting at the moment though is the frozen headers and column, then directly below it (looking like it's in a different table entirely) I get the remaining headers and columns.
Anonymised code is below, but I'm hoping this is just a simple case of me following the documentation at https://www.primefaces.org/primeng/#/table wrong.
Code: Select all
<p-table [value]="records" [scrollable]="true" scrollHeight="150px" frozenWidth="200px">
<ng-template pTemplate="frozenheader">
<tr>
<th style="width:200px;height:84px">Frozen 1</th>
<th style="width:200px;height:84px">Frozen 2</th>
</tr>
</ng-template>
<ng-template pTemplate="frozenbody" let-record>
<tr>
<td>{{record.frozen1}}</td>
<td>{{record.frozen2}}</td>
</tr>
</ng-template>
<ng-template pTemplate="header">
<th>Normal 1</th>
<th>Normal 2</th>
<th>Normal 3</th>
<th>Normal 4</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record>
<tr>
<td>{{record.normal1}}</td>
<td>{{record.normal2}}</td>
<td>{{record.normal3}}</td>
<td>{{record.normal4}}</td>
</tr>
</ng-template>
</p-table>
Code: Select all
this.records = [
{ frozen1:'1', frozen2:'1', normal1:'1', normal2:'1', normal3:'1', normal4:'1' },
{ frozen1:'2', frozen2:'2', normal1:'2', normal2:'2', normal3:'2', normal4:'2' },
{ frozen1:'3', frozen2:'3', normal1:'3', normal2:'3', normal3:'3', normal4:'3' },
{ frozen1:'4', frozen2:'4', normal1:'4', normal2:'4', normal3:'4', normal4:'4' }
]