okld / streamlit-elements

Create a draggable and resizable dashboard in Streamlit, featuring Material UI widgets, Monaco editor (Visual Studio Code), Nivo charts, and more!
MIT License
679 stars 77 forks source link

How to use DataGrid #13

Closed acschofield closed 2 years ago

acschofield commented 2 years ago

Is it possible to use mui.DataGrid? I couldn't figure out how to define the rows and columns in Python.

My naïve attempt:

        columns = [
            {"field": "id", "headerName": "ID", "width": 70},
            {"field": "firstName", "headerName": "First name", "width": 130},
            {"field": "lastName", "headerName": "Last name", "width": 130},
            {
                "field": "age",
                "headerName": "Age",
                "type": "number",
                " width": 90,
            },
        ]

        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},
        ]
        mui.DataGrid(columns=columns, rows=rows, pageSize=5, checkboxSelection=True)
acschofield commented 2 years ago

Figured it out

yoeldk commented 1 year ago

@acschofield I'm running into a similar problem. Can you please share a simple DataGrid code that works? TIA!