通过在 st.container、st.column 或 st.empty 中放置网格来控制 Streamlit st_aggrid (AgGrid) 布局

Question

Python 3.8.10 Ubuntu 20.04

使用 st_aggrid（用于 Streamlit 的 AgGrid Python 端口。）

Streamlit 允许使用 st.column, st.empty, and st.container 进行布局控制。格式是（例如）...

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)

请注意，col1 和 col2 替换了所有命令中的 st.。 IE。如果没有专栏，它将是...

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)

...而且页面上的内容只会一个接一个地出现。

st_aggrid 使用命令创建和放置网格...

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,    
        )

这将创建并显示网格。请注意，st. 未在命令中的任何位置使用。

如何在 Streamlit 中放置 st_aggrid 网格 container/placeholder?
或者，可以将 Grid 放置在页面上的特定位置，不使用 Streamlit 容器？

Answer 1

这是一个关于如何将 aggrid 放入容器中的示例。

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.")

通过在 st.container、st.column 或 st.empty 中放置网格来控制 Streamlit st_aggrid (AgGrid) 布局

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

layout

python-3.x

ag-grid

streamlit

输出