Backgroud-color on whole cell in vuetify v-data-table

Question

I'm trying to setup backgroud-color on whole cell in vuetify v-data-table but the color is only on the letters and not all the cell.

This is what I get

this is what I want to have

This is the code:

The class custRmk return the backgroud-color based on the value in customerRemark

conditional CSS works fine

Answer 1

Data tables in Vuetify 2 have an item-class prop that you can use to set a class on the tr depending on the item. Then you can add CSS to set background color on the td elements in the row.

Have a look at the snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :headers="headers"
            :items="items"
            :itemClass="getItemClass"
          />
          
          <v-slider
            v-model="selectedId"
            min="0"
            :max="items.length-1"
            label="Selected item id:"
            :tick-labels="items.map(i => i.id)"
          />
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      selectedId: 1,
      headers: [
        {text: 'Name', value: 'name'},
        {text: 'Id', value: 'id'}
      ],
      items: Array.from({length: 5}, (_,i) => ({name: 'Name '+i, id: i}))
    }
  },
  methods: {
    getItemClass(item){
      return item.id === this.selectedId ? 'highlight-name' : null
    }
  },
})

tr.highlight-name > td:nth-child(1){
  background: purple;
  color: white;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>