Reputation: 341
Is it possible to make just the table body without the table header of a table (tree Grid) in nebular theme vertically scrollable?
The basic tree grid looks like this:
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
I achieved to wrap it into a nb-list
so that makes it scrollable but the table header will not stay in place.
<nb-list style="max-height: 250px;">
<nb-list-item>
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
</nb-list-item>
</nb-list>
When i examine the HTML structure in browser i see that the HTML element i want to be scrollable is <tbody>
element. So i also tried to add some css but also without effect
tbody {
max-height: 100px !important;
overflow-y: scroll !important;
}
I just cant access the tbody element and give it a class that i can handle with css or something so i just dont know what to do anymore...
Upvotes: 1
Views: 471