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

1
votes

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" },
      ],
      ...
1
vue.jsvuejs2vuetify.jsbackground-color

1 Answers

0
votes

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;
}