How to create lightbox-style modal from table cell click

I have a table populated by the response from a REST API query, where the one of the columns is a thumbnail image. The API response includes the URL for this image, and that part is working fine.

I’d like the user to be able to click the image table cell for any row to open that row’s full-size image in a lightbox, but none of the methods I’ve tried has worked so far.

My preferred approach would be to use column type “Modal”. I’ve tested this and it works as I need EXCEPT I can’t change the column type to Modal, because the Modal never appears for columns where “Render as pure HTML” is enabled. If I disable “Render as pure HTML”, the thumbnail no longer appears in the table.

Currently, the only method I’ve found that works is adding a custom Modal column, and using currentRow values to include the image in the modal. Not ideal.

I’ve tried various alternative solutions (window.open, several libraries from cdnjs, etc.) but so far have been unable to get anything else to work.

Disclaimer… I’m very new to Retool… I’ve only been working with it for 2 weeks. I feel like this must be a simple problem to solve that I just haven’t gotten far enough along in the learning curve to handle on my own.

Can anyone point me in the right direction here, that would avoid having to include this second column in the table?

Hey @laurab! You can do this with a standalone modal component. There’s a more detailed walkthrough in our docs, if you’re interested.

  1. Create a modal component, add the image

  1. Hide the modal by default

  1. Add an action button next to your image

  1. Create a JS Code query to open the modal, and run it on action button click

Let me know if this helps!

Thanks Justin. I already have something similar working, actually (using a text link rather than a button), but I consider this approach a workaround. What I’m trying to do is allow clicking on the thumbnail itself, so I don’t need to take up the table space of a second column. Is that possible?

Not currently, unfortunately :confused: