[Tidy] Tidy up build method of vm.Table and vm.Grid

vizro-core/changelog.d/20240313_092205_maximilian_schulz_table_grid_build_method.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

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",

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",

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",

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",