Hot to know the background color of any cell when the cell is clicked in HotTable?
Background color of cell
Hi @jelm48
You can use our afterOnCellMouseDown hook and inside it write your custom logic for checking the styling of currently clicked cell.
Yes. This is my code:
const hot = useRef(null);
hot.current.hotInstance.addHook(‘afterOnCellMouseDown’,function(event,coords,TD) {
const color = hot.current.hotInstance.getCell(coords).style.backgroundColor
console.log(“Color —>”, color)
The output: Color—> Undefined
Hi @jelm48
The reason why you get undefined result is because by default the higher order class of any cell has no styling attached. You can get the actual background color (or other properties) by setting them by custom renderer at first. Here’s an example:
https://jsfiddle.net/aszymanski/Lczd7jst/1/
More information about custom renderers: https://handsontable.com/docs/javascript-data-grid/cell-renderer/
Yes. But I am trying to set backgroundcolor of specific cells , not entire column.
This is my function:
import {useRef} from ‘react’;
const hot = useRef(null);
function backGroundColor(){
let columnasFestivos = [35,49,50,67,82,98,103,114,127,140,150,192,208,213,233,244,]
for(let i=0;i<columnasFestivos.length;i++){
for(let j=4;j<=19;j++){
const color = hot.current.hotInstance.getCell(j,columnasFestivos[i])
color.style.background = “blue”
} } }
My render:
columns={[{renderer:backGroundColor}]}
But It does not work.
Thank you.
You can still do that, but instead of setting your custom renderer to whole column, you can attach it to chosen cell, like here:
Yes. I made it.
It works.
Thank you.