I am currently experiencing an issue with my Angular data table. Everything works fine until I add the option parameter "scrollY: '200px'" or "scrollY: '50vh'", which causes a bug in my table header. It becomes unresponsive, and the sizing only changes when I click on the header.
Upon resizing my window, the table content becomes responsive but the header sizing remains static:
However, clicking on the header fixes the sizing and aligns it with the rest of the table:
My setup consists of using angular-datatables and Bootstrap 5.2, with the following options:
this.dtOptions = {
pagingType: 'full_numbers',
paging: false,
processing: true,
dom: "lfrti",
scrollY: '200px',
responsive: true,
scrollCollapse: true,
language:{
search: "Suche"
},
};
Below is the HTML code snippet:
<div class="card-body m-2">
<table class="table table-bordered table-striped table-hover" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.name}}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>{{ user.role.name}}</td>
<td>{{ user.lastLogin }}</td>
<td>{{ user.permanent }}</td>
</tr>
</tbody>
</table>
</div>