Use autoWidth = False rather than scrollX = True (#111)

* Use width:auto rather than scrollX = True
* Render wide tables 'full-width' in Jupyter Book
* Version 1.3.4

Author: mwouts

docs/advanced_parameters.md

@@ -62,6 +62,8 @@ Note: you can change the default value of the dom option by setting `opt.dom` as
 Select [how many entries](https://datatables.net/examples/advanced_init/length_menu.html) should appear at once in the table with either the `lengthMenu` argument of the `show` function, or with the global option `itables.options.lengthMenu`:
 
 ```{code-cell}
+:tags: [full-width]
+
 import itables.options as opt
 
 opt.lengthMenu = [2, 5, 10, 20, 50, 100, 200, 500]
@@ -73,45 +75,71 @@ df
 Show the table in full with the [`paging` argument](https://datatables.net/reference/option/paging), either in the `show` method, or in the options:
 
 ```{code-cell}
+:tags: [full-width]
+
 show(df.head(), paging=False)
 ```
 
 ### Scroll
 
-By default, wide tables have a horizontal scroll bar (since `itables>=1.3.3`).
-You can remove it by setting `scrollX = False` in either `itables.opt` or in the `show` function.
-
 The pagination can be replaced with a [vertical scroll](https://datatables.net/examples/basic_init/scroll_y.html):
 
 ```{code-cell}
+:tags: [full-width]
+
 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`.
+
 ## Table and cell style
 
+### Datatable classes
+
 Select how your table should look like with the `classes` argument of the `show` function, or by changing `itables.options.classes`. For the list of possible values, see [datatables' default style](https://datatables.net/manual/styling/classes) and [the style examples](https://datatables.net/examples/styling/).
 
 ```{code-cell}
+:tags: [full-width]
+
+opt.scrollX = True
 opt.classes = ["display", "nowrap"]
 df
 ```
 
 ```{code-cell}
+:tags: [full-width]
+
 opt.classes = ["display", "cell-border"]
 df
 ```
 
+### Table position and width
+
+You can set the `width` of a particular table, or center it by adding `margin:auto` to the `style` argument:
+
+```{code-cell}
+:tags: [full-width]
+
+opt.scrollX = False
+
+show(df, style="width:80%; margin:auto;")
+```
+
 ## Table captions
 
 You can set additional `tags` like a [caption](https://datatables.net/blog/2014-11-07) on the table with the `tags` option:
 
 ```{code-cell}
+:tags: [full-width]
+
 show(df, tags="<caption>Countries from the World Bank Database</caption>")
 ```
 
 The position of the caption can be set explicitly as in the datatables example above (note that the default position may depend on how you render the notebook):
 
 ```{code-cell}
+:tags: [full-width]
+
 show(
     df,
     tags='<caption style="caption-side: top">Countries from the World Bank Database</caption>',
@@ -127,6 +155,8 @@ opt.lengthMenu = [5, 10, 20, 50, 100, 200, 500]
 Use `footer = True` if you wish to display a table footer.
 
 ```{code-cell}
+:tags: [full-width]
+
 show(df, footer=True)
 ```
 
@@ -243,18 +273,19 @@ The [`columnDefs.width`](https://datatables.net/reference/option/columns.width)
 You can set a fixed width for all the columns with `"targets": "_all"`:
 
 ```{code-cell}
-show(
-    df,
-    columnDefs=[{"width": "120px", "targets": "_all"}],
-)
+:tags: [full-width]
+
+show(df, columnDefs=[{"width": "120px", "targets": "_all"}], scrollX=True)
 ```
 
 You can also adjust the width of selected columns only:
 
 ```{code-cell}
+:tags: [full-width]
+
 show(
     df,
-    columnDefs=[{"width": "20%", "targets": [2, 3]}],
+    columnDefs=[{"width": "30%", "targets": [2, 3]}],
 )
 ```
 

docs/changelog.md

@@ -1,6 +1,13 @@
 ITables ChangeLog
 =================
 
+1.3.4 (2022-11-07)
+------------------
+
+**Fixed**
+- We have removed `scrollX = True` which was causing issues with non-wide tables ([#110](https://github.com/mwouts/itables/issues/110)). Instead, we now use `style = "width:auto"`.
+
+
 1.3.3 (2022-11-06)
 ------------------
 

docs/downsampling.md

@@ -38,18 +38,24 @@ df.values.nbytes
 ```
 
 ```{code-cell}
+:tags: [full-width]
+
 df
 ```
 
 To show the table in full, we can modify the value of `maxBytes` either locally:
 
 ```{code-cell}
+:tags: [full-width]
+
 show(df, maxBytes=0)
 ```
 
 or globally:
 
 ```{code-cell}
+:tags: [full-width]
+
 opt.maxBytes = 2**20
 df
 ```

docs/quick_start.md

@@ -49,6 +49,8 @@ init_notebook_mode(all_interactive=True)
 After this, any Pandas object (DataFrame or Series) is displayed as an interactive [datatables.net](https://datatables.net/) table, which lets you explore, filter or sort your data.
 
 ```{code-cell}
+:tags: [full-width]
+
 from itables.sample_dfs import get_countries
 
 df = get_countries()

docs/sample_dataframes.md

@@ -87,6 +87,8 @@ show(dict_of_test_dfs["multiindex"])
 ## countries
 
 ```{code-cell}
+:tags: [full-width]
+
 show(dict_of_test_dfs["countries"])
 ```
 
@@ -99,6 +101,8 @@ show(dict_of_test_dfs["capital"])
 ## complex_index
 
 ```{code-cell}
+:tags: [full-width]
+
 show(dict_of_test_dfs["complex_index"])
 ```
 
@@ -111,11 +115,15 @@ show(dict_of_test_dfs["int_float_str"])
 ## wide
 
 ```{code-cell}
-show(dict_of_test_dfs["wide"], maxBytes=100000, maxColumns=100)
+:tags: [full-width]
+
+show(dict_of_test_dfs["wide"], maxBytes=100000, maxColumns=100, scrollX=True)
 ```
 
 ## long_column_names
 
 ```{code-cell}
-show(dict_of_test_dfs["long_column_names"])
+:tags: [full-width]
+
+show(dict_of_test_dfs["long_column_names"], scrollX=True)
 ```

itables/options.py

@@ -9,7 +9,7 @@
 classes = ["display"]
 
 """Default table style"""
-style = "max-width:100%"
+style = "width:auto;"
 
 """Additional tags like e.g. caption"""
 tags = ""
@@ -21,9 +21,6 @@
 # maxRows = 10000
 # maxColumns = 1000
 
-"""Horizontal scroll by default"""
-scrollX = True
-
 """Pre dt code"""
 pre_dt_code = ""
 

itables/version.py

@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "1.3.3"
+__version__ = "1.3.4"