vue.jsvuejs2vuetify.js

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


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


Solution

  • 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>