[Aggrid] Displaying cell information when the mouse is over a cell on an Aggrid table

🧩 Streamlit Components streamlit-aggrid
1

Hi everyone !

I am using the Aggrid component and I want to display a cell information when the mouse is over it as with a dataframe (see the image below). I have seen here that it’s possible to do things with the cellMouseOver event. However I don’t know how to code in Java so it’s hard for me to implement uncommon stuff for aggrid. Is it possible to do it as with a simple dataframe ?
Thanks for your help !
Alexis

2

Hi @AlexWeeM,

Try this code if you have not yet found a solution:

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

df=pd.DataFrame({ "Name": ['Erica', 'Rogers', 'Malcolm', 'Barrett'], "Age": [43, 35, 57, 29]})

tooltipjs = JsCode(""" function(params) { return '<span title="' + params.value + '">'+params.value+'</span>';  }; """) # if using with cellRenderer

gridOptions = GridOptionsBuilder.from_dataframe(df)
gridOptions.configure_column('Name', editable=False, cellRenderer=tooltipjs)
gridOptions.configure_default_column(editable=True)
gb = gridOptions.build()

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

Cheers

1 Like
3

Perfect!

4

Screenshot 2023-04-06 at 9.53.58 PM
Screenshot 2023-04-06 at 9.53.58 PM948×804 33.8 KB

Hi @Shawn_Pereira It seems the code doesn’t work. Anything that I have been missing?

5

Hi @KarlKwon,

  1. I missed the initial line import pandas as pd in my code, during my copy-paste.

  2. Between my earlier submit and now, I upgraded the aggrid library. This required me to remove the parameter theme="blue" from the code. Please note I am using streamlit==1.16.0 and streamlit-aggrid==0.3.3. Other library versions may require a change in the code.

  3. The rest works perfectly fine at my end. Please copy-paste the code verbatim (after verifying your aggrid library version), and then suitably modify the code thereafter, for your use.

Cheers

6

@KarlKwon It appears to be due to the streamlit-aggrid version. I tested using @Shawn_Pereira version of 0.3.3 and it worked as intended. Using my updated version caused the same outcome as you

1 Like