Bug: Table not always rendering when used inside tab

[iiLaurens]

I found that streamlit aggrid fails to display when used in combination with tabs. The issue is particularly noticeable when interacting in some way on another tab. The minimal reproducible example that I could produce is this:

To reproduce: Verify the table is rendered on the Table tab. Then click the button in the button tab. Then go back to the table tab to see that the table has dissapeared. Sometimes you need to press the button several times for this effect to happen.

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 used python 3.9, streamlit 1.14 and streamlit-aggrid 0.3.3 on a Windows 10 machine in Google Chrome and Internet explorer.

[12345678987654321eric]

me too

[SoulMUSZE]

Having the same issue as well. I would like to render multiple editable tables (aggrids), each on its own separate tab. However, Interacting with a table on one tab will cause the other tables on the other tabs 'disappear'. Surprisingly, resizing the browser window makes the other tables appear again.

I could go without tabs and display all tables on the same page but that would require too much scrolling and lead to bad user experience.

[Harshapuli540]

I am experiencing the same issue. Every time I change the tab after interacting with some widgets, ag-grid table disappears. Just after interacting with a widget in the tab, grid appears.

[AzulGarza]

Same issue here

[LucasSeibert]

same here

[ngallo1]

I only have trouble when AgGrid has checkboxes. Otherwise it works fine with tabs

[joulethieff]

same issue~

[Forgvn77]

This is a problem for me too and really limits use of AgGrid in our interface since it uses tabs! Can it get fixed? Thank you!

[broccoliboy]

See #204 for a potential fix. If anyone can test this I would appreciate the feedback. Thanks!

[SM-138496]

@broccoliboy Hi. I update to version 0.3.4.post3 and still find the same glitch. When I use the widget on another tab the grid on the previous tab disappears.

[broccoliboy]

Hi @SM-138496, my fix has not been merged yet so you'll have to build it from source. Hopefully @PablocFonseca will be able to review my updates in #204 and offer any feedback to get the fixes merged into the main branch. Until then, you'll have to clone my st.tabs-fix branch and build the frontend. Make sure node.js and yarn are installed, then run yarn && yarn build in the base dir before running pip install .

[yoeldk]

Hi @SM-138496, my fix has not been merged yet so you'll have to build it from source. Hopefully @PablocFonseca will be able to review my updates in #204 and offer any feedback to get the fixes merged into the main branch. Until then, you'll have to clone my st.tabs-fix branch and build the frontend. Make sure node.js and yarn are installed, then run yarn && yarn build in the base dir before running pip install .

Hi @broccoliboy, I ran yarn, yarn build and pip install . .

However, build folder was created but it only contains one file - bootstrap.min.css .

Any idea what did I miss?