New css option in show & itables.options (#106)

* Use a div with class "itables" and move style before the div
* Move the default css to itables.options
* Document how to use the custom CSS

Author: mwouts

docs/_toc.yml

@@ -3,6 +3,7 @@ root: quick_start
 chapters:
 - file: supported_editors
 - file: advanced_parameters
+- file: custom_css
 - file: downsampling
 - file: sample_dataframes
 - file: references

docs/changelog.md

@@ -1,6 +1,13 @@
 ITables ChangeLog
 =================
 
+1.3.1 (2022-11-01)
+------------------
+
+**Added**
+- The `show` method has a new `css` argument (defaults to `itables.options.css`) ([#104](https://github.com/mwouts/itables/issues/104)).
+
+
 1.3.0 (2022-09-04)
 ------------------
 

docs/custom_css.md

@@ -0,0 +1,38 @@
+---
+jupytext:
+  formats: md:myst
+  text_representation:
+    extension: .md
+    format_name: myst
+    format_version: 0.13
+    jupytext_version: 1.13.8
+kernelspec:
+  display_name: itables
+  language: python
+  name: itables
+---
+
+## Custom CSS
+
+You can change the CSS used to render the tables
+by either passing a custom CSS to the `show` function, or by
+changing `opt.css`. Note that the CSS must be the same for all the tables
+in a given notebook.
+
+```{code-cell}
+from itables import init_notebook_mode, show
+from itables.sample_dfs import get_countries
+import itables.options as opt
+
+
+opt.css = """
+.itables table td { font-style: italic; }
+.itables table th { font-style: oblique; }
+"""
+
+init_notebook_mode(all_interactive=True)
+```
+
+```{code-cell}
+get_countries()
+```

itables/html/datatables_template.html

@@ -1,5 +1,6 @@
-<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <style></style>
+<div class="itables">
+<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <script>
     // We use a namespace per table (= the next curly bracket)
     // to avoid conflicts between the various tables' data & dt_args
@@ -18,3 +19,4 @@
         });
     }
 </script>
+</div>

itables/html/datatables_template_connected.html

@@ -1,5 +1,6 @@
-<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <style></style>
+<div class="itables">
+<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
 <script type="module">
     // Import jquery and DataTable
@@ -19,3 +20,4 @@
         $('#table_id').DataTable(dt_args);
     });
 </script>
+</div>

itables/html/style.css renamed to itables/html/itables.css

@@ -1,20 +1,20 @@
-table td {
+.itables table td {
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
-table th {
+.itables table th {
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
-thead input {
+.itables thead input {
     width: 100%;
     padding: 3px;
     box-sizing: border-box;
 }
 
-tfoot input {
+.itables tfoot input {
     width: 100%;
     padding: 3px;
     box-sizing: border-box;

itables/javascript.py

@@ -230,12 +230,17 @@ def to_html_datatable(df=None, tableId=None, connected=True, **kwargs):
     """Return the HTML representation of the given dataframe as an interactive datatable"""
     # Default options
     for option in dir(opt):
-        if option not in kwargs and not option.startswith("__"):
+        if (
+            option not in kwargs
+            and not option.startswith("__")
+            and option != "read_package_file"
+        ):
             kwargs[option] = getattr(opt, option)
 
     # These options are used here, not in DataTable
     classes = kwargs.pop("classes")
     style = kwargs.pop("style")
+    css = kwargs.pop("css")
     tags = kwargs.pop("tags")
 
     showIndex = kwargs.pop("showIndex")
@@ -311,9 +316,7 @@ def to_html_datatable(df=None, tableId=None, connected=True, **kwargs):
     output = replace_value(
         output,
         "<style></style>",
-        f"""<style>
-{read_package_file("html/style.css")}
-</style>""",
+        f"""<style>{css}</style>""",
     )
 
     if column_filters:

itables/options.py

@@ -1,4 +1,5 @@
 """Global options for the Interactive Tables"""
+from .utils import read_package_file
 
 """Show the index? Possible values: True, False and 'auto'. In mode 'auto', the index is not shown
 if it has no name and its content is range(N)"""
@@ -28,3 +29,6 @@
 
 """Column filters"""
 column_filters = False
+
+"""Table CSS"""
+css = read_package_file("html/itables.css")

itables/version.py

@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "1.3.0"
+__version__ = "1.3.1"