Question: How to add hover effect on each cell separately?

[samuk190]

I want something like this it is possible?

[abhijain1705]

can i try working on this?

[niranjan821]

You can use itemRenderer and use mouse events to detect mouse hover.

eg:
`itemRenderer = ({ item, timelineContext, itemContext, getItemProps, getResizeProps }) => {
const { left: leftResizeProps, right: rightResizeProps } = getResizeProps();
const backgroundColor = itemContext.selected ? (itemContext.dragging ? "red" : item.selectedBgColor) : item.bgColor;
const borderColor = itemContext.resizing ? "red" : item.color;
return (
<div
{...getItemProps({
style: {
backgroundColor: 'green',
color: item.color,
borderColor,
borderStyle: "solid",
borderWidth: 1,
borderRadius: 4,
borderLeftWidth: itemContext.selected ? 3 : 1,
borderRightWidth: itemContext.selected ? 3 : 1
},
onMouseDown: () => {
console.log("on item click", item);
},
})}
onMouseEnter ={ () => {
console.log('Hovering on item ->', item);
}}
>
{itemContext.useResizeHandle ? <div {...leftResizeProps} /> : null}

    <div
      style={{
        height: itemContext.dimensions.height,
        overflow: "hidden",
        paddingLeft: 3,
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
      }}
    >
      {itemContext.title}
    </div>

    {itemContext.useResizeHandle ? <div {...rightResizeProps} /> : null}
  </div>
);

};`