SolaraS
Solara•2y ago
Cyrus

Setting height of `ipyaggrid` in Solara app gives error

Hi, how can I set the 
height
 of a 
ipyaggrid
 that is being cross-filtered by a 
solara
 component? I am using @MaartenBreddels 's snippet here general. However, if I pass an integer 
height
 to the grid element like this 
ipyaggrid.Grid.element(..., height=500)
 it renders fine but then leads to this error: 
trait of a Grid instance expected a unicode string, not the int 500
, whenever the data is filtered. Could it be a bug in 
ipyaggrid
 where the widget expects 
height
 to be an 
int
 but the trait is defined as 
unicode
, leading to data type issues? I found a workaround but wonder if I am missing something or if there is a better approach. Thanks!

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):
    
    height = solara.use_reactive(500) # set as int

    def update_df():
        widget = cast(ipyaggrid.Grid, solara.get_widget(el))
        widget.grid_options = grid_options
        widget.update_grid_data(df)
        print(widget.height)

        # workaround where we recast height
        if isinstance(widget.height, int):
            height.set(f'{widget.height}px')
        else:
            height.set(widget.height)

    el = ipyaggrid.Grid.element(grid_data=df, grid_options=grid_options, height=height.value)
    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}')
    solara.Select('Species', value=species, values=['setosa', 'versicolor', 'virginica'])
    AgGrid(df=df_filtered, grid_options=grid_options)
Was this page helpful?