CODEWITHSUNDEEP
cssvue.jssassvuetify.js
Daniel
Daniel

Reputation: 139

change the style of Vuetify table header

I am trying to change the default color of vuetify table header. I managed to change the header using custom class using code below:

headers = [
    {
        text: "Metering Point",
        align: "start",
        sortable: true,
        value: "meteringpoint",
        class: "success--text title"
    },
]

Unfortunately, the checkbox style for select all is still on default color. As the header for the check box is not declared on the array headers so it is not declared with the custom class.

Previously I tried to overwrite it on the tag with this code below:

.v-data-table-header {
    background-color: grey;
}

but it doesn't work.

how do I declare the class for the checkbox? Or is there any possible way for me to overwrite the default styling?

Upvotes: 1

Views: 7534

Answers (2)

Daniel
Daniel

Reputation: 139

As said by @StevenSiebert. I need to check what is the class after being rendered.

I checked the table header class name and use this code inside the style tag to change the style for that class:

::v-deep .v-data-table-header {
  background-color: #DCDCDC;
}

Here is the reference I found for Scoped CSS in Vue: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Upvotes: 5

Nick van der Waal
Nick van der Waal

Reputation: 414

when taking a look at the official Vuetify Docs here: Vuetify API

It gives the option to set checkbox-color on the v-data-table (for all checkboxes) or v-data-table-header (for the select all checkbox) which would be my choice considering it is officially supported.

<v-data-table
  :items="desserts"
  headers = [
    {
      text: "Metering Point",
      lign: "start",
      sortable: true,
      value: "meteringpoint",
      class: "success--text title"
    },
  ]
  checkbox-color="#DCDCDC"
></v-data-table>

Upvotes: 1

Related Questions