Vue, Vuetify table make headers bold-CodePudding

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

CodePudding user response：

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;
}

CodePudding user response：

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
          
        >
          <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%',
        }
      ],
    }
  },
})