Use the same default parameters and style in Streamlit and notebooks

Remove unnecessary scrollX

Author: mwouts

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.1.2, 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
 

docs/changelog.md

@@ -1,6 +1,14 @@
 ITables ChangeLog
 =================
 
+2.1.2 (2024-06-19)
+------------------
+
+**Changed**
+- The default CSS contains now has `overflow:auto` on `div.dt-layout-table>div`. Thanks to this we now get
+an automatic horizontal scrolling in Jupyter, Jupyter Book and also Streamlit if the table is too wide ([#282](https://github.com/mwouts/itables/pull/282)).
+
+
 2.1.1 (2024-06-08)
 ------------------
 

docs/custom_css.md

@@ -113,9 +113,9 @@ show(df, classes="display nowrap table_with_monospace_font")
 The `show` function has a `style` argument that determines the
 style for that particular table.
 
-The default value for `style` is `"table-layout:auto;width:auto;margin:auto;caption-side:bottom"`. When `scrollX` is `True`, `margin:auto` gets replaced with `margin:0` to avoid misaligned headers.
-Without `width:auto`, tables with few columns still take the full notebook width in Jupyter.
-Using `margin:auto` makes non-wide tables centered in Jupyter.
+The default value for `style` is `"table-layout:auto;width:auto;margin:auto;caption-side:bottom"`.
+Without `width:auto`, tables with few columns are stretched to fit the container width.
+Using `margin:auto` makes non-wide tables centered.
 
 ## Position and width
 
@@ -152,7 +152,6 @@ You can set a fixed width for all the columns with `"targets": "_all"`:
 show(
     df,
     columnDefs=[{"width": "120px", "targets": "_all"}],
-    scrollX=True,
     style="width:1200px",
     autoWidth=False,
 )

docs/polars_dataframes.md

@@ -148,15 +148,15 @@ show(dict_of_test_dfs["int_float_str"])
 ```{code-cell}
 :tags: [full-width]
 
-show(dict_of_test_dfs["wide"], maxBytes=100000, maxColumns=100, scrollX=True)
+show(dict_of_test_dfs["wide"], maxBytes=100000, maxColumns=100)
 ```
 
 ## long_column_names
 
 ```{code-cell}
 :tags: [full-width]
 
-show(dict_of_test_dfs["long_column_names"], scrollX=True)
+show(dict_of_test_dfs["long_column_names"])
 ```
 
 ## named_column_index

docs/streamlit.md

@@ -2,7 +2,7 @@
 
 ITables in version `2.1.0` or above can be used in Streamlit.
 
-To render a DataFrame with ITables in a Streamlit app, use `interactive_table`:
+To render a DataFrame with ITables in a Streamlit app, use `itables.streamlit.interactive_table`:
 ```
 from itables.streamlit import interactive_table
 ```
@@ -11,9 +11,6 @@ The function `interactive_table` accepts the same arguments as `show` and `to_ht
 first argument is the dataframe that will be displayed, and then you
 can set a `caption`, custom `classes` or `style`, and even activate the `buttons` extension, etc...
 
-Unlike `show`, `interactive_table` has `scrollX=True` by default. This makes the
-rendering of wide tables more similar to that of `show` in Notebooks.
-
 ## A sample application
 
 A sample Streamlit application is available at [itables.streamlit.app](https://itables.streamlit.app) (source code [here](https://github.com/mwouts/demo_itables_in_streamlit/blob/main/itables_app.py))

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**