Fix overflowing of table-container and add styling to pagination tab (

#272)

vizro-core/changelog.d/20240119_110922_huong_li_nguyen_fix_table.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/examples/demo/app.py

@@ -431,6 +431,7 @@ def create_benchmark_analysis():
                     id="dash_data_table_country",
                     data_frame=gapminder,
                     columns=columns,
+                    page_size=30,
                     style_data_conditional=[
                         {
                             "if": {"filter_query": "{gdpPercap} < 1045", "column_id": "gdpPercap"},

vizro-core/examples/demo/jupyter_version/app.ipynb

@@ -450,6 +450,7 @@
     "                    id=\"dash_data_table_country\",\n",
     "                    data_frame=gapminder,\n",
     "                    columns=columns,\n",
+    "                    page_size=30,\n",
     "                    style_data_conditional=[\n",
     "                        {\n",
     "                            \"if\": {\"filter_query\": \"{gdpPercap} < 1045\", \"column_id\": \"gdpPercap\"},\n",

vizro-core/examples/demo/yaml_version/dashboard.yaml

@@ -421,6 +421,7 @@ pages:
               id: pop
               name: pop
               type: numeric
+          page_size: 30
           style_data_conditional:
             - backgroundColor: "#ff9222"
               if:

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

@@ -29,5 +29,5 @@
 }
 
 .table-container::-webkit-scrollbar-thumb {
-  border-color: var(--surfaces-bg-02);
+  border-color: var(--main-container-bg-color);
 }

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

@@ -22,6 +22,7 @@
   .dash-spreadsheet-inner
   table {
   --hover: var(--main-container-bg-color);
+  width: 100%;
 }
 
 #right-side
@@ -41,10 +42,19 @@
   font-size: 14px;
 }
 
+.dash-table-container .previous-next-container .page-number {
+  color: var(--text-primary);
+}
+
+#right-side .dash-table-container .previous-next-container {
+  padding: 4px 0;
+  font-size: 14px;
+}
+
 .table-container {
-  height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 36px);
   overflow: auto;
-  padding: 12px;
-  padding-left: 32px;
   width: 100%;
 }