-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ITables 2.0 - update datatables.net to 1.13.1 and provide support for buttons #121
Comments
My first experiment has been to modify the connected template like this: <style></style>
<div class="itables">
<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
</div>
<script type="importmap">
{
"imports": {
"datatables.net": "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs",
"jquery": "https://esm.sh/jquery@3.5.0"
}
}
</script>
<script type="module">
// Import jquery and DataTable
import DataTable from 'datatables.net';
// Define the table data
const data = [];
// Define the dt_args
let dt_args = {};
dt_args["data"] = data;
// [pre-dt-code]
new DataTable('#table_id', dt_args);
</script> The template (saved to an html file) does work, but only in very recent versions of the browsers: https://caniuse.com/import-maps Concretely that means that the latest Firefox on the latest Ubuntu is currently not supported. I am OK with that but that means that I will have to maintain the branch 1.x and 2.x for some time. Also we will have to check out what is the compatibility of import maps with VS Code, PyCharm and Colab. Later on in the day I will see how I can port the non-connected template, in which one we import from a base64 encoded version of the library. |
I have been able to port the non-connected template as well, in this commit. I have seen the new version work in
Unfortunately it seems that no other environment is adapted to the import maps (VS Code, PyCharm and Jupyter Notebook do not seem to support that, and I have no idea on how to debug the first two), so I might release the new version as a |
We have an The other option is to use a bundler such as Vite to create a single JS file that can then be loaded in. |
Hi @AllanJard , sorry if I sounded negative above, I think import maps are a great approach and I don't see any other way anyway to provide the buttons.
Yes I saw that, but again this is probably not going to support the extensions?
😄 here we're going way further than what I can actually do in JS/HTML but maybe my brother will be able to follow 😆 |
would love buttons, if this +1 is any motivation :) |
Hey @AllanJard, some time has passed since we last chatted about this, and I see that import maps now work well in my browser. I would be curious to see if I can extend the import maps example above and add support for the datatables extensions like e.g. the buttons. Do you provide a module version for the button extension on https://cdn.datatables.net, like you do for e.g. https://cdn.datatables.net/1.13.8/js/jquery.dataTables.mjs ? Looking forward to testing this! |
Yes, all of the DataTables extensions have .mjs files available for them. E.g https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.mjs Just substitute |
Oh excellent! Thank you @AllanJard |
For the records I have seen a partial success with the below - copy, csv and excel buttons work in a simple (connected) example. Now the things that I am not so sure of:
I am also interested in the bundling approach if that happens to be easier. I have seen <div class="itables">
<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
</div>
<script type="importmap">
{"imports":
{
"jquery": "https://esm.sh/jquery@3.7.0",
"jszip": "https://esm.sh/jszip@3.10.1",
"pdfmake": "https://esm.sh/pdfmake@0.2.9",
"datatables.net": "https://cdn.datatables.net/1.13.8/js/jquery.dataTables.mjs",
"datatables.net-buttons": "https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.mjs",
"datatables.net-buttons-html5": "https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.mjs"
}
}
</script>
<script type="module">
import DataTable from 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons-html5';
import jszip from 'jszip';
DataTable.Buttons.jszip( jszip );
import pdfmake from 'pdfmake';
// pdfMake.vfs = vts_fonts; // TODO - not sure where to get vts_fonts from?
DataTable.Buttons.pdfMake(pdfMake);
// Define the table data
const data = [[1],[2]];
// Define the dt_args
let dt_args = {};
dt_args["data"] = data;
dt_args["dom"] = 'Bfrtip';
dt_args["buttons"] = ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'];
// [pre-dt-code]
new DataTable('#table_id', dt_args);
</script> |
They need to match the npm package name. There is an import map for all DataTables libraries here. That is an old version now - I need to update my build process to include automatic generation of the map. But it might be a useful starting point for you.
You'd need to flag that up with the pdfmake folks.
Yes, it should be a lot more reliable. I've seen very very few people use importmaps. Bundles or a direct browser import are massively more common. |
I can tell that! @fwouts do you think you could help me transform this attempt of bundling DataTables and a few of its extensions from a node project into something that actually works (if that makes any sense?): https://github.com/mwouts/dynamic_import_of_bundled_datatables_extensions |
There are a bunch of limitations with importmaps in the browser which I've written about here. I think that is what is really hindering their adoption on the client-side. There are some PHP frameworks which are embracing them and it seems to work well, but in the browser, until the specs are sorted, I'm not sure I can fully recommend them. |
Yes agreed! Looking forward to reading your post! Now I will be giving a try to the alternative, i.e. bundling. The project linked to in my previous comment is about bundling, but as this is completely new to me I will probably need some support there (first problem is that I have not yet found out how to bundle the dependencies...) |
Rollup, Vite, ESBuild, there are a lot of options, but I'm afraid general bundling is outside the scope of DataTables. |
ITables 2.0 is available! We have packaged DataTables and its extensions using |
Congratulations on the release! |
@AllanJard has released a new version of
datatables.net==1.13.1
that provides support for the datables plugins in the ESM format.I will report here on the progress on transitioning
itables
to that new release ofdatatables.net
.The text was updated successfully, but these errors were encountered: