Buefy tables has a setting where you can choose what rows are highlighted by a specific colour depending on a variable in the row.
:row-class="(row, index) => row.variable === x && 'is-info'">
and adding style for the specific row-class:
<style>
.is-info' {
background: #FF8C4B;
}
This works, and i can highlight all rows with x as their variables. But consider if I have a table with multiple variables X, Y ,Z. And i want all the ones with variable value of X to be highlighted blue and the ones with Y to be red. Is this possible? I cant seem to find any examples anywhere.
This is my current data section of the vue page:
export default {
name: "Demo",
data: () => {
data: () => {
return {
loading: null,
alphabets: [],
className:{
'x': '.bg-danger',
'y': '.bg-success'
},
};
You can define class map in data object as follows:
:row-class="(row, index) => className[row.variable]">
data: ()=> ({className: {
x:'info',
y:'primary'
z:'warning'
}})
This is how it can be done:
:row-class="(row, index) => row.alphabet === 'x' && 'is-x' || row.alphabet === 'y' && 'is-y' || row.alphabet === 'z' && 'is-z'"
and then style it
<style>
.is-x{
background: #f15462;
}
.is-y{
background: #f5bb1a;
}
.is-z{
background: #3bdc5e;
}
}
</style>