Pagination controls disappear when using wrapped headers

🧩 Custom Components streamlit-aggrid
1

We are using the Streamlit AG Grid component for displaying data frames in our Streamlit app. Using wrapped headers on the columns in combination with pagination makes the pagination controls fall outside of the visible area.

It is illustrated by the example below. To make sure the headers wrap sufficiently, the browser window should not be too wide for this data frame; about 800 pixels wide illustrates the effect.

import plotly
import streamlit as st
from st_aggrid import AgGrid, GridOptionsBuilder, ColumnsAutoSizeMode, GridUpdateMode

st.set_page_config(page_title="Report", layout="wide")
st.title("Report")

gapminder_df = plotly.data.gapminder()

builder = GridOptionsBuilder.from_dataframe(gapminder_df)
if st.checkbox("Wrap headers?"):
    builder.configure_default_column(wrapHeaderText=True, autoHeaderHeight=True)
builder.configure_column(field="country", header_name="Country", floatingFilter=False)
builder.configure_column(field="lifeExp", header_name="Life Expectancy (years)")
builder.configure_column(field="pop", header_name="Population")
builder.configure_column(field="gdpPercap", header_name="Gross Domestic Product Per Capita")
builder.configure_column(field="iso_alpha", header_name="Country Code (ISO 3166-1 alpha-3)")
builder.configure_column(field="iso_num", header_name="Country Code (ISO 3166-1 numeric-3)")
builder.configure_pagination(enabled=True, paginationAutoPageSize=False, paginationPageSize=10)
options = builder.build()

AgGrid(
    gapminder_df,
    gridOptions=options,
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
    update_mode=GridUpdateMode.NO_UPDATE,
    enable_enterprise_modules=False,
)

We are using the latest version of Streamlit AG Grid (0.3.4-post3) and Streamlit 1.27.2.

For this issue, resizing the width of the window makes the controls appear again. So, it appears the size of the containing iframe is not calculated correctly. Any thoughts on the cause or a fix? I could explicitly set the height, but having the height of the table dynamic is obviously preferable.

At first, I thought it was similar to this issue (and issues 200 and 210 on GitHub for Streamlit AG Grid). However, adding the custom CSS described does not solve the problem. For those issues, the pagination controls also do not appear after changing the size of the browser window.