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

[dasDaniel]

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

[KaelWD]

Use the item slot

[dasDaniel]

Doesn't that require the column rendering functionality to be provided in the item slot?

[KaelWD]

What column rendering functionality? It's like it was in 1.x, you bring your own tr/td

[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.

[vmoraru]

I came across this when trying to reduce the size of the rows in a v-data-table, but "dense" was simply too... dense. Ended up adding a new CSS file and importing it:
In the Vue file add "dense" to v-data-table and import the customizing CSS:
<style scoped> @import "../../assets/css/overview.css"; </style>

CSS:
.theme--light.v-data-table--dense tr { height: 30px; }

Individual cell styling is possible with a Bootstrap Vue table though.

[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.

[jacekkarczmarczyk]

@gatkinsNZ see https://github.com/vuetifyjs/vuetify/issues/8643

[itelmenko]

BTW, propery item-class does not work
In documentation https://vuetifyjs.com/en/components/data-tables/#data-tables

Property on supplied items that contains item's row class or function that takes an item as an argument and returns the class of corresponding row

[jacekkarczmarczyk]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.