CrazyEight
CrazyEight

Reputation: 341

Nebular Tree Grid table body scrollable

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

Answers (0)

Related Questions