Search code examples
javascriptvue.jsbootstrap-vue

BootstrapVue - table column label format

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

Solution

  • 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.