Handsontable background color based on the repetitive column

Tags: #<Tag:0x00007efc64501cb8> #<Tag:0x00007efc64501a38>
#1

In the below code, I am trying to color code based on the 6th column. if it is same, then repeat the same color, else different color. But, if I clicked on the 2nd column, which is editable, the color code is messes up.

#pagination { margin-top: 20px; display: flex; justify-content: center; }

#pagination button {
background-color: #f2f2f2;
color: black;
border: none;
padding: 10px 16px;
font-size: 16px;
cursor: pointer;
margin: 0 4px;
transition: background-color 0.3s ease;
}

#pagination button:hover {
background-color: #ddd;
}

#pagination button.active {
background-color: #4CAF50;
color: white;
}

#pagination button.disabled {
pointer-events: none;
opacity: 0.6;
cursor: default;
}

.handsontable .yellow-background {
background-color: lightyellow;
}

.handsontable .white-background {
background-color: red;
}

.handsontable .myClass {
color: red !important;
}

Select an option Y N
#2

Hi @joygarifa

I would need to see the JS part to help. Here https://handsontable.com/docs/javascript-data-grid/conditional-formatting/ we have a great tutorial on how to set up a cell render is you’d like to change cell appearance. But if it is only a CSS className than it is better to use one of the following

  • setCellMeta(row, column, 'className', class_name) along with render()
  • cell to specify className option
  • cells to refer the className via cell properties
#3

how can I add my code, I am unable to attach any file.

#4

Could you reattach the cell logic? I do not see it.

#5

I have sent the code to support@handsontable.com as I am unable to upload here.

#6

I got it.

So I can close this topic and we will continue on the emails.

#7