Should we use iframes to display tables in a notebook?

[mwouts]

I'd like to study the option to display datatables in a notebook using simple iframes as suggested in this comment:

from IPython.display import display, IFrame

IFrame(src="iframe.html", width="100%", height="")

where the content of iframe.html is:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>$(document).ready(function () {
    $('#example').DataTable();
});</script>
<table id="example">
    <thead>
    <tr>
        <th>A</th>
        <th>B</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    </tfoot></table>

What I like in this approach is

• It works in Jupyter Notebook, Jupyter Lab, and also nbconvert
• It does not depend on requirejs which is not available in Jupyter Lab
• The initialization cell is not required any more, since the jquery and datatables libraries are loaded in the iframe

What I don't like about the approach is

• I'd much prefer to embed the iframe content in the notebook than in another file (seems feasible)
• The JS libraries are duplicated in every iframe (not a big issue as modern browsers will load them just once? What happens when we want to allow offline notebooks?)
• The "height" of the iframe must be set properly to match the height of the content and I have no clue on how to do this.

Recommendations and other thoughts are welcome (cc @fcollonval), as well as help on what is the proper value for the height of the frame!

[fcollonval]

pinging @krassowski that wrote the piece of code I referenced for using iframe with d3.js.

[mwouts]

In version 0.4.0 the code will be much cleaner, and apparently we don't need to use iframes for that. Now every HTML output will be constructed from a rather simple template.

We still use require.js when available but that is only as a workaround, as the ES import of datatables.net current fails when require.js is loaded (cf. https://datatables.net/forums/discussion/69066/esm-es6-module-support)