Render Html tags in a dataframe column

Using Streamlit
1

:rotating_light: Before clicking “Create Topic”, please make sure your post includes the following information (otherwise, the post will be locked). :rotating_light:

  1. Are you running your app locally or is it deployed?: Locally
  2. If your app is deployed:
    a. Is it deployed on Community Cloud or another hosting platform?: NA
    b. Share the link to the public deployed app.: NA
  3. Share the link to your app’s public GitHub repository (including a [requirements file]: (App dependencies - Streamlit Docs)).: NA
  4. Share the full text of the error message (not a screenshot).:NA
  5. Share the Streamlit and Python versions.: python==3.8.10, streamlit==1.11.0

Hello friends, I have a pandas dataframe in which one of the column contains HTML codes. I am using streamlit app to display the dataframe in UI. How do I hide the HTML code and display it as a hyperlink preferrably click here and when clicked it should render the code and display as a HTML page?

Here is the pseudo code:

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        "id": [1,2,3,4],
        "apps": [
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 1</h1>\
                </body>\
                </html>",
                "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 2</h1>\
                </body>\
                </html>",
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 3</h1>\
                </body>\
                </html>",            
                "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 4</h1>\
                </body>\
                </html>",
        ],
    }
)

st.write(data_df)

This is how it is displayed now:

image
image1013×270 41.4 KB

2

Hi @king

You can display your DataFrame via st.dataframe and use the column_order parameter to selectively display only the columns you want as in column_order=("col2", "col1")

More info in the Docs

Hope this helps!

3

@dataprofessor Thanks, but my query was about opening the HTML code as a web page, not about selecting columns. @blackary I saw an answer from you on a post related to clickable event. Can something be done here to open the html code as a web page probably by using st.components.v1.html?

4

You can loop through the rows and then use st.components.v1.html, or just use st.write

import streamlit as st
import pandas as pd

data_df = pd.DataFrame(
    {
        "id": [1, 2, 3, 4],
        "apps": [
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 1</h1>\
                </body>\
                </html>",
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 2</h1>\
                </body>\
                </html>",
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 3</h1>\
                </body>\
                </html>",
            "<!DOCTYPE html>\
                <html>\
                <body>\
                        \
                <h1>Heading 4</h1>\
                </body>\
                </html>",
        ],
    }
)

# st.write(data_df)

for row in data_df.itertuples():
    st.write(row.apps, unsafe_allow_html=True)
5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.