HOW TO: When pressing dataframe cell, show image?

[pedroalexleite]

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!

[dataprofessor]

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!

[pedroalexleite]

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!

[edsaac]

That sounds similar to the example in this discussion:

Create internal link inside a dataframe

Hello, I have an app containing a simple dataframe displaying characteristics of some smartphones. The goal would be to be able to create an internal link inside the “Modèle de téléphone” column in order to send the user into a new page displaying more characteristics about the specific phone. I guess we could use st.column_config.LinkColumn() to create a link towards a real web page for the smartphone, but my goal is to stay in the app by basically creating a “new page” for each smartphone. I…