This is going to be an example in the docs in some form, but i hope this code explain it (in the com

This is going to be an example in the docs in some form, but i hope this code explain it (in the comments)
from typing import cast
import ipyaggrid
import plotly.express as px
import solara


df = solara.reactive(px.data.iris())
species = solara.reactive('setosa')


@solara.component
def AgGrid(df, grid_options):
    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)  # this also updates the grid_options
    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options)  # does NOT change when Select is set
    # grid_data and grid_options are not traits, so letting them update by reacton/solara has 0 effect
    # instead, we need to get a reference to the widget and call .update_grid_data in a use_effect
    solara.use_effect(update_df, [df, grid_options])
    return el

@solara.component
def Page():

    grid_options = {
        'columnDefs': [
            {'headerName': 'Sepal Length', 'field': 'sepal_length'},
            {'headerName': 'Species', 'field': 'species'},
        ]
    }

    df_filtered = df.value.query(f'species == {species.value!r}')

    with solara.Columns():
        solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
        solara.DataFrame(df_filtered)  # changes when Select is set
        AgGrid(df=df_filtered, grid_options=grid_options)  # does NOT change when Select is set
Was this page helpful?