Controlling Streamlit st_aggrid (AgGrid) layout by placing grid inside an st.container, st.column, or st.empty

Question

Python 3.8.10 Ubuntu 20.04

Using st_aggrid (the Python port of AgGrid for Streamlit.)

Streamlit allows for layout control using st.column, st.empty, and st.container. The format is (for example)...

col1, col2 = st.columns(2)

original = Image.open(image)
col1.header("Original")
col1.image(original, use_column_width=True)

grayscale = original.convert('LA')
col2.header("Grayscale")
col2.image(grayscale, use_column_width=True)

Notice that col1 and col2 replace the st. in all the commands. I.e. without columns it would be...

import streamlit as st

original = Image.open(image)
st.header("Original")
st.image(original, use_column_width=True)

grayscale = original.convert('LA')
st.header("Grayscale")
st.image(grayscale, use_column_width=True)

...and things would all just appear one on top of the other on the page.

st_aggrid Grid's are created and placed using the command ...

instruments_gb = GridOptionsBuilder.from_dataframe(instruments_df)

if st.session_state["enable_sidebar"]:instruments_gb.configure_side_bar()
instruments_gb.configure_selection(st.session_state["selection_mode"])
instruments_gb.configure_selection(st.session_state["selection_mode"], use_checkbox=True, groupSelectsChildren=st.session_state["groupSelectsChildren"], groupSelectsFiltered=st.session_state["groupSelectsFiltered"])
instruments_gb.configure_selection(st.session_state["selection_mode"], use_checkbox=False, rowMultiSelectWithClick=True, suppressRowDeselection=True)
instruments_gb.configure_grid_options(domLayout='normal')
instruments_gridOptions = instruments_gb.build()

AgGrid(
        instruments_df, 
        gridOptions=instruments_gridOptions,
        height=st.session_state["grid_height"], 
        width='100%',
        data_return_mode=st.session_state["return_mode_value"], 
        update_mode=st.session_state["update_mode_value"],
        fit_columns_on_grid_load=True,
        allow_unsafe_jscode=True, #Set it to True to allow js function to be injected
        enable_enterprise_modules=True,    
        )

This will create and display the Grid. Note that st. is not used anywhere within the commands.

How can I place an st_aggrid Grid inside a Streamlit container/placeholder?
Alternatively, can the Grid be placed in a specific location on the page, without using Streamlit containers?

user_17197068 · Answer

Here is an example on how to place aggrid inside the container.

import streamlit as st
import numpy as np
from st_aggrid import AgGrid
import pandas as pd

data = {
    'country': ['norway', 'russia', 'china', 'japan'],
    'capital': ['oslo', 'moscow', 'beijing', 'tokyo']
}

df = pd.DataFrame(data)

with st.container():
    st.write("This is inside the container")
    AgGrid(df, height=200)    
    st.bar_chart(np.random.randn(50, 3))

st.write("This is outside the container.")

Controlling Streamlit st_aggrid (AgGrid) layout by placing grid inside an st.container, st.column, or st.empty

1 Answers

Output