How to change Render on cell selection /deselection

Tags: #<Tag:0x00007efc6d87a3c8>

I am trying to change how a cell is rendered when a user clicks into the cell, but change it back once they click on a new cell.

I can use the AfterSelection event to change the contents. Here I am modifying the TD.innerHTML. However, when I click off the cell, I don’t see a way to change the contents/renderer back?

I tried to look at afterOnCellMouseOut event, but this doesn’t seem to be working properly…it seems to behave exactly like afterOnCellMouseOver, where it changes based on the hover of the mouse.

I need an event that would change the renderer & TD back to original value, or somehow dynamically change how the data is rendered when they click into the cell (Without changing TD).

Updated. Here is a short video showing the behavior I’m looking to create.
User clicks in Cell, and a different rendered would display slightly bigger with a “pop out” icon. You click on icon to see more detail. When you click to different cell, original cell renders normally

URL:https://www.screencast.com/t/ffaX7zWg7q6M

Any help is appreciated.

We’ve discussed the subject on emails so please check the email from support@handsontable.com