Add Image and header to Streamlit dataframe / table

[Arief_Surya]

Hi There,

I use streamlit text input to input some data and then data can be filled in my table / data frame.

my data frame / table like this. It is possible to make it ? If not possible can someone give me some suggestion how can i make it this table / data frame like this.

[Shawn_Pereira]

Hi @Arief_Surya, check if this example suits your purpose.

Display images in AgGrid table

Hi @Marc_Richard Code Explanation: I have created a dataframe with 4 columns - this is fairly self-explanatory. The 1st 2 images are stored locally on my hard drive in the mentioned path (which you can change if you plan to use local images). These need to be base64 and the function ‘ReadPictureFile’ does that conversion. For all local images, I iterrows of the dataframe and add the preliminary text ‘data:image/…’ - ref code The last 2 images are directly accessed from the web and does not ne…

Cheers

[ferdy]

@Arief_Surya

If not possible can someone give me some suggestion how can i make it this table / data frame like this.

Been experimenting this with streamlit-aggrid.
Update:

• The image link is now in the product name.
• Hide the column Details which contains the image link.
• On stocks, color text if value is below 60 and increase its font-size.

Image

Code

import pandas as pd
import streamlit as st
from st_aggrid import GridOptionsBuilder, AgGrid, JsCode
from st_aggrid.shared import ColumnsAutoSizeMode


products = {
    "No.": [1, 2, 3],
    "Name": [' Chair', ' Cabinet', ' Table'],
    "Price": [4, 12, 10],
    "Stocks": [100, 50, 60],
    "Details": [
        "https://i.imgur.com/fH2LHvo.png",
        "https://i.imgur.com/bvHZX5j.png",
        "https://i.imgur.com/D7xDwT9.png"
    ]
}

df = pd.DataFrame(products)

ob = GridOptionsBuilder.from_dataframe(df)

# 1. Add an image next to the value under the Name column.
#    Also add a link on the label.
image_cr = JsCode("""
    function(params) {
        var element = document.createElement("span");

        var imageElement = document.createElement("img");
        var anchorElement = document.createElement("a");

        // Update the image element. Use the value from Details column.
        imageElement.src = params.data.Details;
        imageElement.width="80";
        imageElement.height="80";
        element.appendChild(imageElement);

        // Add a link to the Name value. The link is from the Details column.
        anchorElement.href = params.data.Details;
        anchorElement.target = "_blank";
        anchorElement.innerHTML = params.value;
        element.appendChild(anchorElement);

        return element;
    }""")
ob.configure_column('Name', cellRenderer=image_cr)

# 2. Configure the column Details. Add a link to inner value.
image_url = JsCode("""
    function(params) {
        return `<a href=${params.value} target="_blank">${params.value}</a>`
    }""")
ob.configure_column("Details", cellRenderer=image_url)

# 2.1. Style the cell, if stocks is below 60, increase font-size
#      and color it red - as a warning to supply department.
low_supply = JsCode("""
    function(params) {
        if (params.value < 60) {
            return {
                'color': 'red',
                'font-size': '20px'
            };
        }
    }""")
ob.configure_column("Stocks", cellStyle=low_supply)

# 3. Update selection.
ob.configure_selection(selection_mode="multiple", use_checkbox=True)

# 4. Update row height, to make the image look clearer.
ob.configure_grid_options(rowHeight=100)

# 5. Hide the Details column. The product name has a link already.
ob.configure_column("Details", hide=True)

# 6. Build the options.
grid_options = ob.build()

st.markdown('#### Streamlit-AgGrid')

# 7. Add custom css to center the values, as we adjusted the row height in step 4.
grid_return = AgGrid(
    df,
    grid_options,
    allow_unsafe_jscode=True,
    enable_enterprise_modules=False,
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
    key='products',
    custom_css={'.ag-row .ag-cell': {'display': 'flex',
                                     'justify-content': 'center',
                                     'align-items': 'center'},
                '.ag-header-cell-label': {'justify-content': 'center'}}
) 

selected_rows = grid_return["selected_rows"]

if len(selected_rows):
    st.markdown('#### Selected')
    dfs = pd.DataFrame(selected_rows)

    dfsnet = dfs.drop(columns=['_selectedRowNodeInfo', 'Details'])
    AgGrid(
        dfsnet,
        enable_enterprise_modules=False,
        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
        reload_data=True,
        key='product_selected'
    )

[coder]

@ferdy

https://i.imgur.com/fH2LHvo.png

Hello, guys. I executed the code, but it prints the error:

Streamlit-AgGrid

Component Error
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=%5Bobject%20HTMLSpanElement%5D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Please, help me to fix.

[Taramautas]

I have the same problem

Has anyone found a solution for this yet?

[mavefreak42]

After a fair bit of digging on various forums, this solution finally worked for me.