Make pagination visible on both themes

mckinsey · Mar 5, 2025 · 0f8cc36 · 0f8cc36
1 parent e7c0843
commit 0f8cc36
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
@@ -40,7 +40,8 @@ def my_custom_aggrid(chosen_columns: list[str], data_frame=None):
             id="custom_ag_grid",
             title="Custom Dash AgGrid",
             figure=my_custom_aggrid(
-                data_frame=df, chosen_columns=["country", "continent", "lifeExp", "pop", "gdpPercap"]
+                data_frame=df,
+                chosen_columns=["country", "continent", "lifeExp", "pop", "gdpPercap"],
             ),
         ),
     ],
@@ -59,6 +60,7 @@ def my_custom_aggrid(chosen_columns: list[str], data_frame=None):
             title="Custom Dash AgGrid",
             figure=dash_ag_grid(
                 data_frame=df,
+                dashGridOptions={"pagination": True},
             ),
         ),
     ],

diff --git a/vizro-core/src/vizro/static/css/aggrid.css b/vizro-core/src/vizro/static/css/aggrid.css
@@ -24,6 +24,8 @@
   --ag-header-column-resize-handle-color: var(--border-subtleAlpha02);
   --ag-range-selection-border-color: transparent;
   --ag-input-focus-border-color: transparent;
+  --ag-foreground-color: var(--text-primary);
+  --ag-secondary-foreground-color: var(--text-secondary);
 }
 
 /* Header ------- */