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 · answered Apr 02 '22 at 19:09

v-data-table have a header slot. You can use it to modify header 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() }}
          </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

Rohìt Jíndal

16,572
12
64
110

Vue, Vuetify table make headers bold

2 Answers2