Change v-data-table's header's color

Quentin 0
Viewed 32

I'd like to change the color of the header in my v-data-table but didn't find any way in the Vuetify documentation. Does anyone know how to do it ? I can change the rest of the colors on the table but no the header...

<v-card-text>
    <v-data-table
      dark
      :footer-props="{ 'items-per-page-options': [10, 25, -1] }"
      dense
      calculate-widths
      fixed-header
      height="498"
      :headers="headers"
      :items="res"
      sort-by="publicationDate"
      :sortDesc="sortVal"
    >
      <template #item.video="{ item }">
        <a
          target="_blank"
          v-if="item.video != ''"
          class="links1 video-icon"
          :href="item.video"
        >
          <v-btn dark icon>
            <v-icon class="ic1">mdi-movie</v-icon>
          </v-btn>
        </a>
      </template>

      <template #item.title2="{ item }">
        <!-- NEWS column -->
        <a
          target="_blank"
          v-if="item.file != ''"
          class="links1"
          :href="item.file"
        >
          <span style="color:white"> {{ item.title }} </span>
        </a>
      </template>
    </v-data-table>
  </v-card-text>

Here's what it looks like

vuetify.js vuejs2 vue.js
2 Answers

One option to modify the default Vuetify CSS is to target the inner elements/sub-components using deep selectors. Target the root node of the component, in this case you can select the v-data-table classname, then deep select the classname on the header sub-component:

<style scoped>
.v-data-table >>> .v-data-table-header {
  background-color: red !important;
}
</style>

or if not using scoped styling, you can just target the desired class

<style>
.v-data-table-header {
  background-color: red !important;
}
</style>

codesandbox example

Also note that if you're using Sass you may need to use ::v-deep or /deep/ instead of >>>

yoduh0

You can achieve this by hide default header by adding hide-default-header attribute in <v-data-table> element and then create custom header by using v-slot.

<template v-slot:header="{ props: { headers } }">
    <thead>
      <tr>
        <th v-for="h in headers" :class="h.class">
          <span>{{h.text}}</span>
        </th>
      </tr>
    </thead>
</template>

In headers array, add class property in each object which will contain the class name.

Sample structure of headers array :

headers: [
  { text: 'Title', value: 'title', class: 'my-header-style' }
  ...
  ...
]

Finally, In CSS you can just add the style to my-header-style class.

.my-header-style {
  background: #666fff;
}

Live Demo :

new Vue({
  el: '#app',
  data: () => ({
    headers: [
      { text: 'ID', value: 'id', class: 'my-header-style' },
      { text: 'Name', value: 'name', class: 'my-header-style' },
      { text: 'Age', value: 'age', class: 'my-header-style' }
    ],
    movies: []
  })
})
.my-header-style {
  background: #666fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.2.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>
<div id="app">
  <v-app id="inspire">
    <v-data-table
                  :headers="headers"
                  :items="items"
                  hide-default-header>
      <template v-slot:header="{ props: { headers } }">
        <thead>
          <tr>
            <th v-for="h in headers" :class="h.class">
              <span>{{h.text}}</span>
            </th>
          </tr>
        </thead>
      </template>
    </v-data-table>
  </v-app>
</div>

Rohìt Jíndal0
Related