Aggrid st.tabs compatibility

🧩 Custom Components streamlit-aggrid
1

Hi,
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 ?

Blockquote
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

6 Likes
2

Yes, having the same exact issue.

1 Like
3

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.

4

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…
5

I am also running in this issue. I also created an issue with a minimal reproducable example on github:
https://github.com/PablocFonseca/streamlit-aggrid/issues/159

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)
    AgGrid(df, gridOptions=gb.build())

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

7 Likes
6

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!

3 Likes
7

Anything ? :pensive:

2 Likes
8

Same issue. Is there a solution by now? Appreciate it

1 Like
9

Same issue here, has anyone found a workaround?

1 Like
10

I am having the same problem. I have 2 AgGrids in one tab and 1 in another tab. I have to hit CTL-R when switching to a given tab to have the grids appear… Using Streamlit v1.14.1 and streamlit_aggrid 0.3.3

11

I hope this helps, i created this and use an excel with 3 tabs, all need a column called “ID” where you can say place in Sheet1 list of people’s first/last names, and on Sheet2 (match ID) to one to many phone numbers (Home, cell, work) … and in Sheet3 (match ID again) to addresses (home, work etc…) This allows you to have parent->child grid and multiple aggrids with tabs on a page… Hope this helps…

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


def aggrid_interactive_table(df: pd.DataFrame):

    options = GridOptionsBuilder.from_dataframe(
        df, enableRowGroup=True, enableValue=True, enablePivot=True
    )
    options.configure_side_bar()
    options.configure_selection("single")
    selection = AgGrid(
        df,
        enable_enterprise_modules=True,
        gridOptions=options.build(),
        
        update_mode=GridUpdateMode.MODEL_CHANGED,
        allow_unsafe_jscode=True,
        height=300
    )

    return selection

def tab_grid(df: pd.DataFrame):
    
    options = GridOptionsBuilder.from_dataframe(
        df, enableRowGroup=True, enableValue=True, enablePivot=True
    )
    options.configure_side_bar()
    grid_table = AgGrid(
        df,
        enable_enterprise_modules=True,
        gridOptions=options.build(),
        
        height=300,
        allow_unsafe_jscode=True
    )

def main():
    df_a = pd.read_excel('test.xlsx','Sheet1')
    df_b = pd.read_excel('test.xlsx','Sheet2')
    df_c = pd.read_excel('test.xlsx','Sheet3')

    selection = aggrid_interactive_table(df_a)

    tab1, tab2 = st.tabs(['Sheet2','Sheet3'])

    with tab1:
        if selection:
            i = selection["selected_rows"]
            if i:
                key_2 = i[0]['ID']
                if key_2 is not None:
                    grid_t = tab_grid(df_b[df_b['ID'] == key_2])

    with tab2:
        if selection:
            j = selection["selected_rows"]
            if j:
                key_3 = i[0]['ID']
                if key_3 is not None:
                    grid_t = tab_grid(df_c[df_c['ID'] == key_3])


if __name__ == "__main__":
    main()
1 Like
12

The issue is still unsolved as of 3/22/23. I’m using the latest version of streamlit as of today i.e. 1.20.0 and latest version of st_aggrid i.e. 0.3.4.post3. At the first run or on page refresh, AgGrid tables in all tabs appear fine but as soon as a selection is made in a tab, the other tabs do not render. Like someone mentioned, only the last active tab shows.

13

See Fix issue with st.tabs where grids on inactive tabs disappear by broccoliboy · Pull Request #204 · PablocFonseca/streamlit-aggrid · GitHub for a potential fix. If anyone can test this I would appreciate the feedback. Thanks!

14

Hello
I had the same issue. I resolved it by refreshing ag grid with a simple javascript line. add the code below (refresh the page once from the browser after you add the code):

from streamlit.components.v1 import html

# Your code here

html('<script>document.querySelector(''[title="st_aggrid.agGrid"]'').contentWindow.location.reload()</script>')
1 Like
15

This seems to have fixed it for me (ran a very small sample test and no table vanishing has happened as of yet). Going to run a larger scale test and see if it holds. Thank you!

1 Like
16

I have about 25 tabs. On each tab are two tables. When I used the code (html(‘’)), only the first two tabs are able to display the tables. In addition, I get an error (OverflowError: Maximum recursion level reached)