Issue with Exporting Filtered Data from AgGrid Table in Vizro Dashboard

datawithalvin commented 3 weeks ago

Question

Hi Vizro team,

First of all, I want to express my appreciation for your fantastic project! I love what you're doing with Vizro, and it's been incredibly helpful for my work. I have encountered an issue and would be grateful for your assistance :).

I am trying to export filtered data from an AgGrid table in my Vizro dashboard. However, despite applying filters, the exported data includes the entire dataset instead of just the filtered rows. Below is a simplified version of my code:

Code/Examples


# import packages
import vizro.models as vm
from vizro.tables import dash_ag_grid
import pandas as pd
from vizro.actions import export_data, filter_interaction
from vizro import Vizro

# define page dashboard
def masterdata_membership(df: pd.DataFrame) -> any:
    try:
        page_membership = vm.Page(
            title="Masterdata Membership",
            id="masterdata_membership",
            layout=vm.Layout(grid=[
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0],
                [1, 1, 1, 1, 1]
            ]),
            components=[
                vm.AgGrid(
                    id="membership_table",
                    figure=dash_ag_grid(
                        data_frame=df,
                        columnDefs=[],
                        dashGridOptions={'pagination': False, "animateRows": True, "enableCellTextSelection": True},
                    ),
                ),
                vm.Button(
                    text="Export data",
                    actions=[vm.Action(function=export_data(inputs=["membership_table.filteredData"]))],
                ),
            ],
        )

        return page_membership
    except Exception as e:
        raise e

Other information

When I attempt to export the data, it includes all the data from the original DataFrame, not just the filtered rows. Could you please provide guidance on how to correctly export only the filtered data from the table?

Thank you so much for your help and for the amazing work you're doing with Vizro!

Best regards, Alvin.

Which package?

vizro

Package version

0.1.17

Python version

3.12.2

OS

No response

Code of Conduct

[X] I agree to follow the Code of Conduct.

petar-qb commented 2 weeks ago

Hey @datawithalvin, glad you like Vizro 😃.

Thanks for the good question. Obviously it's not entirely clear from the Vizro docs what exactly happens when the export_data action is applied to the AgGrid, so we will improve the docs.

Until we improve the docs, here's an explanation of how things are. The Vizro export_data action exports data that has been filtered using Filter, or filter_interaction. Therefore, it exports data that has been filtered on the server-side of the app. This means that applying the AgGrid column filter (which filters data on the client-side) does not affect the exported data.

However, since the underlying dash_ag_grid allows users to export data that has been filtered using the AgGrid column filters (client-side filtering), this means that the same can be achieved using Vizro as well.

I prepared the Vizro app example with:

Vizro server-side filters exporting data on the page_one and
AgGrid client-side filters exporting data on the page_two.

I hope the answer and the example will help you to configure the desired case 😃.

Example:

"""Example to show dashboard configuration."""

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.actions import export_data
from vizro.models.types import capture
from vizro.tables import dash_ag_grid

df = px.data.gapminder()

# Vizro filter exporting Page --------------------------------------------
# Solution based on https://vizro.readthedocs.io/en/stable/pages/user-guides/actions/#export-data

page_one = vm.Page(
    title="Vizro filters exporting",
    layout=vm.Layout(grid=[[0]] * 5 + [[1]]),
    components=[
        vm.AgGrid(id="ag_grid_1", title="Equal Title One", figure=dash_ag_grid(data_frame=df)),
        vm.Button(text="Export data", actions=[vm.Action(function=export_data())]),
    ],
    controls=[vm.Filter(column="continent"), vm.Filter(column="year")],
)

# AgGrid filter exporting Page -------------------------------------------
# Solution based on https://dash.plotly.com/dash-ag-grid/export-data-csv

# More about Vizro Custom Actions -> https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-actions/ 
@capture("action")
def ag_grid_data_exporting():
    return True

page_two = vm.Page(
    title="AgGrid filters exporting",
    layout=vm.Layout(grid=[[0]] * 5 + [[1]]),  # grid = [[0], [0], [0], [0], [0], [1]]
    components=[
        vm.AgGrid(
            id="ag_grid_2",
            title="Equal Title One",
            figure=dash_ag_grid(
                # underlying_ag_grid_2 is the id of the AgGrid component on the client-side. It is used to reference
                # it's `exportDataAsCsv` property with the custom action below
                id="underlying_ag_grid_2",
                data_frame=df,
                csvExportParams={
                    "fileName": "ag_grid_2.csv",
                },
            ),
        ),
        vm.Button(
            id="button_2",
            text="Export data",
            actions=[
                vm.Action(
                    function=ag_grid_data_exporting(),
                    outputs=["underlying_ag_grid_2.exportDataAsCsv"]
                )
            ],
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page_one, page_two])

if __name__ == "__main__":
    Vizro().build(dashboard).run()

datawithalvin commented 2 weeks ago

Hi @petar-qb ,

Thank you so much for your clear explanation and the detailed how-to that addressed a case similar to my problem. Your guidance was incredibly helpful and allowed me to resolve the issue.

I truly appreciate the support and the swift response. The Vizro project is fantastic, and your assistance has made a significant difference in my work.

Thanks again for your help!

mckinsey / vizro