version 3.3.0 v-data-table how can I change the color of a row?

[tom-fitz]

I'm having a good deal of trouble trying to figure out how to alternate background colors for the rows in my v-data-table. Here is what I have tried so far...

A lot of searching keeps coming up with adding :item-class="" to the data-table itself, but that does nothing and I also don't see that mentioned as a prop in the Labs api documentation. Could it have been possibly removed in the latest release?

After that I tried styling the <tr> itself and that doesn't take. Interestingly though, a style on the <td> works as expected. Here's my template code:

<template v-slot:item="{ item, index }">
    <!-- <tbody :style="`background-color: ${index % 2 === 0 ? '#E8F0FE' : ''} !important`"> -->
        <tr :style="`background-color: ${index % 2 === 0 ? '#E8F0FE' : ''} !important`">
            <td>{{ item.columns.school }}</td>
            <td align="center">{{ item.columns.division }}</td>
            <td>{{ item.columns.conference }}</td>
            <td align="center">{{ item.columns.ranking }}</td>
            <td align="center">{{ item.columns['gpa.min'].toFixed(2) }}</td>
            <td align="center">{{ item.columns['gpa.percentile25'].toFixed(2) }}</td>
            <td align="center" :style="`background-color: ${item.raw.gpa.setPercentile50Color(playerGpa)} !important;`">{{ item.columns['gpa.percentile50'].toFixed(2) }}</td>
            <td align="center">{{ item.columns['gpa.percentile75'].toFixed(2) }}</td>
            <td align="center">{{ item.columns['gpa.max'].toFixed(2) }}</td>
            <td align="center">{{ item.columns['sat.reading'].formatSatReading() }}</td>
            <td align="center">{{ item.columns['sat.math'].formatSatMath() }}</td>
            <td align="center">{{ item.raw.act.formatAct() }}</td>
        </tr>
    <!-- </tbody> -->
</template>

As you can see I tried both the <tr> and <tbody> but neither take. And actually the <tbody> breaks the entire table.
I also tried wrapping the row in a <div> and while this does actually apply the style, it breaks the whole table format. I'm kind of stumped as where to go from here. Am I going to have to put that style onto every <td> in order to achieve the desired result? I know that will work, but it feels hacky and it feels like there should be a really easy way to do this.

[freezingjune]

Did you figure it out? I'm having the same issue

[tom-fitz]

I was not able to a find an actual solution so I came up with a hacky one. Created a function to take the index as a param and the return the correct color:

const cellBgColor = (idx: number): string => {
    return `background-color: ${idx % 2 === 0 ? '' : '#E8F0FE'} !important`
}

Then added this function to every td
<td align="center" :style="cellBgColor(index)">

For sure not the best solution, but I haven't come across a different one yet.

[netorody]

you can just use CSS.

.v-table tbody tr td:nth-child(even) {
      background-color: #yourColor;
}

.v-table tbody tr td:nth-child(odd) {
      background-color: #yourColor;
}

[Packerson]

thanks!