Home » vue » BootstrapVue – table column label format

BootstrapVue – table column label format

Posted by: admin November 26, 2021 Leave a comment

Questions:

Looking for assistance on formatting my table labels to display as it as defined in the code. Currently, the labels only Capitalize the first character of the word, and it ignores the rest. Any idea how to achieve the defined value as the label display? Currently IP Address is being displayed as Ip Address (notice the lowercase p in IP) when it renders in the 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

enter image description here

Answers:

I’m assuming This is bootstrap-vue.

When creating the b-table you can pass the style object in thStyle property.

You can force the headers to be of normal style with text-transform: none;.

Read the documentation here: Bootstrap vue – b-table

Refer the "Field definition reference" section

Since this is not pure vue, make sure to add the proper tags so that you can reach a more relevant audience.