[Feature Request] v-data-table: Add ability to set class and/or style per row.

Problem to solve

I want to set the row background color based on an item’s data field.

The only way to do that right now is to manually set the background for each column slot.

Proposed solution

Adding a row-class and/or row-style function could make it easy for user to have per-row control.

Example:

export default {
  data() {
    return {
      rowClass: ({ item }) => this.getColor(item)
    };
  },
  methods: {
    getColor(calories) {
      if (calories > 400) return "red";
      else if (calories > 200) return "orange";
      else return "green";
    }
  }
};

[gatkinsNZ]

I agree with this being an issue - I need to adjust just the row css class (depending on an items value), and it appears the only solution is to switch to using item slots and defining all the table content myself, which is overkill.

[inad9300]

I would like to resurrect this issue…

In my case, I want to allow users to change the columns’ positions, while also applying a custom class to rows depending on a property. If I redefine the entire row using theitem slot, the table looses the ability to properly react to changes in the headers prop, i.e. when headers is replaced with a new array sorted differently, the headers and the cells will not match anymore.

Besides, having to redefine the way every column is rendered just to modify a small property of the row (which, I believe, is what @dasDaniel was referring to) is a complete overkill.