CODEWITHSUNDEEP
htmlcssvue.jsbootstrap-4bootstrap-vue
Raven
Raven

Reputation: 41

How to adjust height of bootstrap-vue table and make it scrollable with fixed header

I have a div with b-table inside it. I want to adjust the height of the table and make it scrollable with fixed header. Please someone help. here is my code.

here is the code inside template:

<div class="tbl-barangay">
    <b-table striped hover :items="items" :fields="fields">
        <template v-slot:cell(name)="data">
            <router-link to="/destination">{{ data.value }}</router-link>
        </template>

        <template v-slot:cell(completeaddress)="data">
            {{ data.item.address.street }}, {{ data.item.address.city }}
        </template>
    </b-table>
</div>

here is my scoped style:

.tbl-barangay {
    height: 150px !important;
}

Upvotes: 1

Views: 12132

Answers (1)

Nompumelelo
Nompumelelo

Reputation: 957

So, to make it scrollable - add this pass the responsive prop to the b-table tag. e.g:
For a horizontal scroll:

<b-table responsive :items="items"></b-table>

Where responsive is just an option for the type of scroll-able.

For vertical scroll, use sticky-headers, eg:

<b-table sticky-header :items="items" head-variant="light"></b-table>

Assuming you have some data defined in items.

For fixed header: simply pass the fixed element to the <b-table> tag, e.g:

 <b-table fixed responsive :items="items" :fields="fields" ... >

And for the height: in your css - set the sticky-header prop to a valid css height with units. eg:

sticky-header="200px"

For more :visit this doc

Upvotes: 5

Related Questions