DataTable different background cell color based on cell value

UI Components for Vue
Post Reply
pantirugabriel90
Posts: 1
Joined: 27 Aug 2020, 10:24

27 Aug 2020, 10:35

Hello,
I tried searching the answer to this question but could not find any working solution. I am trying to set different background colors for cells based on cell value. For example if cell value is "green" then I want the background of that cell to be green.
So far I have seen that if I set the bodyStyle to have a certain background-color it works, however I cannot access the value of the cell in that context:

<Column field="sen" header="SEN" sortable styleClass="test" ref="el" v-bind:bodyClass="getBodyClass()" bodyStyle="background-color:red!important" >

What I already tried is to add a div in the column template and set the background-color of that div to be red, but it does not work.
<Column field="sen" header="SEN" sortable styleClass="test" ref="el" v-bind:bodyClass="getBodyClass()" bodyStyle="padding:0" >
<template #body="slotProps" styleClass="test" >
<div v-bind:class='slotProps.data.sen' style="background-color:red!important" ref="el1" v-bind:bodyClass="getBodyClass1()">
<p v-tooltip="slotProps.data.sen"> SEN </p>
</div>
</template>

Do you have any ideas how could I make this work?

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest