Vue buefy table cell class based on cell value - html

Question

I have a buefy table with values between 0-1000, I want to conditionally highlight the cells in the table based on the cell value. For example is the value is above 50 i want to set the cell background as green, 25-50 to yellow and <25 to red. I saw this previous answer: How to apply class to a specific cell in a Buefy Table? But the solution doesnt seem to work.
Here is my current buefy table:
<b-table
:data="selectedProducts.productQuantities"
:row-class="(row, index) => row[0] === 'TOTAL'"
>
<b-table-column
label="quantity"
v-slot="props"
:class="cellObject(props.quantity)"
>{{ props.quantity }}
</b-table-column>
And i have a method to calculate and return the class of the cell:
methods: {
cellObject(quantity){
if(quantity < 25) {
return "is-red";
}
else if (quantity > 50) {
return "is-green";
}
else {
return "is-yellow";
};
},
which returns one of these classes:
<style>
.is-red {
background: #343a40 !important;
font-weight: bold;
}
.is-yellow {
background: #ee3f3f !important;
font-weight: bold;
}
.is-green {
background: #41f841 !important;
font-weight: bold;
}
After fiddling around with it more i found that if i did :cell-class="is-red" it would apply it to the whole column.
<b-table-column
label="quantity"
v-slot="props"
:cell-class="'is-red'"
>{{ props.quantity }}
</b-table-column>

Answer 1

You cannot apply this to the column, it has to be applied directly to the cell itself. Unfortunately, this is not easily done with a conditional unless you put the conditional in the tag however, I doubt this will accomplish what you're after. I would recommend that instead, you use a and just change the background color of the tag based on a conditional. For example, we do something like this:
<b-table-column label="Column Label">
<template v-slot="props">
<b-tag type="is-primary" v-if="props.row.value > 0 && props.row.value < 25">{{ props.row.value }}</b-tag>
<b-tag type="is-success" v-else>{{ props.row.value }}</span>
</template>
</b-table-column>