diff --git a/vizro-core/changelog.d/20240313_092205_maximilian_schulz_table_grid_build_method.md b/vizro-core/changelog.d/20240313_092205_maximilian_schulz_table_grid_build_method.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240313_092205_maximilian_schulz_table_grid_build_method.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/src/vizro/models/_components/ag_grid.py b/vizro-core/src/vizro/models/_components/ag_grid.py index 5e91068b6..0ec0c4e15 100644 --- a/vizro-core/src/vizro/models/_components/ag_grid.py +++ b/vizro-core/src/vizro/models/_components/ag_grid.py @@ -98,13 +98,6 @@ def pre_build(self): self._input_component_id = self.figure._arguments.get("id", f"__input_{self.id}") def build(self): - # The pagination setting (and potentially others) only work when the initially built AgGrid has the same - # setting as the object that is built on-page-load and rendered finally. - dash_ag_grid_conf = self.figure._arguments.copy() - dash_ag_grid_conf["data_frame"] = pd.DataFrame() - grid = self.figure._function(**dash_ag_grid_conf) - grid.id = self._input_component_id - clientside_callback( ClientsideFunction(namespace="clientside", function_name="update_ag_grid_theme"), Output(self._input_component_id, "className"), @@ -114,7 +107,11 @@ def build(self): return dcc.Loading( [ html.H3(self.title, className="table-title") if self.title else None, - html.Div(grid, id=self.id, className="table-container"), + # The pagination setting (and potentially others) of the initially built AgGrid (in the build method + # here) must have the same setting as the object that is built by the on-page-load mechanism using + # with the user settings and rendered finally. Otherwise the grid is not rendered correctly. + # Hence be careful when editing the line below. + html.Div(self.__call__(data_frame=pd.DataFrame()), id=self.id, className="table-container"), ], id=f"{self.id}_outer", color="grey", diff --git a/vizro-core/src/vizro/models/_components/table.py b/vizro-core/src/vizro/models/_components/table.py index 0b2db2ab5..094f0ca0c 100644 --- a/vizro-core/src/vizro/models/_components/table.py +++ b/vizro-core/src/vizro/models/_components/table.py @@ -2,7 +2,7 @@ from typing import Dict, List, Literal import pandas as pd -from dash import State, dash_table, dcc, html +from dash import State, dcc, html try: from pydantic.v1 import Field, PrivateAttr, validator @@ -108,7 +108,7 @@ def build(self): html.Div( [ html.H3(self.title, className="table-title") if self.title else None, - html.Div(dash_table.DataTable(**{"id": self._input_component_id}), id=self.id), + html.Div(self.__call__(data_frame=pd.DataFrame()), id=self.id), ], className="table-container", id=f"{self.id}_outer", diff --git a/vizro-core/tests/unit/vizro/models/_components/test_table.py b/vizro-core/tests/unit/vizro/models/_components/test_table.py index 0d087779b..b6ac5ad3a 100644 --- a/vizro-core/tests/unit/vizro/models/_components/test_table.py +++ b/vizro-core/tests/unit/vizro/models/_components/test_table.py @@ -1,8 +1,9 @@ """Unit tests for vizro.models.Table.""" +import pandas as pd import pytest from asserts import assert_component_equal -from dash import dash_table, dcc, html +from dash import dcc, html try: from pydantic.v1 import ValidationError @@ -124,7 +125,7 @@ def test_table_build_mandatory_only(self, standard_dash_table): html.Div( [ None, - html.Div(dash_table.DataTable(id="__input_text_table"), id="text_table"), + html.Div(dash_data_table(id="__input_text_table", data_frame=pd.DataFrame())(), id="text_table"), ], className="table-container", id="text_table_outer", @@ -144,7 +145,7 @@ def test_table_build_with_underlying_id(self, dash_data_table_with_id, filter_in html.Div( [ None, - html.Div(dash_table.DataTable(id="underlying_table_id"), id="text_table"), + html.Div(dash_data_table(id="underlying_table_id", data_frame=pd.DataFrame())(), id="text_table"), ], className="table-container", id="text_table_outer", diff --git a/vizro-core/tests/unit/vizro/tables/test_dash_table.py b/vizro-core/tests/unit/vizro/tables/test_dash_table.py index 4425cc9c6..534816c45 100644 --- a/vizro-core/tests/unit/vizro/tables/test_dash_table.py +++ b/vizro-core/tests/unit/vizro/tables/test_dash_table.py @@ -70,11 +70,14 @@ def custom_dash_data_table(data_frame): custom_table = table.build() + expected_table_object = custom_dash_data_table(data_frame=pd.DataFrame())() + expected_table_object.id = "__input_" + id + expected_table = dcc.Loading( html.Div( [ None, - html.Div(dash_table.DataTable(id="__input_custom_dash_data_table"), id=id), + html.Div(expected_table_object, id=id), ], className="table-container", id=f"{id}_outer",