Table styling and default setting

vizro-core/src/vizro/models/_components/table.py

@@ -1,7 +1,6 @@
 import logging
-from typing import List, Literal
+from typing import List, Literal, Optional
 
-import pandas as pd
 from dash import dash_table, html
 from pydantic import Field, PrivateAttr, validator
 
@@ -23,11 +22,13 @@ class Table(VizroBaseModel):
         type (Literal["table"]): Defaults to `"table"`.
         figure (CapturedCallable): Table like object to be displayed. Current choices include:
             [`dash_table.DataTable`](https://dash.plotly.com/datatable).
+        title (str): Title of the table. Defaults to `None`.
         actions (List[Action]): See [`Action`][vizro.models.Action]. Defaults to `[]`.
     """
 
     type: Literal["table"] = "table"
     figure: CapturedCallable = Field(..., import_path=vt, description="Table to be visualized on dashboard")
+    title: Optional[str] = Field(None, description="Title of the table")
     actions: List[Action] = []
 
     # Component properties for actions and interactions
@@ -52,4 +53,10 @@ def __getitem__(self, arg_name: str):
 
     @_log_call
     def build(self):
-        return html.Div(dash_table.DataTable(pd.DataFrame().to_dict("records"), []), id=self.id)
+        return html.Div(
+            [
+                html.H3(self.title, className="table-title") if self.title else None,
+                html.Div(dash_table.DataTable(), id=self.id),
+            ],
+            className="table-container",
+        )

vizro-core/src/vizro/static/css/table.css

@@ -26,16 +26,28 @@ div.right_side
   .dash-table-container
   .dash-spreadsheet-container
   .dash-spreadsheet-inner
-  td,
-.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
-  padding: 0px 4px;
+  td
+  .dash-cell-value.unfocused {
+  color: var(--text-primary);
+  font-size: 14px;
 }
 
-.table-title {
+div.right_side
+  .dash-table-container
+  .dash-spreadsheet-container
+  .dash-spreadsheet-inner
+  .column-header-name {
+  color: var(
+    --text-primary
+  ); /* Should be text-secondary when hover color is implemented */
+  font-size: 14px;
+}
+
+div.right_side .table-title {
   padding-bottom: 14px;
 }
 
-.table-container {
+div.right_side .table-container {
   padding: 12px;
   padding-left: 18px;
-}
+}

vizro-core/src/vizro/tables/dash_table.py

@@ -1,12 +1,36 @@
 """Module containing the standard implementation of `dash_table.DataTable`."""
+from collections import defaultdict
+from collections.abc import Mapping
+from typing import Any
+
 import pandas as pd
 from dash import dash_table
 
 from vizro.models.types import capture
 
 
+def _set_defaults_nested(supplied: Mapping[str,Any], defaults: Mapping[str,Any]) -> dict[str,Any]:
+    supplied = defaultdict(dict, supplied)
+    for default_key, default_value in defaults.items():
+        if isinstance(default_value, Mapping):
+            supplied[default_key] = _set_defaults_nested(supplied[default_key], default_value)
+        else:
+            supplied.setdefault(default_key, default_value)
+    return dict(supplied)
+
+
 @capture("table")
 def dash_data_table(data_frame: pd.DataFrame, **kwargs):
     """Standard `dash_table.DataTable`."""
-    kwargs.setdefault("columns", [{"name": i, "id": i} for i in data_frame.columns])
+    defaults = {
+        "columns": [{"name": i, "id": i} for i in data_frame.columns],
+        "style_as_list_view": True,
+        "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+        "style_header": {
+            "border_bottom": "1px solid var(--state-overlays-selected-hover)",
+            "border_top": "1px solid var(--main-container-bg-color)",
+            "height": "32px",
+        },
+    }
+    kwargs = _set_defaults_nested(kwargs, defaults)
     return dash_table.DataTable(data=data_frame.to_dict("records"), **kwargs)

vizro-core/tests/unit/vizro/tables/test_dash_table.py

@@ -0,0 +1,16 @@
+from vizro.tables.dash_table import _set_defaults_nested
+import pytest
+
+@pytest.fixture
+def default_dictionary():
+    return {"a": {"b": {"c": 1, "d": 2}},"e": 3}
+
+@pytest.mark.parametrize("input, expected_output", [
+    ({},{"a": {"b": {"c": 1, "d": 2}},"e": 3}), # nothing supplied
+    ({'e': 10},{"a": {"b": {"c": 1, "d": 2}},"e": 10}), # flat main key
+    ({"a": {"b": {"c": 11, "d": 12}}},{"a": {"b": {"c": 11, "d": 12}},"e": 3}), # updated multiple nested keys
+    ({"a": {"b": {"c": 1, "d": {"f":42}}}},{"a": {"b": {"c": 1, "d": {"f":42}}},"e": 3}), # add new dict
+    ({"a": {"b": {"c": 5}}},{'a': {'b': {'c': 5, 'd': 2}},"e": 3}) #arbitrary nesting
+    ]) 
+def test_set_defaults_nested(default_dictionary, input, expected_output):
+    assert _set_defaults_nested(input, default_dictionary) == expected_output