Version 1.1.0 (#81)

- `itables.options` and the `show` function have a new `column_filters` argument to display individual column search boxes ([#69](mwouts/jupytext#69))
- We have documented DataTables' `dom` option.
- We have introduced a new class `JavascriptFunction` to limit the evaluation of Javascript function to selected ones.
- The documentation is formatted with `black` thanks to a Jupytext & Black pre-commit hook.

Author: mwouts

.pre-commit-config.yaml

@@ -1,12 +1,6 @@
 # Install pre-commit hooks via
 # pre-commit install
 
-exclude: >
-    (?x)^(
-      \.vscode/settings\.json|
-      demo/.*|
-      index.html
-    )$
 repos:
 
   - repo: https://github.com/pre-commit/pre-commit-hooks
@@ -38,3 +32,12 @@ repos:
     hooks:
     - id: pyupgrade
       args: ["--py36-plus"]
+
+  - repo: https://github.com/mwouts/jupytext
+    rev: v1.13.8
+    hooks:
+    - id: jupytext
+      types: ["markdown"]
+      args: ["--pipe", "black"]
+      additional_dependencies:
+        - black==22.3.0 # Matches hook

README.md

@@ -16,6 +16,7 @@ pip install itables
 Activate the interactive mode for all series and dataframes with
 ```python
 from itables import init_notebook_mode
+
 init_notebook_mode(all_interactive=True)
 ```
 or use `itables.show` to show just one Series or DataFrame as an interactive table.

docs/advanced_parameters.md

@@ -96,12 +96,62 @@ df
 You can set additional `tags` like a [caption](https://datatables.net/blog/2014-11-07) on the table with the `tags` option:
 
 ```{code-cell}
-show(df, tags='<caption>Countries from the World Bank Database</caption>')
+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}
+show(
+    df,
+    tags='<caption style="caption-side: top">Countries from the World Bank Database</caption>',
+)
+```
+
+```{code-cell}
+opt.lengthMenu = [5, 10, 20, 50, 100, 200, 500]
+```
+
+## Table footer
+
+Use `footer = True` if you wish to display a table footer.
+
+```{code-cell}
+show(df, footer=True)
+```
+
+## Column filters
+
+Use `column_filters = "header"` or `"footer"` if you wish to display individual column filters
+(remove the global search box with [`dom='lrtip'`](https://datatables.net/reference/option/dom) if desired).
+
 ```{code-cell}
-show(df, tags='<caption style="caption-side: top">Countries from the World Bank Database</caption>')
+alpha_numeric_df = pd.DataFrame(
+    [["one", 1.5], ["two", 2.3]], columns=["string", "numeric"]
+)
+
+show(alpha_numeric_df, column_filters="footer", dom="lrtip")
+```
+
+As always you can set activate column filters by default with e.g.
+
+```{code-cell}
+opt.column_filters = "footer"
+alpha_numeric_df
+```
+
+Column filters also work on dataframes with multiindex columns:
+
+```{code-cell}
+from itables.sample_dfs import get_dict_of_test_dfs
+
+get_dict_of_test_dfs()["multiindex"]
+```
+
+Now we deactivate the column filters for the rest of the notebook
+
+```{code-cell}
+opt.column_filters = False
 ```
 
 ## Float precision
@@ -129,22 +179,27 @@ You can use Javascript callbacks to set the cell or row style depending on the c
 
 The example below, in which we color in red the cells with negative numbers, is directly inspired by the corresponding datatables.net [example](https://datatables.net/reference/option/columns.createdCell).
 
+Note how the Javascript callback is declared as `JavascriptFunction` object below.
+
 ```{code-cell}
+from itables import JavascriptFunction
+
 show(
     pd.DataFrame([[-1, 2, -3, 4, -5], [6, -7, 8, -9, 10]], columns=list("abcde")),
     columnDefs=[
         {
             "targets": "_all",
-            "createdCell": """
+            "createdCell": JavascriptFunction(
+                """
 function (td, cellData, rowData, row, col) {
     if (cellData < 0) {
         $(td).css('color', 'red')
     }
 }
-""",
+"""
+            ),
         }
     ],
-    eval_functions=True,
 )
 ```
 
@@ -214,7 +269,7 @@ show(
 The [search option](https://datatables.net/reference/option/search) let you control the initial value for the search field, and whether the query should be treated as a regular expression or not:
 
 ```{code-cell}
-show(df, search={"regex": True, "caseInsensitive": True, "search":"s.ain"})
+show(df, search={"regex": True, "caseInsensitive": True, "search": "s.ain"})
 ```
 
 ## Select rows

docs/changelog.md

@@ -1,6 +1,15 @@
 ITables ChangeLog
 =================
 
+1.1.0 (2022-06-23)
+------------------
+
+**Added**
+- `itables.options` and the `show` function have a new `column_filters` argument to display individual column search boxes ([#69](https://github.com/mwouts/jupytext/issues/69))
+- We have introduced a new class `JavascriptFunction` to limit the evaluation of Javascript function to selected ones.
+- The documentation is formatted with `black` thanks to a Jupytext & Black pre-commit hook.
+
+
 1.0.0 (2022-06-22)
 ------------------
 

docs/downsampling.md

@@ -5,7 +5,7 @@ jupytext:
     extension: .md
     format_name: myst
     format_version: 0.13
-    jupytext_version: 1.11.5
+    jupytext_version: 1.13.8
 kernelspec:
   display_name: itables
   language: python
@@ -20,13 +20,13 @@ When the data in a table is larger than `maxBytes`, which is equal to 64KB by de
 
 If you wish, you can increase the value of `maxBytes` or even deactivate the limit (with `maxBytes=0`). Similarly you can set a limit on the number of rows (`maxRows`, defaults to 0) or columns (`maxColumns`, defaults to `pd.get_option('display.max_columns')`).
 
-```{code-cell} ipython3
+```{code-cell}
 from itables import init_notebook_mode, show
 
 init_notebook_mode(all_interactive=True)
 ```
 
-```{code-cell} ipython3
+```{code-cell}
 from itables.sample_dfs import get_indicators
 import itables.options as opt
 
@@ -37,19 +37,19 @@ df = get_indicators()
 df.values.nbytes
 ```
 
-```{code-cell} ipython3
+```{code-cell}
 df
 ```
 
 To show the table in full, we can modify the value of `maxBytes` either locally:
 
-```{code-cell} ipython3
+```{code-cell}
 show(df, maxBytes=0)
 ```
 
 or globally:
 
-```{code-cell} ipython3
-opt.maxBytes = 2 ** 20
+```{code-cell}
+opt.maxBytes = 2**20
 df
 ```

docs/quick_start.md

@@ -5,7 +5,7 @@ jupytext:
     extension: .md
     format_name: myst
     format_version: 0.13
-    jupytext_version: 1.11.5
+    jupytext_version: 1.13.8
 kernelspec:
   display_name: itables
   language: python
@@ -34,15 +34,15 @@ pip install itables
 
 Activate the interactive mode for all series and dataframes with
 
-```{code-cell} ipython3
+```{code-cell}
 from itables import init_notebook_mode
 
 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} ipython3
+```{code-cell}
 from itables.sample_dfs import get_countries
 
 df = get_countries()
@@ -51,7 +51,7 @@ df
 
 If you prefer to render just one series or dataframe as an interactive table, use `show`:
 
-```{code-cell} ipython3
+```{code-cell}
 from itables import show
 from itables.sample_dfs import get_population
 

docs/sample_dataframes.md

@@ -5,7 +5,7 @@ jupytext:
     extension: .md
     format_name: myst
     format_version: 0.13
-    jupytext_version: 1.11.5
+    jupytext_version: 1.13.8
 kernelspec:
   display_name: itables
   language: python
@@ -16,7 +16,7 @@ kernelspec:
 
 In this notebook we make sure that our test dataframes are displayed nicely with the default `itables` settings.
 
-```{code-cell} ipython3
+```{code-cell}
 from itables import init_notebook_mode, show
 from itables.sample_dfs import get_dict_of_test_dfs
 
@@ -26,78 +26,78 @@ init_notebook_mode(all_interactive=True)
 
 ## empty
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["empty"])
 ```
 
 ## int
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["int"])
 ```
 
 ## float
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["float"])
 ```
 
 ## str
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["str"])
 ```
 
 ## time
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["time"])
 ```
 
 ## object
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["object"])
 ```
 
 ## multiindex
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["multiindex"])
 ```
 
 ## countries
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["countries"])
 ```
 
 ## capital
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["capital"])
 ```
 
 ## complex_index
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["complex_index"])
 ```
 
 ## int_float_str
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["int_float_str"])
 ```
 
 ## wide
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["wide"], maxBytes=100000, maxColumns=100)
 ```
 
 ## long_column_names
 
-```{code-cell} ipython3
+```{code-cell}
 show(dict_of_test_dfs["long_column_names"])
 ```

itables/__init__.py

@@ -1,4 +1,4 @@
-from .javascript import init_notebook_mode, show
+from .javascript import JavascriptFunction, init_notebook_mode, show
 from .version import __version__
 
-__all__ = ["__version__", "show", "init_notebook_mode"]
+__all__ = ["__version__", "show", "init_notebook_mode", "JavascriptFunction"]

itables/html/column_filters/initComplete.js

@@ -0,0 +1,14 @@
+const initComplete = function () {
+    // Apply the search
+    this.api()
+        .columns()
+        .every(function () {
+            const that = this;
+
+            $('input', this.header()).on('keyup change clear', function () {
+                if (that.search() !== this.value) {
+                    that.search(this.value).draw();
+                }
+            });
+        });
+}

itables/html/column_filters/pre_dt_code.js

@@ -0,0 +1,9 @@
+// Setup - add a text input to each header or footer cell
+$('#table_id thead_or_tfoot th').each(function () {
+    let title = $(this).text();
+    $(this).html('<input type="text" placeholder="Search ' +
+        // We use encodeURI to avoid this LGTM error:
+        // https://lgtm.com/rules/1511866576920/
+        encodeURI(title).replaceAll("%20", " ") +
+        '" />');
+});