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
– paddyfields, Commented Apr 1, 2022 at 9: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
– Best Recipes, Commented Apr 1, 2022 at 9:49
Does this answer your question? Vuetify v-data-table custom header class styling not being applied — Nilesh Mishra
– Nilesh Mishra, Commented Apr 1, 2022 at 10:42
you need a deep selector to target/change vuetify styles. Here e .g >>> .v-data-table-header .header-of-chart — sassy_rog
– sassy_rog, Commented Apr 1, 2022 at 12:32

May · Accepted Answer · 2024-10-15 04:01:56Z

2

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

edited Oct 15, 2024 at 4:01

answered Oct 15, 2024 at 4:01

May

236 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin Buch · Accepted Answer · 2023-04-09 18:56:50Z

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

Rohìt Jíndal · Accepted Answer · 2022-04-01 10:18:23Z

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 1, 2022 at 10:18

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Vue, Vuetify table make headers bold

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related