st.container creates a layout area that holds Streamlit elements together. Use it to group related content, add a visible border, or reserve a place in the interface before the content is ready. section 6.4.4 section 7.8
A container is useful when the visual order of the interface should differ from the order of the Python statements. Create the container early, then populate it later when the required data or interaction is available. section 6.4.4 section 7.5.1
Common uses include:
- Wrap a group of widgets or metrics in a bordered box with st.container(border=True). section 6.4.4
- Reserve a location for an element that will be rendered only after data becomes available. section 7.8
- Place a control near the top of a sidebar while defining its action after filtered data has been calculated. section 7.5.1
Reserve a drilldown button location
Create a container inside the sidebar before the date-range controls: dd_button_container = st.container(). After calculating main_df and compare_df, call dd_button_container.button("Drilldown", use_container_width=True). If the button is clicked, open the drilldown dialog with both dataframes. The container keeps the button in its reserved position even though its rendering code appears later. section 7.5.1
Listing 6.9 A metric bar
import streamlit as st
from metric_config import metrics, display_metrics
from formatting import format_metric
def get_metric(df, metric):
return metric.func(df)
def metric_bar(main_df):
with st.container(border=True):
metric_cols = st.columns(len(display_metrics))
for idx, metric_name in enumerate(display_metrics):
metric = metrics[metric_name]
with metric_cols[idx]:
value = get_metric(main_df, metric)
formatted_value = format_metric(value, metric.type)
c1, c2, c3 = st.columns([1, 3, 1])
with c2:
st.metric(metric.title, formatted_value)
The complete metric-bar example shows a bordered container surrounding several metric columns and a nested column layout used to center each metric. section 6.4.4
