Remove the css option and document the styling

docs/advanced_parameters.md

@@ -240,7 +240,7 @@ import itables.options as opt
 opt.style = "table-layout:auto;width:auto"
 ```
 
-## Theme
+## Classes
 
 Select how your table looks like with the `classes` argument (defaults to `"display nowrap"`) of the `show` function, or by changing `itables.options.classes`.
 
@@ -268,6 +268,8 @@ show(df, classes="display")
 show(df, classes="display nowrap cell-border")
 ```
 
+Last but not least, you can add custom classes and provide custom CSS for those, see
+
 ## Pandas formatting
 
 `itables` builds the HTML representation of your Pandas dataframes using Pandas itself, so

docs/custom_css.md

@@ -14,28 +14,46 @@ kernelspec:
 
 # Custom CSS
 
-You can change the global CSS used to render the tables
-by either passing a custom CSS to the `show` function, or by
-changing `opt.css`.
+## Targeting all tables
 
-Note that the CSS must be the same for all the tables
-in a given notebook. To change the CSS for just one table,
-use the [`style`](advanced_parameters.html#position-and-width) argument of the `show` function.
+You can use CSS to alter how the interactive datatables are rendered.
+Use the `.dataTable` class attribute to target all the tables in the notebook, like here:
 
 ```{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}
+from IPython.display import display, HTML
+
+
+css = """
+.dataTable th { font-weight: bolder; }
+.dataTable:not(.table_with_monospace_font) tr { font-style: italic; }
+"""
+display(HTML(f"<style>{css}</style>" ""))
+```
+
 ```{code-cell}
 get_countries()
 ```
+
+## Targeting specific classes
+
+You might also want to target only specific table like in this example
+(note how we add the `table_with_monospace_font` class
+to the table using the [`classes`](advanced_parameters.md#classes)
+argument of the `show` function):
+
+```{code-cell}
+class_specific_css = ".table_with_monospace_font { font-family: courier, monospace }"
+display(HTML(f"<style>{class_specific_css}</style>" ""))
+```
+
+```{code-cell}
+show(get_countries(), classes="display nowrap table_with_monospace_font")
+```

docs/quarto/quarto_html.qmd

@@ -26,6 +26,7 @@ jupyter:
 ```{python}
 #| echo: false
 
+from IPython.display import display, HTML
 import itables.options as opt
 
 # show 5 rows per 'page'
@@ -36,7 +37,7 @@ opt.layout["topStart"] = None
 
 # use a smaller font (default is medium)
 # see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
-opt.css += ".dataTables_wrapper { font-size: small; }"
+display(HTML("<style>.dataTables_wrapper { font-size: small; }</style>"))
 ```
 
 ```{python}
@@ -70,6 +71,7 @@ get_countries(html=False)
 ## This document uses
 
 ```python
+from IPython.display import display, HTML
 import itables.options as opt
 
 
@@ -81,7 +83,7 @@ opt.layout["topStart"] = None
 
 # use a smaller font (default is medium)
 # see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
-opt.css += ".dataTables_wrapper { font-size: x-small; }"
+display(HTML("<style>.dataTables_wrapper { font-size: small; }</style>"))
 ```
 :::
 

docs/quarto/quarto_revealjs.qmd

@@ -26,6 +26,7 @@ jupyter:
 ```{python}
 #| echo: false
 
+from IPython.display import display, HTML
 import itables.options as opt
 
 # show 5 rows per 'page'
@@ -36,7 +37,7 @@ opt.layout["topStart"] = None
 
 # use a smaller font (default is medium)
 # see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
-opt.css += ".dataTables_wrapper { font-size: small; }"
+display(HTML("<style>.dataTables_wrapper { font-size: small; }</style>"))
 ```
 
 ```{python}
@@ -70,6 +71,7 @@ get_countries(html=False)
 ## This document uses
 
 ```python
+from IPython.display import display, HTML
 import itables.options as opt
 
 
@@ -81,7 +83,7 @@ opt.layout["topStart"] = None
 
 # use a smaller font (default is medium)
 # see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
-opt.css += ".dataTables_wrapper { font-size: small; }"
+display(HTML("<style>.dataTables_wrapper { font-size: small; }</style>"))
 ```
 :::
 

itables/html/datatables_template.html

@@ -1,5 +1,3 @@
-<div class="itables">
-<style></style>
 <table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <script type="module">
     const { DataTable, jQuery: $ } = await import(window._datatables_src_for_itables);
@@ -18,4 +16,3 @@
         });
     });
 </script>
-</div>

itables/html/datatables_template_connected.html

@@ -1,5 +1,3 @@
-<div class="itables">
-<style></style>
 <table id="table_id"><thead><tr><th>A</th></tr></thead></table>
 <link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.1/b-3.0.0/b-html5-3.0.0/datatables.min.css" rel="stylesheet">
 <script type="module">
@@ -21,4 +19,3 @@
         });
     });
 </script>
-</div>

itables/javascript.py

@@ -461,7 +461,6 @@ def set_default_options(kwargs, use_to_html):
             (not use_to_html or (option not in _OPTIONS_NOT_AVAILABLE_WITH_TO_HTML))
             and option not in kwargs
             and not option.startswith("__")
-            and option not in ["read_package_file"]
         ):
             kwargs[option] = deepcopy(getattr(opt, option))
 
@@ -562,7 +561,11 @@ def to_html_datatable_using_to_html(
 def html_table_from_template(
     html_table, table_id, data, kwargs, connected, import_jquery, column_filters
 ):
-    css = kwargs.pop("css")
+    if "css" in kwargs:
+        TypeError(
+            "The 'css' argument has been deprecated, see the new "
+            "approach at https://mwouts.github.io/itables/custom_css.html."
+        )
     eval_functions = kwargs.pop("eval_functions", None)
     pre_dt_code = kwargs.pop("pre_dt_code")
 
@@ -586,11 +589,6 @@ def html_table_from_template(
         html_table,
     )
     output = replace_value(output, "#table_id", "#{}".format(table_id))
-    output = replace_value(
-        output,
-        "<style></style>",
-        "<style>{}</style>".format(css),
-    )
     if not connected:
         output = replace_value(
             output, "_datatables_src_for_itables", DATATABLES_SRC_FOR_ITABLES

itables/options.py

@@ -3,7 +3,6 @@
 These parameters are documented at
 https://mwouts.github.io/itables/advanced_parameters.html
 """
-from .utils import read_package_file
 
 """Table layout, see https://datatables.net/reference/option/layout
 NB: to remove a control, replace it by None"""
@@ -50,9 +49,6 @@
 """Column filters"""
 column_filters = False
 
-"""Table CSS"""
-css = read_package_file("html/itables.css")
-
 """Should a warning appear when we have to encode an unexpected type?"""
 warn_on_unexpected_types = True