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

from itables import to_html_datatable
from itables.sample_dfs import get_countries

df = get_countries(html=False)
html = 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)

<table id="itables_19e0fe5a_f80e_412f_b981_bfbd060edda4" class="display nowrap" data-quarto-disable-processing="true" style="table-layout:auto;width:auto;margin:auto;caption-side:bottom">
<thead>
    <tr style="text-align: right;">
      <th></th>
      <th>region</th>
      <th>country</th>
      <th>capital</th>
      <th>longitude</th>
      <th>latitude</th>
    </tr>
    <tr>
      <th>code</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead><tbody><tr>
<td style="vertical-align:middle; text-align:left">
<div>
Loading ITables v2.2.2 from the internet...
(need <a href=https://mwouts.github.io/itables/troubleshooting.html>help</a>?)</td>
</div>
</tr></tbody>

</table>
<link href="https://www.unpkg.com/dt_for_itables@2.0.13/dt_bundle.css" rel="stylesheet">
<script type="module">
    import {DataTable, jQuery as $} from 'https://www.unpkg.com/dt_for_itables@2.0.13/dt_bundle.js';

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

        // Define the table data
        const data = [["AW", "Latin America & 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]];

        // Define the dt_args
        let dt_args = {"layout": {"topStart": null, "topEnd": null, "bottomStart": null, "bottomEnd": null}, "order": [], "warn_on_selected_rows_not_rendered": true};
        dt_args["data"] = data;

        
        new DataTable(table, dt_args);
    });
</script>

or display it, like show does:

display(HTML(html))

	region	country	capital	longitude	latitude
code
Loading ITables v2.2.2 from the internet... (need help?)