Hi All,
Just wanted to ask if streamlit-elements can display like Folium and Pydeck Maps, and HTML and CSS-based Codes.
Thanks a lot!
Hey Everyone,
I tried running the following code (taken from the streamlit-gallery repo), but I cannot see any table (only the arrows for switching pages are shown). wondering what am I missing here:
import streamlit as st
from streamlit_elements import mui, elementsDEFAULT_COLUMNS = [
{ “field”: ‘id’, “headerName”: ‘ID’, “width”: 90 },
{ “field”: ‘firstName’, “headerName”: ‘First name’, “width”: 150, “editable”: True, },
{ “field”: ‘lastName’, “headerName”: ‘Last name’, “width”: 150, “editable”: True, },
{ “field”: ‘age’, “headerName”: ‘Age’, “type”: ‘number’, “width”: 110, “editable”: True, },
]DEFAULT_ROWS = [
{ “id”: 1, “lastName”: ‘Snow’, “firstName”: ‘Jon’, “age”: 35 },
{ “id”: 2, “lastName”: ‘Lannister’, “firstName”: ‘Cersei’, “age”: 42 },
{ “id”: 3, “lastName”: ‘Lannister’, “firstName”: ‘Jaime’, “age”: 45 },
{ “id”: 4, “lastName”: ‘Stark’, “firstName”: ‘Arya’, “age”: 16 },
{ “id”: 5, “lastName”: ‘Targaryen’, “firstName”: ‘Daenerys’, “age”: None },
{ “id”: 6, “lastName”: ‘Melisandre’, “firstName”: None, “age”: 150 },
{ “id”: 7, “lastName”: ‘Clifford’, “firstName”: ‘Ferrara’, “age”: 44 },
{ “id”: 8, “lastName”: ‘Frances’, “firstName”: ‘Rossini’, “age”: 36 },
{ “id”: 9, “lastName”: ‘Roxie’, “firstName”: ‘Harvey’, “age”: 65 },
]with elements(“new_element”):
mui.DataGrid(
columns=DEFAULT_COLUMNS,
rows = DEFAULT_ROWS,
pageSize=5,
checkboxSelection=True,
)
1 Like
Hi All,
I try to use mui.datagrid, and want to get the row data I selected from checkbox of datagrid, but when I onSelectionChange function, it is not work.
Also I want to show the GridToolbar, but when I use slots function, it does not show toolbar on web (like figure), Does anyone know how to solve these two problems?
Thanks a lot
def handle_selection_changed(event):
print('Selection Change')
selected = event['data']['selection']
nonlocal selected_rows
selected_rows = selected
on_selection_changed(selected)
with mui.Paper(key=self._key, sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"}, elevation=1):
with self.title_bar(padding="10px 15px 10px 15px", dark_switcher=False):
mui.icon.ViewCompact()
mui.Typography("Data grid")
with mui.Box(sx={"flex": 1, "minHeight": 0}):
grid = mui.DataGrid(
columns=columns,
rows=rows,
pageSize=page_size,
rowsPerPageOptions=rows_per_page_options,
checkboxSelection=True,
disableSelectionOnClick=False,
onSelectionChange=handle_selection_changed,
rowSelectionModel='number',
autoHeight=True,
disableColumnFilter=False,
density='standard',
slots={'toolbar': mui.GridToolbar()},
)
return (
grid,
mui.Toolbar(
variant='dense',
)(
mui.Button(
variant='contained',
color='primary',
onClick=on_export_clicked,
)('Export')
)
)
I suggest not testing this feature on the DataGrid for the time being, as it is already very advanced for the data table itself, so the author should not have done any integration with this part of the function, and be content with it.
Hi lkdd-ao
After I try some on click function, the checkbox is can work, but the GridToolbar still not displaying on datagrid.
And I have another issue is how to use the API from mui.lab, I want to use DatePicker (streamlit-elements/Lab.tsx at main · okld/streamlit-elements · GitHub), but it will get error code ( Production error - MUI)
Do you have any idea about this?
Thanks~
with elements("datagrid_test"):
with dashboard.Grid(layout3, draggableHandle=".draggable"):
# Third element of the dashboard, the Media player.
with mui.Card(key="media", sx={"display": "flex", "flexDirection": "column"}):
mui.CardHeader(title="Media Player", className="draggable")
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
DEFAULT_COLUMNS = [
{ "field": 'id', "headerName": 'ID', "width": 90 },
{ "field": 'firstName', "headerName": 'First name', "editable": True, "flex": 1 },
{ "field": 'lastName', "headerName": 'Last name', "editable": True, "flex": 1 },
{ "field": 'age', "headerName": 'Age', "type": 'number', "editable": True, "flex": 1, "align": 'left', "headerAlign": 'left' },
{ "field": 'check', "headerName": 'Check', "type": 'singleSelect', "valueOptions": 'ActivityTypes', "flex": 1},
]
DEFAULT_ROWS = [
{ "id": 1, "lastName": 'Snow', "firstName": 'Jon', "age": 35, "check": "True" },
{ "id": 2, "lastName": 'LannisterASASASASASA', "firstName": 'Cersei', "age": 42, "check": "True" },
{ "id": 3, "lastName": 'Lannister', "firstName": 'Jaime', "age": 45, "check": "True" },
{ "id": 4, "lastName": 'Stark', "firstName": 'Arya', "age": 16, "check": "False" },
{ "id": 5, "lastName": 'Targaryen', "firstName": 'Daenerys', "age": None, "check": "True" },
{ "id": 6, "lastName": 'Melisandre', "firstName": None, "age": 150, "check": "True" },
{ "id": 7, "lastName": 'Clifford', "firstName": 'Ferrara', "age": 44, "check": "False" },
{ "id": 8, "lastName": 'Frances', "firstName": 'Rossini', "age": 36, "check": "True" },
{ "id": 9, "lastName": 'Roxie', "firstName": 'Harvey', "age": 65, "check": "True" },
]
def _handle_edit(params):
print(params)
st.write(params)
def _click_cell(params):
print(params['id'])
st.write(params['id'])
def _click_checkbox(params):
print(params)
st.write(params)
mui.DataGrid(
columns=DEFAULT_COLUMNS,
rows=DEFAULT_ROWS,
pageSize=5,
rowsPerPageOptions=[5],
checkboxSelection=True,
disableSelectionOnClick=True,
density='comfortable',
onCellEditCommit=_handle_edit,
onRowClick=_click_cell,
onSelectionModelChange=_click_checkbox,
#slots= {'GridToolbar': True}
#slots= {'Toolbar': mui.GridToolbar()}
)
I have some impression of this because MUI has migrated the Date Picker to the MUI X version, and coincidentally, the API in the author’s released version cannot be used correctly.
You should set a fixed row height for it, such as sx={'height ':' 300px '}
Hi lkdd-ao
Thanks~ I think so it is reason.
I have another issue about mui.Select, Do you know how to let select API can be multiple selection, when I set multiple parameter is True, It not show any option at web.
And I also try to use mui.Autocomplete, but when I use mui.TextField into the renderInput parameter, It will get error about out of frames, Do you know how to use Autocomplete to create multiple selection?
this code I get error : ElementsFrameError: Cannot create element outside a frame. on renderInput
layout1 = [
dashboard.Item("selection", 0, 0, 12, 0.7),
]
def selection_frame(layout1):
# Create a frame to display elements.
with elements("selection_frame"):
with dashboard.Grid(layout1, draggableHandle=".draggable"):
with mui.Card(key="selection", sx={"display": "flex", "flexDirection": "column"}):
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
with mui.Grid(container=True, spacing=0):
with mui.Grid(item=True, xs=2, sm=2, md=2):
mui.Typography( "Multi Selection", variant="button", sx={"textAlign": "left"})
with mui.Box(sx={"flex": 1, "minHeight": 0}):
mui.Autocomplete(multiple= True, options= ["Humaira Sims",
"Santiago Solis",
"Dawid Floyd",
"Mateo Barlow"],
renderInput = lambda params: mui.TextField(params, label="Multiple Autocomplete", placeholder="Multiple Autocomplete"),
)
thanks
Yes, no problem. If you want to fully customize the front-end elements, please use the HTML module
Please provide the code so that I can easily find any areas I don’t understand。
Please provide any areas or key codes that I do not understand so that I can easily locate any areas that I do not understand.
Due to the relocation of the MUI version, some MUI components cannot function properly. You can use native components of HTML5 to create applications, but its response speed may be slightly slower
renderInput = lambda params: mui.TextField(params, label="Multiple Autocomplete", placeholder="Multiple Autocomplete"),
Lambda should not be used here, just use mui. TextField(). I tested mui. lab. Autocomplete and mui. Autocomplete, but unfortunately it doesn’t work. I guess it’s because the author didn’t complete the component when publishing this version, which may have made it too complex.
Hello @lkdd-ao,
Sorry, but I am new to the Material UI. Could you please give a example of how to use the Autocomplete without multi-select for selecting value from a option list?
Thanks!
I’m very sorry, I couldn’t find a method to use Autocomplete because this component will trigger an error of “Not a function” when called. I have been testing for a long time and this is an error caused by the front-end, but I can’t help it. It looks too complex.
Try using Select instead
Ok, thank you for the reply!
Hi - were you able to figure this out?
it also seems to add a bunch of network requests?
Network Without elements component
Network with elements component
Hello, I roughly understand what you mean. I have tried to solve the problem using your code
from streamlit_elements import elements, mui
def create_email_preview_page(*a):
print(a)
def create_email(content_container, videoTitle, index, videos, val):
return lambda: create_email_preview_page(content_container, videoTitle, index, videos, val)
def create_section_email_previews(videos, content_container):
for index, video in enumerate(videos):
val = index
# create mui card
mui.Card(
mui.CardHeader(
title= mui.Typography(video['videoTitle'], variant="h6", sx={"textAlign": "center"}),
),
mui.CardMedia(
image=video['thumbnailUrl'],
component="img",
sx={"maxHeight": "100%", "maxWidth": "100%", "width": "unset", },
width=None
),
mui.CardActions(
mui.Button("View Email", variant="contained", color="primary", onClick=create_email(content_container, videos[index]['videoTitle'], index, videos, val))
),
sx={"width": "30%", 'display': 'flex', 'flexDirection': 'column', 'justifyContent': 'center', 'alignItems': 'center', 'margin': '1rem 0', 'paddingBottom': '1rem'},
)
with elements(key='test'):
content_container = '123'
videos = [{'videoTitle': 'test', 'thumbnailUrl': 'https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Events/2022/IntlFreeReturns/Fuji_Dash_FreeIntlReturns_1X._SY304_CB592173034_.jpg'} for i in range(0, 3)]
create_section_email_previews(videos, content_container)