Vuetify Data Table How To Set Background Color of Select All Column with Theme Color?

user_1570024 0
Viewed 3908

I'm creating a data table using Vuetify for Vue 2 and am using themes. I can change the background color of the header columns by setting a class in the headers array. However the special "Select All" column doesn't work. Any idea what I need to do here? I've tried using the slots to override the checkboxes but it duplicates the "th" element. Do I need to override the entire header row?

Data Table Colored Column Headers

Template:

<v-data-table
  dense
  :headers="headers" 
  :items="jobs" 
  item-key="name" 
  loading-text="Loading..." 
  class="elevation-1"
  show-select
>
  <template v-slot:header.data-table-select="{props,on}">
    <v-simple-checkbox v-bind="props" v-on="on"></v-simple-checkbox>
  </template>
  <template v-slot:item.data-table-select="{isSelected,select}">
    <v-simple-checkbox :value="isSelected" @input="select($event)"></v-simple-checkbox>
  </template>
</v-data-table>

Script:

data() {
    return {
      selected: [],
      headers: [
        { type: 'checkbox', sortable: false, class: "primary" },
        { text: 'Name', value: 'name', class: "primary white--text" },
        { text: 'Description', value: 'description', class: "primary white--text" },
        { text: 'Next Fire', value: 'nextFire', class: "primary white--text" },
        { text: 'Last Fire', value: 'lastFire', class: "primary white--text" },
        { text: 'Last Duration', value: 'lastDuration', class: "primary white--text" },
        { text: 'Class', value: 'class', class: "primary white--text" },
      ],
      ...
vuejs2 vuetify.js vue.js background-color
2 Answers

I also had this issue just now. Tried solutions found from the net but this works for me.

In your app.scss, place your custom css and it should work. This solution though will affect all v-data-table as this applies to your whole application.

As for your concern to use "primary" from vuetify theme, can use var(--v-primary-base). You can see it when you do inspect element on Style, just scroll down to the bottom part.

/* app.scss */
/* had to define the selector properly so it would work */
.theme--light.v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    background: var(--v-primary-lighten1);
}
.theme--dark.v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    background: var(--v-primary-lighten1);
}

working v-data-table

vuetify styles variables

user_44812350

This isn't any sort of complete solution, but it might be worthwhile to look into CSS selectors, specifically first-of-type. Trouble is, I'm not sure how to apply other classes within that selector block.

As an example,

.elevation-1 tr th:first-of-type, td:first-of-type {
  background-color: blue;
}
user_520900
Related