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?
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?
Would like to follow up if Retool comes up with any new features or workarounds on this topic: When a user clicks any images in a table column, a modal pops up to display the larger size of that row's image.
I followed the instruction open-a-modal-from-a-table and set the column that displays images to be Modal type. But when I clicked the image, no modal popped up.
I have a table that displays a list of images. When the user clicks an image, I expect a modal that shows the same images but with a larger size to appear.
In this documentation, it demonstrates ways to create modals from a table by changing the column. type to "Modal". I have changed the column type as in the screenshot, but when I clicked on the images, no modal popped out.
@doris.l makes sense – I was able to reproduce on my end as well. This is most likely a bug related to how we handle text vs. images in the table component.
In the meanwhile, a workaround that you could use would be to create an event handler for the table on row select and then open up a separate modal component with the image inside. You can start by creating a modal component:
I've set "hidden" to true so we don't see the button for opening the modal. In the modal, you can drag in an image and reference the currently selected table row's data:
