Add image button in grid column

Queries and Resources
1

Hi Team,

I am new to Retool. My requirement is one image needs to be added in grid and onclick of that image I need to open popup along with data.

image
image1422×282 18.6 KB

in second column of grid instead of data, i have to display eye image, on click of that eye image i have to display data.

Please help me to solve this issue.

Thanks,
Lalitha.C

2

@lalitha1024 Are you trying to add an image in a column for each row? Is the image an icon or an actual image source path?
Do you have any designs or screenshots you can share in addition to what you posted.?

3

Thanks and Yes Scott. I have screen shot, please find below for the same. I am talking about second column.

image
image814×169 34 KB

Thanks,
Lalitha.C

4

So you can check out how to add an icon here
If View Expressions is a column in your data that populates that table, then you can add the icon as noted above and set the column type to Button. However, you may want to do the following:
Add a modal to your canvas somewhere and set it to true in the Hidden field for that modal.
Then in the View Expressions column you can run a script like yourHiddenModal.open()
In that modal you can add the information from the selected row.

Check out this post as well

1 Like
5

What's the difference of using a custom column vs action buttons

6

You could use an action button as well and run a js query to open the modal but in this instance it seems that the column View Expressions comes from the query that populates the table.... though I am not certain... so @agaitan026 in this instance using an Action button versus a custom column may not make a difference... though don't have enough information.

1 Like
7

Yeah I think another difference will be, custom column is more customizable or something like that

8

And I'm using 3 buttons view edit delete do I think having 3 custom columns will look strange, actions column just show only one column and the 3 button I don't know if I'm being clear

9

Hi,

Somehow i am not able to achieve this. Below is my screen shot.
Added 2 buttons i.e., View and Edit
Please help me how to add image for normal button and how to set column width.

image
image1904×911 138 KB

Thanks,
Lalitha.C

10

Hey folks, it looks like Retool doesn't support icons in table column at the moment though that's something coming in the future!

Clickable images in tables can be a bit tricky. You can set up an event handler on your table that runs on row clicks and then check for the column of the selected cell, this may not be the best workaround but it's one way to get things going:

Let me know if that works! I've included a JSON you can import and play around with :slightly_smiling_face:
clickable_image_column (1).json