✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

Custom Components
106

Thanks! I seem to have gotten it to work using lazy and sync. It does however have a 2-3 second load time per response but that’s not too bad for this prototype.

107

Hello, I’m working on creating a dashboard using Plotly diagrams. I’ve been exploring how to integrate a line chart into the dashboard, but I haven’t found a solution yet. If anyone has experience with this, I’d greatly appreciate any assistance. Specifically, I’d like to include a line chart using st.line_chart(chart_data, height=500) within a mui.Paper("First item", key="first_item") component in the dashboard. please

1 Like
108

onChange is not working anymore for Streamlit 1.34 or above.
Seems like the creator is not maintaining this library any more.

109

Please refer to the solution👇
Solution to invalid custom component callback

110

In the demo the editor box does not show the pie chart code. I click on pie chart tab but does not change. How can I get the pie chart code? Thank you for your help.

111

Hi everyone! I’m interested in building a dashboard builder with Streamlit, where users can drag and drop widgets into a grid layout. I’d like to know if this is possible with Streamlit and the streamlit-elements library. From what I’ve seen so far, I haven’t found any examples of this functionality. Has anyone tried something similar, or know if it’s achievable? Thanks!

112

Of course, here is a minimalist example. If you want more feature support, please delve into streamlit-elements. Thank you.

from streamlit_elements import elements, mui, dashboard

layout = [
    dashboard.Item("item1", 0, 0, 2, 2),
    dashboard.Item("item2", 2, 0, 2, 2)
]

with elements("drag_demo"):
    with dashboard.Grid(layout):
        mui.Paper("This is item 1", key="item1")
        mui.Paper("This is item 2", key="item2")
1 Like
113

Hi Lkdd-ao thanks for your response, I took a look at Streamlit Elements and tested the dashboard example—it provides some of the functionality I’m aiming for. What I have in mind, though, is similar to the behavior in the CSS Grid Generator(https://cssgridgenerator.io/). Not in terms of generating HTML and CSS, but rather the way pressing a button on a grid spawns a widget that then scales according to the nearest grid cells. I like that feature and plan to incorporate something similar!

1 Like
114

This idea is fantastic, it reminds me of Power BI, which allows for the free generation and construction of visual components, facilitating developers to focus on in-depth research of data, which Streamlit Elements currently cannot achieve. Of course, I believe the use case for cssgridgenerator is not limited to that. :cowboy_hat_face:

115

Hi :slight_smile: ,
I’m trying to retrieve the coordinates of elements inside the dashboard as they are dragged around.
The code in the github readme doesn;t seem to work.
Namely, it’s not printing anything (there’s a print statement in the handle_layout_change).
Does anyone know how one can retrieve updated layout values?
Thanks :slight_smile:

code:


from streamlit_elements import elements, mui, html
from streamlit_elements import dashboard


with elements("dashboard"):

    # You can create a draggable and resizable dashboard using
    # any element available in Streamlit Elements.


    # First, build a default layout for every element you want to include in your dashboard

    layout = [
        # Parameters: element_identifier, x_pos, y_pos, width, height, [item properties...]
        dashboard.Item("first_item", 0, 0, 2, 2),
        dashboard.Item("second_item", 2, 0, 2, 2, isDraggable=False, moved=False),
        dashboard.Item("third_item", 0, 2, 1, 1, isResizable=False),
    ]

    # Next, create a dashboard layout using the 'with' syntax. It takes the layout
    # as first parameter, plus additional properties you can find in the GitHub links below.

    with dashboard.Grid(layout):
        mui.Paper("First item", key="first_item")
        mui.Paper("Second item (cannot drag)", key="second_item")
        mui.Paper("Third item (cannot resize)", key="third_item")

    # If you want to retrieve updated layout values as the user move or resize dashboard items,
    # you can pass a callback to the onLayoutChange event parameter.

    def handle_layout_change(updated_layout):
        # You can save the layout in a file, or do anything you want with it.
        # You can pass it back to dashboard.Grid() if you want to restore a saved layout.
        print(updated_layout)

    with dashboard.Grid(layout, onLayoutChange=handle_layout_change):
        mui.Paper("First item", key="first_item")
        mui.Paper("Second item (cannot drag)", key="second_item")
        mui.Paper("Third item (cannot resize)", key="third_item")
1 Like
116

I encountered the same issue as you when using the latest version of streamlit. You can try downgrading streamlit 1.38.0.

117

Where can I find developer doc on how to use DataGrid, including the parameters of it, how to customise it.

A dummy example below:

st.title(“Tes2t”)
columns2 = [
# {“field”: “id”, “headerName”: “Select All”},
{“field”: “firstName”, “headerName”: “Databases”}
]

rows2 = [
{“id”: 1, “lastName”: “Snow”, “firstName”: “Jon”, “age”: 35},
{“id”: 2, “lastName”: “Lannister”, “firstName”: “Cersei”, “age”: 42},
{“id”: 3, “lastName”: “Lannister”, “firstName”: “Jaime”, “age”: 45},
]
with st.expander(“Databases”):
with elements(“playground2”):
with mui.Box(sx={“height”: 300}):
mui.DataGrid(
columns=columns2,
rows=rows2,
pageSize=3,
checkboxSelection=True,
)