Customizing the appearance of table column labels in BootstrapVue

Seeking help with formatting my table labels to display as defined in the code. Currently, the labels only capitalize the first character of the word and ignore the rest. Any suggestions on how to achieve the desired value for label display? Currently, IP Address is being displayed as Ip Address (noticing the lowercase 'p' in IP) when rendered in HTML.

<style>
    .x-table {
        text-align: center;
        background-color: #f0f0f0;
        max-width: 20px;
    }
</style>

<html>
    <b-table 
        style="background-color: #FFFFFF; width: 100%; font-size: 8px !important;" 
        id="my-table"
        responsive
        sticky-header="275px"
        outlined
        selectable 
        select-mode="single"
        @row-selected="onRowSelected"
        :per-page="perPage"
        :current-page="currentPage"
        :items="items" 
        :fields="fields"
        :keyword="keyword"
     ></b-table>
</html>

<script>
    data: function () {
        return {
            fields: [
            { key: 'hostname', label: 'Hostname', tdClass: 'x-table', visible: true, stickyColumn: true},
            { key: 'ip_address', label: 'IP Address', tdClass: 'x-table', visible: true}
            ]
        }
    }
</script>

Result

https://i.sstatic.net/HIIe2.png

Answer №1

It seems like this code is related to using bootstrap-vue.

In order to customize the style of the headers in a b-table, you can utilize the thStyle property.

To ensure that the headers appear with normal styling, you can apply text-transform: none;.

If you need more information, check out the documentation at Bootstrap vue - b-table

Take a look at the "Field definition reference" section for further guidance.

Remember to include relevant tags for better visibility since this involves more than just pure vue implementation.

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

Pass along the value of a link upon clicking on it

I have implemented a simple list using md-data-table: <tr md-row md-select="device" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="device in devices.data"> <td md-cell style='text-align:left;vertical-align:middle&apo ...

Retrieve the parent object from the policy field type

Imagine you have a query that retrieves a list of products like the one below. query ProductList() { products() { name price stockQuantity isAvailable @client # This field exists only locally } } In addition, you've set up a type ...

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

Every time I try to install create-react-app, I keep encountering a frustrating 'network Socket timeout' error

$ npx create-react-app amazon-clone npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. Creating a new React app in D:\js\faceboom. npm WARN config global `--global`, `--local` are deprecated. ...

auto-scrolling webpage as elements come into view

Here is some jQuery code I have: $(".col-md-12").hide(); $(".button-div").hide(); $(".featurette-divider").hide(); $(".footer").hide(); $(".first").fadeIn(1000); $(".second").delay(900).fadeIn(1000); $(".third").delay(1800).fadeIn(1000); $(".fourth").dela ...

Meteor is not recognizing the defaultValue property in React

I'm puzzled by this issue—it's frustrating that it's not working as expected. <input type="text" id="first_name" name="first_name" className="form-control" defaultValue={this.props.user.first_name} required/> However, I've di ...

encountering difficulties compiling production assets using npm run production

npm run production is causing issues for me. I have attempted to delete the node_modules folder and then run npm install, but the problem persists. I also tried uninstalling and reinstalling npm on my system, yet I am still encountering the same error. I ...

Retrieve the chosen option index using AngularJS

It is common knowledge that a select list can have multiple options, each starting from [0]. For example: [0]<option>E.U</option> [1]<option>India</option> [2]<option>Peru</option> In my Angular application, I am using ...

Arrangement of JavaScript objects based on timestamp key

In JavaScript, there are specific rules that dictate the order of object properties. One interesting example caught my attention. When a timestamp in milliseconds is used as an object property key, the ordering does not function as expected. However, if ...

Creating visually appealing table designs with CSS

Greetings! I am currently utilizing JQuery fullCalendar within AngularJS and find myself in need of assistance regarding table styling. The fullcalendar has its own CSS file from the plugin, which can be viewed here. The issue arises due to the presence o ...

Transform PHP array into a properly structured array or object that can be easily used in JavaScript

My PHP code contains an array that looks like this: $variation = [ attribute_label => "Choose your Color", attribute_name => "pa_choose-your-color", variations => [ "819" => "Red", "820" => "Blue", ...

Looking to display database information using javascript

Currently, I am working on a project involving PHP code where I retrieve variables from an input and utilize AJAX. Here is the code snippet: $.ajax({ type: "GET", url: "controller/appointment/src_agenda.php", data: { function: "professional", ...

Is there a way to retrieve the selected value from a dropdown menu using vue.js?

I have a parent Vue component structured like this: <template> <form> <div class="row"> <div class="col-md-4"> <form-select id="color" name="color" :data="color">Color</form-select&g ...

Sort array in ReactJS using JSON data fetched from a URL

There is a URL where I have stored some data, such as: [ {"id":1,"first_name":"add","last_name":"add"}, {"id":2,"first_name":"sfdf","last_name":"aad"} ...

The HTML drag and drop API is causing an issue where the `getData`

My website features a drag-and-drop functionality, and I'm utilizing the HTML drag-and-drop API to implement it. However, when I attempt to drag and drop an SVG image onto the canvas, it displays as undefined, and I would like the image to remain in t ...

403 Forbidden - CSRF Token Not Recognized

I am encountering an issue with Node Express and CSurf - 403 (Forbidden) Invalid csrf token. After reviewing other solutions and attempting all available options, I am still unable to resolve this. The API functions perfectly when tested in Postman. Howe ...

Angular Navigation alters the view

I want to navigate to a different page using Angular routing, but for some reason it's not working. Instead of moving to the designated Payment Component page, the content is staying on my Main Component. Why is this happening? app.routing.module.ts ...

Is there a way for Gulp to halt execution if a folder is not accessible?

Currently, I am utilizing gulp to monitor various folders for changes and synchronize them with a specific set of destinations. However, within the build process, one of my source folders ("dist") gets deleted and recreated, causing disruptions to gulp.wat ...

developed a regular expression to disregard .goutputstream documents

After successfully creating a watcher with chokidar, I encountered an issue when trying to ignore certain files using regex. I am struggling to figure out what went wrong in my code or regex implementation. Below is the snippet of the code: const watcher ...

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...