I am facing the same issue:

Your app is having trouble loading the st_aggrid.agGrid component.

(The app is attempting to load the component from , and hasn't received its "streamlit:componentReady" message.)

If this is a development build, have you started the dev server? If this is a release build, have you compiled the frontend?

Upgrading via "pip install streamlit-aggrid --upgrade" to streamlit-aggrid 0.1.7 didn't help. Please suggest.

I have been successfully using this very useful package, and until recently could implement hyperlinks in a column with the code:

gb.configure_column("ISSUE", headerName="ISSUE", cellRenderer=JsCode('''function(params) {return '<a href="https://thebcd.co.uk/issue_' + params.value + '" target="_blank">'+ params.value+'</a>'}'''), width=300)

which would result in a hyperlink to an address related to the cell value.

On editing a different part of of my app, I now find that instead of creating a hyperlink to the address, the html text is written to the screen instead:

<a href="https://thebcd.co.uk/issue_1" target="_blank">1</a>

rather than the hyperlink 1 to the address. Any help appreciated.

I was wondering if there was a way to have hyperlinks as cell entries in ag-grid through python alone. I am trying to display a table where the cell entries would be clickable links and I would like to accomplish this entirely through the python script. Is this something that is currently available or are there known solutions? Thank you!

I am using AgGrid 0.0.7 , streamlit v0.73

Your app is having trouble loading the st_aggrid.agGrid component.

(The app is attempting to load the component from , and hasn't received its "streamlit:componentReady" message.)

If this is a development build, have you started the dev server? If this is a release build, have you compiled the frontend? For more troubleshooting help, please see the Streamlit Component docs or visit our forums.

this happen when i use call the aggrid function:

gb = GridOptionsBuilder(min_column_width=100, editable_columns=False, side_panel=False)
    gb.build_columnsDefs_from_dataframe(input_df) #take df as parameters
    gridOptions = gb.build()


    st.markdown("""
    ## Details#
    """)

    grid_response = AgGrid(input_df, gridOptions=gridOptions, height=500)

    input_df = grid_response['data']

and it seems i continously call the function but i cannot find the "streamlit:componentReady"** message location. can you givve an hints>

Hi @PablocFonseca ,

first all, thanks for this component!

I would like to apply conditional formatting to rows in the grid using the rowClassRules grid option. From the documentation, I think this is the correct way to apply conditional formatting to rows, please let me know if there is another way that I'm not aware of.

When I add rowClassRules via the gridOptionsBuilder, the classes are applied correctly to the respective rows, but the styling is not. This is because the html added with st.markdown is added to the main page and the component is rendered in an iframe that does not have access to the parent page's CSS.

I think a solution would be to provide the custom classes to the AgGrid constructor that then adds them to the iframe page's styles. Is this something you would be open to adding?

Here's an example app with my simplified use case to illustrate:

import datetime

import numpy as np
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder


styles = """
<style>
.trade-buy-green {
    color: green
}
.trade-sell-red {
    color: red
}
</style>
"""
st.markdown(styles, unsafe_allow_html=True)

now = int(datetime.datetime.now().timestamp())
start_ts = now - 3 * 30 * 24 * 60 * 60


@st.cache
def make_data():
    df = pd.DataFrame(
        {
            "timestamp": np.random.randint(start_ts, now, 20),
            "side": [np.random.choice(["buy", "sell"]) for i in range(20)],
            "base": [np.random.choice(["JPY", "GBP", "CAD"]) for i in range(20)],
            "quote": [np.random.choice(["EUR", "USD"]) for i in range(20)],
            "amount": list(
                map(
                    lambda a: round(a, 2),
                    np.random.rand(20) * np.random.randint(1, 1000, 20),
                )
            ),
            "price": list(
                map(
                    lambda p: round(p, 5),
                    np.random.rand(20) * np.random.randint(1, 10, 20),
                )
            ),
        }
    )
    df["cost"] = round(df.amount * df.price, 2)
    df.insert(
        0,
        "datetime",
        df.timestamp.apply(lambda ts: datetime.datetime.fromtimestamp(ts)),
    )
    return df.sort_values("timestamp").drop("timestamp", axis=1)


df = make_data()
gb = GridOptionsBuilder.from_dataframe(df)

row_class_rules = {
    "trade-buy-green": "data.side == 'buy'",
    "trade-sell-red": "data.side == 'sell'",
}
gb.configure_grid_options(rowClassRules=row_class_rules)
grid_options = gb.build()

st.title("rowClassRules Test")
AgGrid(df, theme="streamlit", gridOptions=grid_options)

This issue can be reproduced as the following sample code. Whether display or editing, the cell contents are always empty.

import pandas as pd import streamline as st from st_aggrid import AgGrid

df_template = pd.DataFrame( '', index=range(10), columns=['a.b', 'b.c', 'cd'] )

def cb(r=None): st.write(r['data'])

with st.form('example form') as f: st.header('Example Form') response = AgGrid(df_template, editable=True, fit_columns_on_grid_load=True) st.form_submit_button(on_click=cb, kwargs=dict(r=response))

st.write(response['data'])

def form_callback(): st.write(st.session_state.my_slider) st.write(st.session_state.my_checkbox)

with st.form(key='my_form'): slider_input = st.slider('My slider', 0, 10, 5, key='my_slider') checkbox_input = st.checkbox('Yes or No', key='my_checkbox') submit_button = st.form_submit_button(label='Submit', on_click=form_callback)

Hey @PablocFonseca, thank you for such an amazing job on integrating AggGrid in Streamlit, I highly appreciate the efforts and happy to contribute if there are any known issues that need help from python side of things.

One task I am having hard time to wrap my head around is getting AggGrid state after a user interacts with it.

I.e., I have a multi-select to keep grouping consistent between page reloads or new data push.

# let user pick cols from dataframe she want to group by
if st.sidebar.checkbox("Enable default grouping"):
    default_group_col = st.sidebar.selectbox("Default group by: ", cols, 1)

# if any of columns are selected, apply it to aggrid and persist on page reload,
# as default_group_col state is persisted under the hood by streamlit
try:
    gb.configure_column(default_group_col, rowGroup=True)
except:
    pass

Now say a user groups by an additional column using AggGrid groupby feature, collapses some of the resulting groups and keeps the others expanded. I would assume AggGrid itself stores this state somewhere in client side JS. Is there a potential way to get stat state back to python in order to save it somewhere in a dict and persist between page reloads when AggGrid component is being redrawn or populated with new data?

Thanks!

With streamlit-aggrid==0.3.0 or higher and almost any recent version of streamlit, inluding streamlit==0.15.1 , if you have an app that uses a submit button, then the table will disappear when you e.g. try to sort it.

This does not occur with streamlit-aggrid=0.2.3.

Here is a minimal example:

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid
import numpy as np

submit = st.button('Submit', key="submit")

if submit:
    data = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))
else:
    data = None

if data is not None:
    AgGrid(data)

More testing shows even just a simple app will result in completely reloading all the data with interactions.

from st_aggrid import AgGrid
import pandas as pd

data = pd.DataFrame([[1,2,3,4],[2,3,4,5]], columns=list('ABCD'))

x = AgGrid(data)

Upgrading to the newly released streamlit 0.84, if I click a row in the grid, I get a TypeError exception:

  File "/Users/abramowi/python/virtualenvs/AppenUploader-UHtnTuBj/lib/python3.8/site-packages/st_aggrid/__init__.py", line 173, in AgGrid
    frame = pd.DataFrame(component_value["rowData"])
TypeError: string indices must be integers

In my application I have a quite large dataframe with a group of selected rows. With: gb.configure_selection(selection_mode="multiple", use_checkbox=True, pre_selected_rows=pre_selected_rows) it is possible to pre-select the rows but I could not figure out how to automatically scroll the view to show the rows.

The Aggrid API does have the functionality to scroll to a certain Row here. I tried to use this in javascript callbacks but I could not get it to work.

Great tool !

When using configure_selection, it would be nice to get not only the selected rows but also the selected indices.

gb.configure_selection(selection_mode="multiple", use_checkbox=False,  pre_selected_rows=[selectedinx])
gridOptions = gb.build()
data = AgGrid(
        shows,
        gridOptions=gridOptions,
        allow_unsafe_jscode=True,
        update_mode=GridUpdateMode.SELECTION_CHANGED 
    )

Example of returned data expected

{ "data" : myPandasDataFrame,
"selected_rows : [ {myselectedRow1},{myselectedRow2}],
"selected_indices" : [ 4, 8 ]
} 

I use Aggrid to select a row, then display it and edit, and then I went to move to the next row, which requires to know the indice of selected row

Thanks

I want to select multiple rows. But when get selected_rows it looks like the selection lags behind. Looks to me for every selection i make table send two events, the original/old situation and the new situation. Also ot looks like the table keeps updating and looping.

Is this a bug? What is the correct way to do this?

gb = GridOptionsBuilder.from_dataframe(df) gb.configure_default_column(hide=True) gb.configure_column("name",hide=False,width=300,tooltipField="name", headerCheckboxSelection=True )
gb.configure_column("branch",hide=False,width=150)
gb.configure_column("startDate",hide=False,width=90,type=["customDateTimeFormat"]) gb.configure_column("endDate",hide=False,width=90,type=["customDateTimeFormat"]) gb.configure_column("roles",hide=False,width=300,tooltipField="roles")
gb.configure_pagination(enabled=True,paginationPageSize=10,paginationAutoPageSize=False) gb.configure_selection(use_checkbox=True, selection_mode='multiple', pre_selected_rows=selected_rows ) gb.configure_grid_options(tooltipShowDelay=500)

table = AgGrid(df, gridOptions=gb.build(), enable_enterprise_modules=False, update_mode=GridUpdateMode.SELECTION_CHANGED )

selected_rows = [item['_selectedRowNodeInfo']['nodeRowIndex'] for item in table.selected_rows] st.session_state[selected_name] = selected_rows

Hi, I'm working with quite long texts and I would like to know if there is any option to resize the rows automatically, so that the full text within a cell is showed. Like this (simple example using st.table):

Best regards and thanks for the this component!

Code works fine in 2.3 but not in 3 .. can you theme to the config file in V3?

ValueError: light is not valid. Available options: {'STREAMLIT': <AgGridTheme.STREAMLIT: 'streamlit'>, 'ALPINE': <AgGridTheme.ALPINE: 'alpine'>, 'BALHAM': <AgGridTheme.BALHAM: 'balham'>, 'MATERIAL': <AgGridTheme.MATERIAL: 'material'>} File "C:\Users\sstapinski\pollen\lib\site-packages\st_aggrid__init.py", line 295, in AgGrid raise ValueError(f"{theme} is not valid. Available options: {AgGridTheme.members__}") streamlit-aggrid==0.3.3

import streamlit as st
import pandas as pd
import numpy as np

from st_aggrid import AgGrid, GridOptionsBuilder

df = pd.DataFrame(
    np.random.randint(0, 100, 50).reshape(-1, 5),
    index=range(10),
    columns=list("abcde"),
)

available_themes = ["streamlit", "light", "dark", "blue", "fresh", "material"]
selected_theme = st.selectbox("Theme", available_themes)

gb = GridOptionsBuilder.from_dataframe(df)
if st.checkbox('Pre-select rows 4 and 6 when loading.'):
    gb.configure_selection('multiple', pre_selected_rows=[3,5])

response = AgGrid(
    df,
    editable=True,
    gridOptions=gb.build(),
    data_return_mode="filtered_and_sorted",
    update_mode="no_update",
    fit_columns_on_grid_load=True,
    theme=selected_theme
)

Hey there,

i tried to find something in the dokumentation but cant solve my problem. I want to display an image when you hover over one of the rows but cant find to do how.

Could you add an example?

Python ver 3.11.0 streamlit-aggrid ver 0.3.3

When I'm running my app,the terminal dispaly this promption: "site-packages\st_aggrid_init_.py:42: FutureWarning: iteritems is deprecated and will be removed in a future version. Use .items instead."