Vizro AgGrid quick filter

Dash Python
1

Hello

Please, i need help to implement an Quick Filter on a AgGrid component. I’m using Vizro. I suspect that i need to build a custom table and implement the the quick filter as in the documentation, but honestly, I’m not sure how to do it.

2

Hi @torta and welcome to the dash community :slight_smile:

The vizro team is often here on the forum, so maybe they can help?
@antony.milne @li.nguyen

If you don’t get an answer here, you can try posting the question on the Vizro GitHub

2 Likes
3

Hi @torta :waving_hand:

You don’t need to build a custom AgGrid component to get this functionality (though you can if you need additional AgGrid features that are not included in Vizro). Below is an example using Vizro’s dash_ag_grid.

from typing import Literal
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from dash import dcc, Input, Output, callback, Patch
from vizro.tables import dash_ag_grid


df = px.data.gapminder().query("year == 2007")

# Create custom input component
class CustomInput(vm.VizroBaseModel):
    type: Literal["custom_input"] = "custom_input"

    def build(self):
        return dcc.Input(id="quick-filter-input", placeholder="filter...")

#. Register the custom component
vm.Page.add_type("components", CustomInput)

page = vm.Page(
    title="Example of a custom Dash AgGrid",
    components=[
        CustomInput(),
        vm.AgGrid(
            title="Custom Dash AgGrid",
            figure=dash_ag_grid(id="custom_ag_grid", data_frame=df),
        ),
    ],
    layout=vm.Flex(),
)


@callback(Output("custom_ag_grid", "dashGridOptions"), Input("quick-filter-input", "value"), prevent_initial_call=True)
def update_filter(filter_value):
    newFilter = Patch()
    newFilter["quickFilterText"] = filter_value
    return newFilter


dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

If you need to customize AgGrid further, you can also wrap it using @capture("ag_grid")

@capture(“ag_grid”)
def my_custom_aggrid(data_frame=None, **kwargs):
defaults = {
“className”: “ag-theme-vizro”,
“columnDefs”: [{“field”: col} for col in data_frame.columns],
“dashGridOptions”: {“animateRows”: False},
}

return AgGrid(rowData=data_frame.to_dict("records"), **defaults, **kwargs)

Then use it in vm.AgGrid like this:
vm.AgGrid(
title="Custom Dash AgGrid",
figure=my_custom_aggrid(id="custom_ag_grid", data_frame=df), # make sure to assign ID for AgGrid here
),

Please let me know if this works for you or if you have any other questions :blush:

Nadija,

2 Likes