HTML export

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 = 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_1a81069d_ae2b_4479_86c8_c6dd7145ff65" hidden="hidden">
  <tbody>
    <tr>
      <td style="vertical-align:middle; text-align:left">
        Loading ITables v2.9.0 from the internet...
        (need <a href=https://itables.org/troubleshooting.html>help</a>?)
      </td>
    </tr>
  </tbody>
</table>
<div id="itables_1a81069d_ae2b_4479_86c8_c6dd7145ff65_fallback"><table style="border-collapse:collapse"><thead>    <tr style="text-align: right;">
      <th style="border:1px solid #ddd;padding:8px"><sup><a href=https://itables.org/fallbacks/static_preview.html title="ITables v2.9.0 static preview">ⓘ</a></sup></th>
      <th style="border:1px solid #ddd;padding:8px">region</th>
      <th style="border:1px solid #ddd;padding:8px">country</th>
      <th style="border:1px solid #ddd;padding:8px">capital</th>
      <th style="border:1px solid #ddd;padding:8px">longitude</th>
      <th style="border:1px solid #ddd;padding:8px">latitude</th>
    </tr>
    <tr>
      <th style="border:1px solid #ddd;padding:8px">code</th>
      <th style="border:1px solid #ddd;padding:8px"></th>
      <th style="border:1px solid #ddd;padding:8px"></th>
      <th style="border:1px solid #ddd;padding:8px"></th>
      <th style="border:1px solid #ddd;padding:8px"></th>
      <th style="border:1px solid #ddd;padding:8px"></th>
    </tr></thead><tbody>
<tr><td style="border:1px solid #ddd;padding:8px">AW</td><td style="border:1px solid #ddd;padding:8px">Latin America &amp; Caribbean </td><td style="border:1px solid #ddd;padding:8px">Aruba</td><td style="border:1px solid #ddd;padding:8px">Oranjestad</td><td style="border:1px solid #ddd;padding:8px">-70.0167</td><td style="border:1px solid #ddd;padding:8px">12.51670</td></tr>
<tr><td style="border:1px solid #ddd;padding:8px">AF</td><td style="border:1px solid #ddd;padding:8px">South Asia</td><td style="border:1px solid #ddd;padding:8px">Afghanistan</td><td style="border:1px solid #ddd;padding:8px">Kabul</td><td style="border:1px solid #ddd;padding:8px">69.1761</td><td style="border:1px solid #ddd;padding:8px">34.52280</td></tr>
<tr><td style="border:1px solid #ddd;padding:8px">AO</td><td style="border:1px solid #ddd;padding:8px">Sub-Saharan Africa </td><td style="border:1px solid #ddd;padding:8px">Angola</td><td style="border:1px solid #ddd;padding:8px">Luanda</td><td style="border:1px solid #ddd;padding:8px">13.2420</td><td style="border:1px solid #ddd;padding:8px">-8.81155</td></tr>
</tbody></table></div><script>document.getElementById("itables_1a81069d_ae2b_4479_86c8_c6dd7145ff65")?.removeAttribute("hidden");document.getElementById("itables_1a81069d_ae2b_4479_86c8_c6dd7145ff65_fallback")?.setAttribute("hidden", "hidden");</script>
<link href="https://www.unpkg.com/dt_for_itables@2.5.8/dt_bundle.css" rel="stylesheet">
<script type="module">
    import { ITable, jQuery as $ } from 'https://www.unpkg.com/dt_for_itables@2.5.8/dt_bundle.js';

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

        let dt_args = {
          "classes": ["display", "nowrap", "compact"],
          "columnDefs": [{"render": "function (data, type, row, meta) { return type === 'sort' || type === 'type' ? data[1] : data[0]; }", "targets": [4, 5]}],
          "data_json": "[[\"AW\", \"Latin America &amp; Caribbean \", \"Aruba\", \"Oranjestad\", [\"-70.0167\", -70.0167], [\"12.51670\", 12.5167]], [\"AF\", \"South Asia\", \"Afghanistan\", \"Kabul\", [\"69.1761\", 69.1761], [\"34.52280\", 34.5228]], [\"AO\", \"Sub-Saharan Africa \", \"Angola\", \"Luanda\", [\"13.2420\", 13.242], [\"-8.81155\", -8.81155]]]",
          "keys_to_be_evaluated": [["columnDefs", 0, "render"]],
          "layout": {"bottomEnd": null, "bottomStart": null, "topEnd": null, "topStart": null},
          "order": [],
          "style": {"caption-side": "bottom", "margin": "auto", "table-layout": "auto", "width": "auto"},
          "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>",
          "text_in_header_can_be_selected": true
        };
        new ITable(table, dt_args);
    });
</script>

or display it, like show does:

display(HTML(html))

^ⓘ	region	country	capital	longitude	latitude
code
AW	Latin America & Caribbean	Aruba	Oranjestad	-70.0167	12.51670
AF	South Asia	Afghanistan	Kabul	69.1761	34.52280
AO	Sub-Saharan Africa	Angola	Luanda	13.2420	-8.81155

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