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_06ea50c2_4678_40e8_adca_317266007ebe">
  <tbody>
    <tr>
      <td style="vertical-align:middle; text-align:left">
        Loading ITables v2.7.1 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.5.1/dt_bundle.css" rel="stylesheet">
<script type="module">
    import { ITable, jQuery as $ } from 'https://www.unpkg.com/dt_for_itables@2.5.1/dt_bundle.js';

    document.querySelectorAll("#itables_06ea50c2_4678_40e8_adca_317266007ebe: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))

Loading ITables v2.7.1 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