Ag-Grid component with input support

Custom Components streamlit-aggrid
381

Hi @Louis_Monier, pls refer the code below for an implementation of onCellClicked. You could probably write the image into the new window (myWin) and expand it with JS. I didn’t get a chance to try it as yet. Do give it a shot at your end on the basis of the following code.

Hi @Kiran_K, below is an implementation of a browser window (instead of a popup). You can easily modify the JS to further suit your purpose.

Clicking on the Name field gives a standard JS popup; clicking on the Topics field gives a browser-based popup. I have inserted paragraph tags in the 3rd topic to illustrate line breaks. You can change the text attributes in the secondary browser window as required.

Copy & paste the code to test it out, and then repurpose it for your needs.

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

st.set_page_config(layout = "wide", initial_sidebar_state = "expanded")
t1 ="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
t2 = "Congue quisque egestas diam in arcu. Libero nunc consequat interdum varius sit amet mattis vulputate. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Nunc sed velit dignissim sodales ut eu sem integer vitae. Ut pharetra sit amet aliquam id diam. Tristique risus nec feugiat in. Non quam lacus suspendisse faucibus interdum. Faucibus ornare suspendisse sed nisi lacus sed viverra. Aliquet lectus proin nibh nisl"
t3 = "Urna cursus eget nunc scelerisque viverra mauris in aliquam. <p>Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. </p> Vestibulum sed arcu non odio euismod lacinia at. Massa id neque aliquam vestibulum morbi blandit cursus risus. Tincidunt tortor aliquam nulla facilisi cras. Nisi est sit amet facilisis magna. Id velit ut tortor pretium viverra suspendisse potenti. Blandit libero volutpat sed cras ornare arcu dui vivamus. Sit amet purus gravida quis blandit turpis cursus."

df=pd.DataFrame({ "Name": ['Erica', 'Rogers', 'Malcolm'], 'Topics': [t1, t2, t3], "Age": [43, 35, 57]})

clicked_name_cell_func = "function(params) { alert(params.node.data.Name); };"
clicked_topic_cell_func = """function (params) { 
    let myWin = window.open("Topic", "wid", "toolbar=no,menubar=no,location=no,status=no,height=285,width=500, left=450,top=175");
    myWin.document.write("<span style='font-size: 24px; color:red;'>" + params.data.Topics + "</span>");
    myWin.focus();
                                                }"""

gridOptions = GridOptionsBuilder.from_dataframe(df)
gridOptions.configure_column("Name", headerTooltip='Click to see cell data', onCellClicked=JsCode(clicked_name_cell_func))
gridOptions.configure_column("Topics", headerTooltip='Click to see cell data', onCellClicked=JsCode(clicked_topic_cell_func), maxWidth=600)

gridOptions.configure_default_column(editable=True)
gb = gridOptions.build()

dta = AgGrid(df, gridOptions=gb, height=200, allow_unsafe_jscode=True, theme="blue",
             update_mode=GridUpdateMode.SELECTION_CHANGED & GridUpdateMode.MODEL_CHANGED)

Cheers

3 Likes