HOW TO: When pressing dataframe cell, show image?

Hi!
So currently I have a dataframe in HTML form. In my dataframe “players”, I have a column called “Player”. And my goal is to when pressing each “players[‘Player’]”, the dataframe closes, and an image shows corresponding to that player. The images are stored in my app directory, and I have a column in my dataframe, called “Path”,with the path to each image. So how do I approach this problem?

columns_to_display = ['Rating', 'Player', 'Position', 'Age', 'Value', 'Wages', 'Contract']
html = players[columns_to_display].to_html(index=False)
html = html.replace('<th>', '<th style="text-align: left;">')
st.write(html, unsafe_allow_html=True)

Thanks in advance!

1 Like

Hi @pedroalexleite

There’s a supported approach of displaying images directly in a DataFrame via st.dataframe or st.data_editor by using the st.column_config.ImageColumn parameter.

Here’s the Docs page on this with a code snippet example on how to implement this.

Hope this helps!

1 Like

Hi, thanks for your response!

My goal is not really to display an image in my dataframe. My goal is to have each cell in players[‘Player’], to work like a button. Where after pressing that button an image opens up (outside the dataframe, I also want to close the dataframe when pressing the button).

Is there anyway of making this work, using Streamlit?

Thank you, again!

1 Like

That sounds similar to the example in this discussion:

2 Likes