Vue, Vuetify table make headers bold

Question

I am using Vue and Vuetify to generate a table which I do. I want to make the headers of the table bold. Hence, I am thinking of passing a class to the headers and customize the headers from the CSS. Despite the fact that when I inspect the page(F12-> inspector) on the header my custom class has been passed but it don't do what I want it to do I feel like the code is overridden somehow. Can you please help ?

HTML:

   <v-data-table
                  :headers="headers"
                  :items="myDataPSUTwo"
                  :search="search"
                ></v-data-table>

the script:

data() {
    return {
      search: "",
      headers: [
        {
          text: "Name",
          align: "center",
          filterable: true,
          value: "name",
          class:"header-of-chart"
        },
        { text: "Value", value: "value" },
        { text: "Unit", value: "units" },
      ],
    };
  },

the CSS:

<style scoped>
.header-of-chart {
  font-weight: bold;
}

</style

If you can see your class has been applied when inspecting HTML, its properties may be overridden by the cascading nature of CSS if it is of less specificity. I can't see this from what you've provided, but worth trying font-weight: bold !important; — paddyfields, Apr 01 '22 at 09:39
@paddyfields when i inspect the element i get this ``` class="text-center my-custom-cls sortable" ``` even if temporarily delete the other two classes still isnt doing anything ...i have added the !important as you suggested.. any other ideas? — Best Recipes, Apr 01 '22 at 09:49
Does this answer your question? [Vuetify v-data-table custom header class styling not being applied](https://stackoverflow.com/questions/65688987/vuetify-v-data-table-custom-header-class-styling-not-being-applied) — Nilesh Mishra, Apr 01 '22 at 10:42
you need a deep selector to target/change vuetify styles. [Here](https://stackoverflow.com/a/55368933/9172668) e .g `>>> .v-data-table-header .header-of-chart` — sassy_rog, Apr 01 '22 at 12:32

score 1 · Answer 1 · edited Apr 09 '23 at 18:56

v-data-table has a header slot. You can use it to modify the header's style.

<template>
    <div id="app">
        <v-app id="inspire">
            <v-data-table
                :headers="headers"
                :items="desserts"
                :sort-by="['calories', 'fat']"
                :sort-desc="[false, true]"
                multi-sort
                hide-default-header
                class="elevation-1"
                >
                <template v-slot:header="{ props }">
                    <th v-for="head in props.headers">{{ head.text.toUpperCase() }}</th>
                </template>
            </v-data-table>
        </v-app>
    </div>
</template>

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
        return {
            headers: [
                {
                    text: 'Dessert (100g serving)',
                    align: 'start',
                    sortable: false,
                    value: 'name',
                },
                { text: 'Calories', value: 'calories' },
                { text: 'Fat (g)', value: 'fat' },
                { text: 'Carbs (g)', value: 'carbs' },
                { text: 'Protein (g)', value: 'protein' },
                { text: 'Iron (%)', value: 'iron' },
            ],
            desserts: [
                {
                    name: 'Frozen Yogurt',
                    calories: 200,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                }
            ],
        }
    },
})

score 0 · Answer 2 · answered Apr 01 '22 at 10:18

0

v-data-table already have header text in bold that's the reason it is not impact anything. You want to increase the font size ? You can use it like this :

.header-of-chart {
  font-size: 25px !important;
}

answered Apr 01 '22 at 10:18

Debug Diva

26,058
13
70
123

Vue, Vuetify table make headers bold

2 Answers2