Aggrid st.tabs compatibility

I think there is some incompatibility between aggrid and st.tabs.
I want to have one Aggrid by tab on two different tabs.
The only aggrid that is actually showing up when navigating is the one that had the tab active when page rerun.

Does anyone else has this problem ?

from st_aggrid import AgGrid
df1 = pd.read_csv(‘…’) #1000 rows csv
df2 = pd.read_csv(‘…’) #50000 rows csv
tab1, tab2 = st.tabs([‘tab1’, ‘tab2’])
with tab1 :
grid1 = AgGrid(df1, key=‘df1’, height=500)
#st.write(grid1[‘data’]) => commented because it returned a raw dataframe
with tab2 :
grid2 = AgGrid(df2, key = ‘df2’, height = 500)
#st.write(grid2[‘data’]) => commented because it returned a raw dataframe


Yes, having the same exact issue.

1 Like

Hi @sponge can you confirm that immediately after launching the app (before interacting with the aggrid tables) both tables can be seen by clicking on each tab? Once you have done that, try clicking on the table. Does the other table in the other tab then disappear? That’s what I’m seeing.

Hi Tyler,

Thanks for the help.
After a launch or a rerun only the table of the active tab of the page appears, the other one is just not there.
example :

  • on tab 1, table1 shows up with all filter options
  • clicking on tab 2, no table 2. Rerun on tab2 : table2 shows up with all filter options
  • back to tab 1 : table 1 not there, rerun : table 1 shows up / no table 2…

I am also running in this issue. I also created an issue with a minimal reproducable example on github:

It indeed seems that the table won’t be rendered if the tab containing the table is out of focus. It is almost like aggrid is not triggered to render.

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

tab_button, tab_A = st.tabs(['Button', 'Table'])

with tab_button:
    if st.button("Click me"):
        st.write('Thank you for clicking. Now go look at the table.')
with tab_A:
    df = pd.DataFrame({'foo': ['K0', 'K1', 'K2'],
                      'B': ['B0', 'B1', 'B2']})
    gb = GridOptionsBuilder.from_dataframe(df)

I also noticed that resizing the window can force the hidden aggrid to become rendered again.


I’m having the same issue here as well where interacting with a button or even another aggrid on one tab makes the aggrid on another tab ‘disappear’. Resizing the browser window makes the aggrid appear again.

@PablocFonseca we would highly appreciate it if you can look into this. Thank you very much. Loving the component!