St-aggrid horizontal scroll bar disappears when I define a height

🧩 Streamlit Components
1

Has anyone had success with forcing a horizontal scrollbar / slider and a vertical scroll bar? I have a grid with many rows and columns that I want to display. If I call st_aggrid.AgGrid() with no ‘height=’ argument, the grid has a horizontal scroll bar, but no vertical scroll bar, so it makes my streamlit page overly large. If I define the height, (say height=400), then the vertical scrollbar appears and the grid is shorter, but then my horizontal scrollbar disappears and I can’t scroll to view all the columns.

I’ve tried forcing the scrollbar using the grid options builder, but to no avail.
Any Ideas?
Is this a bug or user error?

    go_builder = st_aggrid.GridOptionsBuilder.from_dataframe(df)
    go_builder.configure_grid_options(alwaysShowHorizontalScroll = True)
    go = go_builder.build()
    st_aggrid.AgGrid(df,gridOptions=go, theme='streamlit', height=400)
1 Like
2

@PablocFonseca any thoughts on how to resolve this? I’ve tried for hours with no luck

I’ve resulted to using pagination for now but would prefer not to. And also still have an issue where I want to show one row and there is no horizontal scroll bar to show or I have to have unnessary white space.

3

Hey @Dominick_Crisci and @PabloCaSan , Any solutions?

4

Also interested in this. @Dominick_Crisci @Parth_Chokhra have you found any solutions?

5

It’s a weird work around that still doesn’t make much sense to me, but I’ve found a way to have both horizontal and vertical scroll bars:

go_builder = st_aggrid.GridOptionsBuilder.from_dataframe(df)
go_builder.configure_grid_options(alwaysShowHorizontalScroll=True, enableRangeSelection=True, pagination=True, paginationPageSize=10000, domLayout='normal')

agdf = st_aggrid.AgGrid(df, gridOptions=go, theme='streamlit', height=500)

I found that not defining a height results in the st_agrrid.AgGrid object automatically defining the height with domLayout="autoHeight" - (see JavaScript Data Grid: Grid Size) - this is probably not really desired in this use case.

I use the .configure_grid_options() method, with the pagination arguments defined. I still don’t understand why, but this is the only way I can get both scrollbars to work. Even more strange is that if I get both scrollbars to display, I don’t actually get the tools to cycle through the pages - so I just define an exorbitantly large page amount with the paginationPageSize argument such that my whole dataframe is displayed on one ‘page’ (though the user won’t know it’s a 'page).
In short if I use pagination with a defined height (with height=___ in the .AgGrid constructor) and alwaysShowHorizontalScroll=True (in the .configure_grid_options method), I can get both the vertical and horizontal scroll bars, but pages aren’t actually displayed (just the first page). If I don’t use pagination, I can only get one scroll bar or the other.

6

Hey @Bsf9 , I downgraded the st-aggrid version and problem is sorted.

streamlit-aggrid==0.3.3

This version works fine.

7

I will have to check my version tomorrow. I would prefer to not have to downgrade as I wouldn’t want to sacrifice any additional features/bug fixes, etc.

If anyone has a fix on the most updated version, please let me know!

8

This was the only solution that worked for me

9

work for me if downgrade to 0.3.3
edit : but 0.3.3 dont work on the cloud with last streamlit version
So happy to try to use AGgrid again …

i just wanted filter option maybe in next version of streamlit dataframe

10

Bottom sliderThe issue has been resolved here, and the complete code is as follows👇

st_aggrid.AgGrid(
    df,
    gridOptions=builder.build(),
    custom_css={
        "#gridToolBar": {
            "padding-bottom": "0px !important",
        }
    }
)
2 Likes
11

Thanks! It solved my problem! so happy!

12

Thanks, this worked for me as well.