Use the same default parameters and style in Streamlit and notebooks

mwouts · Jun 12, 2024 · c60f043 · c60f043
1 parent d6a71c8
commit c60f043
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 23 deletions.
diff --git a/docs/advanced_parameters.md b/docs/advanced_parameters.md
@@ -135,7 +135,7 @@ You can replace the pagination with a [vertical scroll](https://datatables.net/e
 show(df, scrollY="200px", scrollCollapse=True, paging=False)
 ```
 
-In the context of the notebook, a horizontal scroll bar should appear when the table is too wide. In other contexts like here in Jupyter Book, you might want to use `scrollX = True`.
+Since ITables 2.2.0, the `.dt-layout-table` div has a default overflow equal to `auto`, so in most cases you won't need to use the `scrollX` option of datatables.
 
 ## Footer
 

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,6 +1,13 @@
 ITables ChangeLog
 =================
 
+2.2.0-dev (2024-06-??)
+------------------
+
+**Changed**
+- The default CSS contains has `overflow:auto` on `.dt-layout-table>div`. This improves the horizontal scrolling in Jupyter, and discards the need for `scrollX` in Streamlit ([#282](https://github.com/mwouts/itables/pull/282))
+
+
 2.1.1 (2024-06-08)
 ------------------
 

diff --git a/packages/dt_for_itables/CHANGELOG.md b/packages/dt_for_itables/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.0.11 (2024-06-??)
+
+**Added**
+- The default CSS contains has `overflow:auto` on `.dt-layout-table>div`. This improves the horizontal scrolling in Jupyter, and discards the need for `scrollX` in Streamlit ([#282](https://github.com/mwouts/itables/pull/282))
+
+
 # 2.0.10 (2024-06-08)
 
 **Added**

diff --git a/packages/dt_for_itables/package-lock.json b/packages/dt_for_itables/package-lock.json
diff --git a/packages/dt_for_itables/package.json b/packages/dt_for_itables/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dt_for_itables",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "DataTables bundle for itables",
   "main": "src/index.js",
   "typings": "src/index.d.js",

diff --git a/packages/dt_for_itables/src/index.css b/packages/dt_for_itables/src/index.css
@@ -1,3 +1,8 @@
 .dt-container {
     max-width: 100%;
 }
+
+.dt-layout-table>div {
+    overflow: auto;
+    max-width: 100%;
+}
diff --git a/packages/itables_for_streamlit/package-lock.json b/packages/itables_for_streamlit/package-lock.json
diff --git a/packages/itables_for_streamlit/src/index.tsx b/packages/itables_for_streamlit/src/index.tsx
@@ -11,10 +11,6 @@ let dt = new DataTable(table)
 function onRender(event: Event): void {
   // dt_args is the whole map of arguments passed on the Python side
   var other_args = (event as CustomEvent<RenderData>).detail.args.other_args
-
-  table.setAttribute('class', other_args.classes)
-  table.setAttribute('style', other_args.style)
-
   var dt_args = (event as CustomEvent<RenderData>).detail.args.dt_args
 
   if(other_args.downsampling_warning) {
@@ -26,6 +22,12 @@ function onRender(event: Event): void {
   // DataTable constructor, we call
   // destroy and then re-create the table
   dt.destroy()
+
+  // Set the class and style here otherwise the width
+  // might become a fixed width
+  table.setAttribute('class', other_args.classes)
+  table.setAttribute('style', other_args.style)
+
   dt = new DataTable(table, dt_args)
   if(other_args.caption) {
     dt.caption(other_args.caption)

diff --git a/src/itables/javascript.py b/src/itables/javascript.py
@@ -461,7 +461,7 @@ def _raise_if_javascript_code(values, context=""):
         return
 
 
-def get_itables_extension_arguments(df, caption=None, scrollX=True, **kwargs):
+def get_itables_extension_arguments(df, caption=None, **kwargs):
     """
     This function returns two dictionaries that are JSON
     serializable and can be passed to the itables extensions.
@@ -475,8 +475,6 @@ def get_itables_extension_arguments(df, caption=None, scrollX=True, **kwargs):
             "Pandas style objects can't be used with the extension"
         )
 
-    kwargs["scrollX"] = scrollX
-
     set_default_options(
         kwargs,
         use_to_html=False,
@@ -623,8 +621,8 @@ def set_default_options(kwargs, use_to_html, context=None, not_available=()):
             kwargs[option] = getattr(opt, option)
 
     if kwargs.get("scrollX", False):
-        # column headers are misaligned if we let margin:auto
-        kwargs["style"] = kwargs["style"].replace(";margin:auto;", ";margin:0;")
+        # column headers are misaligned if we have margin:auto
+        kwargs["style"] = kwargs["style"].replace("margin:auto", "margin:0")
 
     for name, value in kwargs.items():
         if value is None:

diff --git a/src/itables/options.py b/src/itables/options.py
@@ -28,7 +28,8 @@
 - 'margin:auto' to center the table.
 Combine multiple options using ';'.
 
-NB: When scrollX=true, the default is changed to "margin:0;caption-side:bottom"
+NB: When scrollX=true, "margin:auto" is replaced with "margin:0" 
+to avoid an issue with misaligned headers
 """
 style = "table-layout:auto;width:auto;margin:auto;caption-side:bottom"
 

diff --git a/src/itables/version.py b/src/itables/version.py
@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "2.1.1"
+__version__ = "2.1.2-dev"