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

Answer 1

For anyone looking to use this in vuetify 3

in the script for headers, you can add headerProps with style in it

example use case:

data() {
    return {
      search: "",
      headers: [
        {
              title: 'Boat Type', 
              align: 'start', 
              key: 'name', 
              headerProps: 
              {
                  style: 'font-weight: 1000'
              } 
        }
      ],
    };
  },

Answer 2

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

Answer 3

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