How to display a table and its plot side by side with an adjusted height - plot

Question

I’m trying to display a table and its plot side by side in a page.
The goal is that the plot’s height matches with the table’s one !
I tried with st.container and st.columns combined but it does not work (see image below).
import streamlit as st
import plotly.express as px
long_df = px.data.medals_long()
fig = px.bar(long_df, x="nation", y="count",
color="medal", title="Long-Form Input")
data_container = st.container()
with data_container:
table, plot = st.columns(2)
with table:
st.table(long_df)
with plot:
st.plotly_chart(fig, use_container_width=True)
>>> Output (in the web browser):
As you can see, the plot is much longer than the table.
Do you know how to fix this, please ?
Important detail : I'm using different tables, so the number of rows is changing constantly.

Answer 1

Unfortunately, neither st.columns() nor st.container has a height parameter. You can achieve this using the height parameters of the plotly figure and st.dataframe(). When we define height for the dataframe, the user can scroll down to see whole table.
height = 400 # px
fig = px.bar(
long_df, x="nation", y="count",
color="medal", title="Long-Form Input",
height=height,
)
# update margin to show title on top
fig.update_layout(margin={"t": 30, "b": 0})
data_container = st.container()
with data_container:
table, plot = st.columns(2)
with table:
# use st.dataframe instead of st.table
st.dataframe(long_df, height=height)
with plot:
st.plotly_chart(fig, use_container_width=True)
Another way of visualising data along with the table is to use st.tabs().
tab1, tab2 = st.tabs(["Data", "Chart"])
with tab1:
st.table(long_df)
with tab2:
st.plotly_chart(fig, use_container_width=True)