HTML export

To get the HTML representation of a Pandas DataFrame df as an interactive DataTable, you can use to_html_datatable as below:

from IPython.display import HTML, display

import itables

df = itables.sample_dfs.get_countries(html=False)
html = itables.to_html_datatable(df.head(3), display_logo_when_loading=False)

You can then save the html variable to a text file (note: if you’re writing an HTML application, you could consider using Shiny or Streamlit instead), or print it:

print(html)

<!--| quarto-html-table-processing: none -->
<table id="itables_1a5d8b65_50d6_4a5f_bed3_44bb8a21f97c"><tbody><tr>
    <td style="vertical-align:middle; text-align:left">
    
    Loading ITables v2.4.0rc1 from the internet...
    (need <a href=https://mwouts.github.io/itables/troubleshooting.html>help</a>?)</td>
    </tr></tbody></table>
<link href="https://www.unpkg.com/dt_for_itables@2.3.0/dt_bundle.css" rel="stylesheet">
<script type="module">
    import { ITable, jQuery as $ } from 'https://www.unpkg.com/dt_for_itables@2.3.0/dt_bundle.js';

    document.querySelectorAll("#itables_1a5d8b65_50d6_4a5f_bed3_44bb8a21f97c:not(.dataTable)").forEach(table => {
        if (!(table instanceof HTMLTableElement))
            return;

        let dt_args = {"layout": {"topStart": null, "topEnd": null, "bottomStart": null, "bottomEnd": null}, "text_in_header_can_be_selected": true, "style": {"table-layout": "auto", "width": "auto", "margin": "auto", "caption-side": "bottom"}, "classes": ["display", "nowrap"], "order": [], "table_html": "<table><thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>region</th>\n      <th>country</th>\n      <th>capital</th>\n      <th>longitude</th>\n      <th>latitude</th>\n    </tr>\n    <tr>\n      <th>code</th>\n      <th></th>\n      <th></th>\n      <th></th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead></table>", "data_json": "[[\"AW\", \"Latin America &amp; Caribbean\", \"Aruba\", \"Oranjestad\", -70.0167, 12.5167], [\"AF\", \"South Asia\", \"Afghanistan\", \"Kabul\", 69.1761, 34.5228], [\"AO\", \"Sub-Saharan Africa\", \"Angola\", \"Luanda\", 13.242, -8.81155]]"};
        new ITable(table, dt_args);
    });
</script>

or display it, like show does:

display(HTML(html))

Loading ITables v2.4.0rc1 from the internet... (need help?)

The connected argument

The to_html_datatable function has a connected argument which defaults to what you set in init_notebook_mode (it’s True if you didn’t call it).

• With connected=True you get an autonomous HTML fragment that loads dt_for_itables from the Internet

• With connected=False, the HTML snippet works only after you add the output of generate_init_offline_itables_html() to your HTML document