Tips for modifying the height of a bootstrap-vue table and enabling scrolling with a fixed header

I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code:

Code inside the 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>

Scoped style:

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

Answer №1

To enable scrolling functionality, you can add the responsive prop to the b-table tag. For horizontal scrolling:

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

The responsive option allows for scrollable content.

If you need vertical scrolling with sticky headers, use the sticky-headers option, for example:

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

Make sure you have data specified in the items variable.

For a fixed header, include the fixed attribute within the <b-table> tag, like this:

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

To set the height, define a valid CSS value with units for the sticky-header property in your CSS, e.g.,

sticky-header="200px"

For more information, refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Resolving issues with Vue's global EventBus in my project

I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from th ...

Incorporating a value into vue.js will increase the existing number by the specified amount

Encountering a strange issue while setting up a pagination system. Attempting to increment the value for the next page by 1, but instead of increasing, it appears that the value is being appended. this.page = 1 <a v-if="this.total_pages > thi ...

`Is there a way to retrieve the ID of an element upon clicking on it?`

Can you help me with a JavaScript query? I have two HTML div elements with ids of 'div1' and 'div2'. When I click on any of the divs, I want to display the id of the clicked div. Any thoughts? <div id="div1"></div> <div ...

Guide to retrieving RabbitMQ queue messages in Vue.js application

I am currently working on a project using Spring Boot to publish messages to RabbitMQ and then push them to a queue. I also have a Vue.js frontend application that needs to consume these messages from the RabbitMQ queue. Despite searching online, I haven ...

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

<div class="container"> <div class="row"> <div class="col-lg-12"> <div class="news-title"> <h3 class="title">NEWS & ARTICLES</h3> ...

The background color of absolute divs fails to extend across the entire screen

Trying to implement a loading screen in my VueJs app using only divs. The issue is that the background color of the divs (loadingScreen) does not cover the entire screen, but only as much as the loader's height. I've attempted adding margin to th ...

Order of evaluation for computed properties in Vue.js

In my project, there is a crucial component that relies on the 'data1' props. <template> <div> <component1 :data='data1'><component1> </div> <template> The 'data1' property ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

Looking for an easy way to use string.Format with <a ... class="button" in ASP.NET MVC?

Example link <div style="float:right;"><a href="<%= Url.Content("~/Home/List") %>" class="button"><span>Return to List</span></a></div> I am attempting to append an Id from my Model to the end of a URL, as shown ...

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

Repeated keys found within a component's v-for loop

Dealing with v-for Duplicate Keys Error Even though the list is returned successfully, there seems to be a problem when I update a user in the array by changing their role. An error about duplicate keys is triggered. The key is assigned using the user&apo ...

In VueJS, the v-for directive allows you to access both parameters and the event object within

Imagine having nested elements that repeat using v-for in the following structure: <div id="container"> <div v-for="i in 3"> <div v-for="j in 3" v-on:click="clicked(i,j)"> {{i+&a ...

Can anyone explain why I am having trouble loading JavaScript files into a different HTML file?

Currently, I am developing an electron application. In my index.html file, I have successfully loaded JavaScript files in the head tag and can access the JS functions without any problems. Now, I have created a separate browser window with another HTML fi ...

Guide on utilizing every array value during each iteration of a for loop, ensuring that the same number of values

Below is the equipos_seleccionados array: ["12 - v4", "100 - v500"] This is a preview of the frontend: When you input values in the head section, textboxes are generated automatically. Objective: Assigning the value 12 - v4 to the fi ...

Missing Home and Search icons on Jquery mobileNavigationBar

I am having an issue where the Home and search icons are not displaying properly in the output. Instead, they are showing up as hyperlinks. Can someone please help me with this? Here is the code I am using: <meta name="viewport" content="width=device ...

Elevated Drawer Navigation Menu Switch pushes content down to reveal active links

I am currently facing challenges in creating a top drawer navigation menu for a mobile device. My inspiration is the navigation menu utilized in the Google+ iPhone application. When the menu is clicked on, my goal is to have it slide down and push the con ...

How to dynamically inject HTML content from a child component into a different component using Angular 5

Is it possible to customize the content of a reusable header section based on the current route data in Angular? The header currently displays a title and description pulled from the route data property. My concern is how to dynamically inject different H ...

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

I am receiving a high volume of row data from the server. What is the best way to present this information on a redirected page?

There is a scenario where Page 1 receives a substantial amount of row data in JSON format from the server. The goal is to present this information on Page 2, which will be accessed by clicking on Page 1. To accomplish this task, JavaScript/jQuery and PHP ...

Changes to the className of a React component will trigger a re-render of

When the className of the parent changes, React children will re-render. import React from 'react'; import { useSelector } from 'react-redux'; import items from './ItemsList.js'; import Item from './Item'; import &ap ...