Vuetify: Color data-table rows that pass check-CodePudding

I have a datatable, in which there is valid tasks and non-valid tasks. I have the table working otherwise just fine, but issue is that I want to color rows that are non-valid as red so that users will know to fix them (no, fixing them on my end does not work).

I had read that item-class prop would work, however it does not seem to work in my case?

Here is the data-table setup:

<v-data-table
  disable-pagination
  hide-default-footer
  :headers="headers"
  :items="tasks"
  :hide-default-header="tasks == 0"
  :item-
>

In methods:

getRowClass(val) {
  if(val.in_use && !this.isTaskValid(val)){
    return 'invalid-row';
  }
},

In styles:

.invalid-row {
  background-color: rgb(255, 0, 0) !important;
}

If I use console.log to test out, I can see that getRowClass correctly identifies when the task is valid and when not, so it will enter correct if statement. However, I still do not see any rows colored red. I have read that other alternative is to replace entire section if <tr> and <td> tags, but I feel that kinda breaks the whole idea of using vuetify, especially since I need to specify each column separately now.

EDIT

I am using Vuetify 2.6.12 and Vue 2.6.14

CodePudding user response：

You need something like this

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Task',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Valid/not valid', value: 'isValid' },
      
      ],
      tasks: [
        {
          id: 1,
          name: 'This is task 1',
          isValid: false,
        },
        {
          id: 2,
          name: 'This is task 2',
          isValid: true,
        },
        {
          id: 3,
          name: 'This is task 3',
          isValid: false,
        },
        {
          id: 4,
          name: 'This is task 4',
          isValid: true,
        },

      ],
    }
  },
  methods: {
     getRowClass(item) {
      if(item.isValid== false){
        return 'red'
      } 
    },
  },
})

.invalid-row {
  background-color: red !important;
  border-color: red !important;
}

<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">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="tasks"
      
      :item-            
    >
    </v-data-table>
  </v-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>

CodePudding user response：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Task',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Valid/not valid', value: 'isValid' },
      
      ],
      tasks: [
        {
          id: 1,
          name: 'This is task 1',
          isValid: false,
        },
        {
          id: 2,
          name: 'This is task 2',
          isValid: true,
        },
        {
          id: 3,
          name: 'This is task 3',
          isValid: false,
        },
        {
          id: 4,
          name: 'This is task 4',
          isValid: true,
        },

      ],
    }
  },
  methods: {
     getRowClass(item) {
      if(item.isValid== false){
        return 'red'
      } 
    },
  },
})

this can be tried