Tables in a Streamlit app have a fixed height that does not work well with lengthMenu or search extensions

[mwouts]

See for instance https://itables.streamlit.app/ - add the pageLength control to the layout and then try to show 25 rows per page. Then the tables does not fit anymore in its iframe and only 12 rows are visible.

We need to figure out how to make the iframe responsive to the size of its content. I suspect the issue is with

itables/packages/itables_for_streamlit/src/index.tsx

Line 35 in 4b92aad

Streamlit.setFrameHeight()

which calculates the height just when the table is initially displayed.

[mwouts]

I have tried adding a call to Streamlit.setFrameHeight() within the datatable drawCallBack but that causes the whole application to re-update continuously.

I see that the disqus component for Streamlit encountered the exact same issue a while ago, see streamlit/streamlit#1525. The issue was closed as fixed however the problem is still around and the Disqus component now uses

import ResizeObserver from "resize-observer-polyfill"

see https://github.com/okld/streamlit-disqus/blob/main/streamlit_disqus/frontend/src/height-observer.tsx.

Another possible options could be the MutationObserver described here in SO