WIP - Map large Python integers to JS big ints

[mwouts]

Will close #172

[mwouts]

At this stage I get the following HTML:

from itables import to_html_datatable
import pandas as pd

print(to_html_datatable(pd.DataFrame({'i':[-9007199254740992]})))

<style>.itables table td {
    text-overflow: ellipsis;
    overflow: hidden;
}

.itables table th {
    text-overflow: ellipsis;
    overflow: hidden;
}

.itables thead input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

.itables tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}
</style>
<div class="itables">
<table id="45ce650e-dc70-4db3-a721-9f86940e4e41" class="display nowrap"style="table-layout:auto;width:auto;margin:auto;caption-side:bottom"><thead>
    <tr style="text-align: right;">
      
      <th>i</th>
    </tr>
  </thead><tbody><tr><td>Loading... (need <a href=[https://mwouts.github.io/itables/troubleshooting.html>help</a>?)</td></tr></tbody></table](https://mwouts.github.io/itables/troubleshooting.html%3Ehelp%3C/a%3E?)%3C/td%3E%3C/tr%3E%3C/tbody%3E%3C/table)>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.6.0.min.js';
    import dt from 'https://cdn.datatables.net/1.13.3/js/jquery.dataTables.mjs';
    dt($);

    // Define the table data
    const data = [[BigInt("-9007199254740992")]];

    // Define the dt_args
    let dt_args = {"order": [], "dom": "t"};
    dt_args["data"] = data;

    $(document).ready(function () {
        
        $('#45ce650e-dc70-4db3-a721-9f86940e4e41').DataTable(dt_args);
    });
</script>
</div>

The HTML file shows this error:

Uncaught TypeError: The specifier “jquery” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

@allanjar, @fwouts , this error seems to come from the update from DataTables 1.12.1 to 1.13.3. I have no idea how to address it but hopefully it you might have one or two hints?

[fwouts]

The error with DataTables is probably because the new version has the following statement:

import jQuery from 'jquery';

The browser needs to know what "jquery" means here, which I believe can be done with import maps (I've never used them myself).

It would look like:

<script type="importmap">
{
  "imports": {
    "jquery": "https://code.jquery.com/jquery-3.6.0.min.js",
  }
}
</script>

This may also allow you to clean up your current code:

<script type="module">
    // BEFORE
    // import 'https://code.jquery.com/jquery-3.6.0.min.js';

    // AFTER
    import 'jquery';
    
    ...
</script>

Let me know if this works!

[mwouts]

Thanks François! Oh I see! That reminds me of a previous attempt to use datatables==1.13.1 for https://github.com/mwouts/itables/issues/121, see also this branch: https://github.com/mwouts/itables/compare/main...datatables_1.13.1

At the moment this is a bit too challenging for me, I might try this again when I have a little more time. The points that I find hard to address are 1.I am not sure jQuery has an official ES module yet 2. Import Maps are a very recent feature and I might have to maintain two versions because not every user will have a compatible browser 3. Also the current conversion of big Python ints to JS BigInts currently involves re.sub which is a bit hacky - it might be better to see with the maintainers of the Python json module if they see a better approach for this.

So, coming back to this big integers I think I'll work on a simpler fix, i.e. convert the whole column to strings when I detect that some of the integers are larger than the permitted JS value (i.e. follow Allan's wise initial recommendation :smile: )

[mwouts]

Moved to #235