New JavascriptCode function to execute Javascript code like columns.r…

…ender (#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

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/javascript.py

@@ -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/version.py

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