ITables components (Jupyter widget, Dash and Streamlit components) have the same options as show (#377)

* Update datatables.net to 2.3.0
* Parse BigInts in JavaScript
* Parse NaN and +/-Infinity in JavaScript
* Components get the table data in JSON format
* Move the streamlit example app to the main repo
* New option 'text_in_header_can_be_selected'
* New ITable class in JavaScript
* New argument table_html in ITable
* Common argument preparation for the html representation and the app components
* Evaluate the keys that are encoded with JavascriptCode or Function
* New option allow_html which default to False
* Pandas style objects use a table_style
* Move the doc on app components to a dedicated folder
* Document each option separately

Author: mwouts

README.md

@@ -7,8 +7,8 @@
 [![Conda Version](https://img.shields.io/conda/vn/conda-forge/itables.svg)](https://anaconda.org/conda-forge/itables)
 [![pyversions](https://img.shields.io/pypi/pyversions/itables.svg)](https://pypi.python.org/pypi/itables)
 [![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
-[![Jupyter Widget](https://img.shields.io/badge/Jupyter-Widget-F37626.svg?style=flat&logo=Jupyter)](https://mwouts.github.io/itables/widget.html)
-[![Dash Component](https://img.shields.io/badge/Dash-Plotly-1098F7.svg?style=flat&logo=Plotly)](https://mwouts.github.io/itables/dash.html)
+[![Jupyter Widget](https://img.shields.io/badge/Jupyter-Widget-F37626.svg?style=flat&logo=Jupyter)](https://mwouts.github.io/itables/apps/widget.html)
+[![Dash Component](https://img.shields.io/badge/Dash-Plotly-1098F7.svg?style=flat&logo=Plotly)](https://mwouts.github.io/itables/apps/dash.html)
 [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_red.svg)](https://itables.streamlit.app)
 
 This packages changes how Pandas and Polars DataFrames are rendered in Python notebooks and applications.
@@ -51,14 +51,8 @@ and then render any DataFrame as an interactive table that you can sort, search
 If you prefer to render only selected DataFrames as interactive tables, call `itables.init_notebook_mode(all_interactive=False)`, then use `itables.show` to show just one Series or DataFrame as an interactive table:
 ![show](docs/show_df.png)
 
-Since ITables v1.0, the [jQuery](https://jquery.com/) and [DataTables](https://datatables.net/) libraries and CSS
-are injected in the notebook when you execute `init_notebook_mode` with its default argument `connected=False`.
-Thanks to this the interactive tables will work even without a connection to the internet.
 
-If you prefer to load the libraries dynamically (and keep the notebook lighter), use `connected=True` when you
-execute `init_notebook_mode`.
-
-## Supported notebook environments
+## ITables in Notebooks
 
 ITables works in all the usual Jupyter Notebook environments, including Jupyter Notebook, Jupyter Lab, Jupyter nbconvert (i.e. the tables are still interactive in the HTML export of a notebook), Jupyter Book, Google Colab and Kaggle.
 
@@ -68,7 +62,7 @@ ITables works well in VS Code, both in Jupyter Notebooks and in interactive Pyth
 
 ## ITables in Python applications
 
-Last but not least, ITables is also available as
+ITables is also available as
 - a [Jupyter Widget](https://mwouts.github.io/itables/widget.html)
 - a [Dash](https://mwouts.github.io/itables/dash.html) component
 - a [Streamlit](https://mwouts.github.io/itables/streamlit.html) component,

apps/streamlit/itables_app.py

@@ -0,0 +1,136 @@
+"""Run this app with: streamlit run apps/streamlit/itables_app.py"""
+
+from typing import Sequence, cast
+
+import pyarrow
+import streamlit as st
+from st_aggrid import AgGrid  # type: ignore
+from streamlit.components.v1.components import MarshallComponentException
+
+import itables.options as it_opt
+from itables.javascript import get_compact_style, get_expanded_classes
+from itables.sample_dfs import get_countries, get_dict_of_test_dfs
+from itables.streamlit import interactive_table
+
+st.set_page_config(
+    page_title="ITables in Streamlit",
+    page_icon="https://raw.githubusercontent.com/mwouts/itables/main/src/itables/logo/loading.svg",
+)
+st.logo(
+    "https://raw.githubusercontent.com/mwouts/itables/main/src/itables/logo/logo.svg",
+    link="https://mwouts.github.io/itables/streamlit.html",
+)
+st.markdown(
+    "![ITables](https://raw.githubusercontent.com/mwouts/itables/main/src/itables/logo/wide.svg)"
+)
+st.sidebar.markdown(
+    """
+                    # ITables in Streamlit
+                    ![Stars](https://img.shields.io/github/stars/mwouts/itables)
+                    """
+)
+
+caption = st.sidebar.text_input("Caption", value="Countries")
+select = st.sidebar.toggle("Row selection", value=True)
+classes = st.sidebar.multiselect(
+    "Classes",
+    options=["display", "nowrap", "compact", "cell-border", "stripe"],
+    default=get_expanded_classes(it_opt.classes),
+)
+buttons = st.sidebar.multiselect(
+    "Buttons",
+    options=["pageLength", "copyHtml5", "csvHtml5", "excelHtml5", "colvis"],
+    default=["copyHtml5", "csvHtml5", "excelHtml5", "colvis"],
+)
+
+style = st.sidebar.text_input("Style", value=get_compact_style(it_opt.style))
+
+render_with = st.sidebar.selectbox(
+    "Render with", ["st.dataframe", "streamlit-aggrid", "itables"], index=2
+)
+
+include_html = st.sidebar.checkbox("Include HTML")
+df = get_countries(html=include_html)
+
+it_args = {}
+if select:
+    it_args["select"] = True
+    it_args["selected_rows"] = [0, 1, 2, 100, 207]
+if classes != get_expanded_classes(it_opt.classes):
+    it_args["classes"] = classes
+if style != it_opt.style:
+    it_args["style"] = style
+
+if buttons:
+    it_args["buttons"] = buttons
+
+
+if caption:
+    it_args = {"caption": caption, **it_args}
+
+if render_with == "st.dataframe":
+
+    def render_table(df, key: str, **not_used):  # type: ignore
+        return st.dataframe(df, key=key)
+
+    snippet = """st.dataframe(df)
+"""
+
+elif render_with == "streamlit-aggrid":
+
+    def render_table(df, key: str, **not_used):  # type: ignore
+        return AgGrid(df, key=key)
+
+    snippet = """from st_aggrid import AgGrid
+
+AgGrid(df, key=None)
+"""
+else:
+    formatted_args = ["df"] + [
+        f"{key}='{value}'" if isinstance(value, str) else f"{key}={value}"
+        for key, value in it_args.items()
+    ]
+    formatted_args = ",\n                  ".join(formatted_args)
+
+    def render_table(df, key, **it_args):
+        return interactive_table(df, key=key, **it_args)
+
+    snippet = f"""from itables.streamlit import interactive_table
+
+interactive_table({formatted_args})
+"""
+
+st.markdown(
+    f"""```python
+{snippet}
+```
+"""
+)
+
+t = render_table(df, "my_table", **it_args)
+
+st.header("Table state")
+st.markdown(
+    """The value returned by `interactive_table` is
+a dict that contains the index of the selected rows:"""
+)
+st.write(t)
+
+st.header("More sample dataframes")
+test_dfs = get_dict_of_test_dfs()
+tabs = st.tabs(cast(Sequence[str], test_dfs.keys()))
+
+for (name, df), tab in zip(test_dfs.items(), tabs):
+    with tab:
+        try:
+            interactive_table(df, key=name, classes=classes, style=style)
+        except (
+            # ITables
+            NotImplementedError,
+            # st.dataframe
+            ValueError,
+            # streamlit-aggrid
+            pyarrow.lib.ArrowInvalid,  # type: ignore
+            MarshallComponentException,
+        ) as e:
+            st.warning(e)

apps/streamlit/requirements.txt

@@ -1,34 +1,59 @@
 format: jb-book
 root: quick_start
 parts:
-  - caption: ITables in Notebooks
+  - caption: Using ITables
     chapters:
-    - file: advanced_parameters
-    - file: select
-    - file: extensions
-    - file: custom_extensions
-    - file: custom_css
+      - file: apps/notebook
+      - file: apps/html
+      - file: apps/widget
+      - file: apps/dash
+      - file: apps/streamlit
+      - file: apps/shiny
+      - file: apps/quarto
+  - caption: Options
+    chapters:
+      - file: options/options
+      - file: options/classes
+      - file: options/style
+      - file: options/caption
+      - file: options/layout
+      - file: options/column_defs
+      - file: options/search
+      - file: options/length_menu
+      - file: options/paging
+      - file: options/scroll_y
+      - file: options/scroll_x
+      - file: options/footer
+      - file: options/column_filters
+      - file: options/order
+      - file: options/state_save
+      - file: options/select
+      - file: options/buttons
+      - file: options/colvis
+      - file: options/search_panes
+      - file: options/search_builder
+      - file: options/fixed_columns
+      - file: options/row_group
+      - file: options/keys
+      - file: options/allow_html
+      - file: options/show_index
+  - caption: More about ITables
+    chapters:
+    - file: downsampling
     - file: formatting
-    - file: pandas_style
     - file: dark_mode
-    - file: quarto
-    - file: downsampling
+    - file: css
+    - file: custom_extensions
     - file: references
     - file: supported_editors
-  - caption: ITables in Applications
-    chapters:
-      - file: widget
-      - file: streamlit
-      - file: shiny
-      - file: dash
-      - file: html_export
   - caption: Contributing to ITables
     chapters:
       - file: contributing
       - file: developing
       - file: troubleshooting
       - file: changelog
-  - caption: Example DataFrames
+  - caption: Examples
     chapters:
-    - file: sample_dataframes
+    - file: pandas_dataframes
+    - file: pandas_style
     - file: polars_dataframes