New JavascriptCode function to execute Javascript code like columns.render (#157)

* New class JavascriptCode to encapsulate JS code

* Add an example with columns.render

* define dt_args after initializing datatables

* rename dt init module

* version date

Author: mwouts

docs/advanced_parameters.md

@@ -244,6 +244,31 @@ with pd.option_context("display.float_format", "${:,.2f}".format):
     show(pd.Series([i * math.pi for i in range(1, 6)]))
 ```
 
+## Javascript formatting
+
+Numbers are formatted using Pandas, then are converted back to float to ensure they come in the right order when sorted.
+Therefore, to achieve a particular formatting you might have to resort to the
+[`columns.render` option](https://datatables.net/examples/advanced_init/column_render.html)
+of datatables.
+
+For instance, this [example](https://datatables.net/forums/discussion/61407/how-to-apply-a-numeric-format-to-a-column)
+can be ported like this:
+
+```{code-cell}
+from itables import JavascriptCode
+
+
+show(
+    pd.Series([i * math.pi * 1e4 for i in range(1, 6)]),
+    columnDefs=[
+        {
+            "targets": "_all",
+            "render": JavascriptCode("$.fn.dataTable.render.number(',', '.', 3, '$')"),
+        }
+    ],
+)
+```
+
 ## Row order
 
 Since `itables>=1.3.0`, the interactive datatable shows the rows in the same order as the original dataframe:

docs/changelog.md

@@ -1,6 +1,14 @@
 ITables ChangeLog
 =================
 
+1.4.6 (2023-01-31)
+------------------
+
+**Added**
+- We have added a new `JavascriptCode` class to encapsulate JS Code.
+This will let the user set JS values for some options like `columnDefs.render` ([#154](https://github.com/mwouts/itables/issues/154)).
+
+
 1.4.5 (2023-01-23)
 ------------------
 

itables/__init__.py

@@ -1,10 +1,17 @@
-from .javascript import JavascriptFunction, init_notebook_mode, show, to_html_datatable
+from .javascript import (
+    JavascriptCode,
+    JavascriptFunction,
+    init_notebook_mode,
+    show,
+    to_html_datatable,
+)
 from .version import __version__
 
 __all__ = [
     "__version__",
     "to_html_datatable",
     "show",
     "init_notebook_mode",
+    "JavascriptCode",
     "JavascriptFunction",
 ]

itables/html/datatables_template.html

@@ -7,16 +7,18 @@
     {
         // Define the table data
         const data = [];
-
-        // Define the dt_args
-        let dt_args = {};
-        dt_args["data"] = data;
-
         // Display the table
         $(document).ready(function () {
-            // [pre-dt-code]
-            window.__itables_render('#table_id', dt_args);
-        });
+            window.initializeDataTable().then(() => {
+
+                // Define the dt_args
+                let dt_args = {};
+                dt_args["data"] = data;
+
+                // [pre-dt-code]
+                $('#table_id').DataTable(dt_args);
+            });
+        })
     }
 </script>
 </div>

itables/html/initialize_offline_datatable.html

@@ -0,0 +1,9 @@
+<script type="module">
+  window.initializeDataTable = async () => {
+    if ($.prototype.DataTable) {
+      return;
+    }
+    const dt = (await import("dt_src")).default;
+    dt(window.$);
+  }
+</script>

itables/html/itables_render.html

@@ -87,7 +87,7 @@ def init_notebook_mode(
         display(
             HTML(
                 replace_value(
-                    read_package_file("html/itables_render.html"),
+                    read_package_file("html/initialize_offline_datatable.html"),
                     "dt_src",
                     "data:text/javascript;base64,{}".format(dt64),
                 )
@@ -163,6 +163,8 @@ def json_dumps(obj, eval_functions):
     if isinstance(obj, JavascriptFunction):
         assert obj.lstrip().startswith("function")
         return obj
+    if isinstance(obj, JavascriptCode):
+        return obj
     if isinstance(obj, str) and obj.lstrip().startswith("function"):
         if eval_functions is True:
             return obj
@@ -205,6 +207,12 @@ def __init__(self, value):
         ), "A Javascript function is expected to start with 'function'"
 
 
+class JavascriptCode(str):
+    """A class that explicitly states that a string is a Javascript code"""
+
+    pass
+
+
 def _datatables_repr_(df=None, tableId=None, **kwargs):
     return to_html_datatable(df, tableId, connected=_CONNECTED, **kwargs)
 

itables/javascript.py

@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "1.4.5"
+__version__ = "1.4.6"