No way to draw interactive (hoverable/clickable) elements inside custom cells

I’m a beginner at using canvas. glide-data-grid introduced me to Canvas API. And I’ve been hugely impressed by both. Thanks for the great library!

---

We need to draw hoverable/clickable elements inside custom cells. I’m planning to develop a custom reusable solution for this. But before starting to invest in our custom solution, I wanted to ask here if there is anything I should be aware of about this. (e.g. an existing solution or this feature already being developed somewhere else)

We want to use glide-data-grid because of the performance it offers for large data sets, while retaining interactivity on individual cells. And I’m aware of “having clickable/hoverable elements inside individual cells” is not the intended way of using glide-data-grid.

Our requirements

• Drawing x number of interactive elements inside custom cells
  • x can be anything, we can draw 1 or 5 different interactive elements
  • Each of these elements could be drawn at any position inside the cell (on left, on right, in middle, right next to a text)
  • Each interactive element can have onClick and/or onHover callbacks.
• This interactive elements solution should be easily reusable for any custom cell

---

Screenshots from our design to show my motivation to develop such a solution for interactivity

---

The proof of concept (really immature) I created for registering clickable elements inside custom cells https://github.com/hashintel/hash/commit/4cd43c6272786fc366a2868bbb8eadc98b65e910

I called the clickable items Clickable, and the solution ClickableManager. But If I decide to advance more on developing my own solution to this, I’m planning to call itInteractableManager

Recording of the proof of concept above:

https://user-images.githubusercontent.com/39553853/199499619-4954cd11-bc48-4ebe-b32d-e5b92300a249.mov

---

I already developed a less-generic solution for showing tooltips when items inside cells are hovered

Here is the use-grid-tooltip hook https://github.com/hashintel/hash/blob/72a09872f648cd52f200b33aa70446afad84bd4e/packages/hash/frontend/src/components/GlideGlid/utils/use-grid-tooltip.tsx

Preview of use-grid-tooltip below

https://user-images.githubusercontent.com/39553853/199512809-0ba08d28-eb76-4b3a-8680-5766d6fd68d6.mp4

[yusufkinatas]

If anybody is interested in seeing how we created an “Interactivity Manager for glide-data-grid custom cells”, check out this PR: https://github.com/hashintel/hash/pull/1386.

@jassmith Thank you so much for suggestions!

[jassmith]

Check out hte links-cell, it does what you want.