Add javascript code in notebook

[Nexion22]

Hello,

I want to use Mercury to display a data table. I would like to be able to click on the headers to sort the data. I found a jQuery plugin called "tablesorter", but nothing seems to work. I also found a script called "sorttable" that doesn't use jQuery, but it doesn't work either. Is it possible to add Javascript to enhance behaviors on Mercury?

[pplonski]

I would love to add table widget to Mercury. Can you please describe more your use case? How large is your data (cols, rows)? What data type do you have?

Have you tried https://github.com/mwouts/itables

[Nexion22]

Wow, I didn't know about itables. Thanks, this fits my needs perfectly.
My question was also more general, as I'm trying to understand how Mercury works so that I can use JavaScript to enhance functionality where necessary.
Is it possible to use jQuery? Is it possible to add any JavaScript library? It seems not, or perhaps I am not approaching it the right way.

[pplonski]

It should be possible to add some js/html to notebook displayed in Mercury. How did you try?

[Nexion22]

This example works in my notebook but not on Mercury

from IPython.display import display, HTML

display(HTML('''
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}
</style>

<table class="sortable">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
            <td>Bob</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Albert</td>
            <td>35</td>
        </tr>
    </tbody>
</table>
'''))

This example does not work in a notebook and not on Mercury but works on a simple HTML page

from IPython.display import display, HTML

display(HTML('''
<table id="myTable">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
            <td>Bob</td>
            <td>27</td>
        </tr>
        <tr>
            <td>Albert</td>
            <td>35</td>
        </tr>
    </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myTable").tablesorter();
    });
</script>
'''))

Perhaps this is not the right way to proceed?
Thanks for your help