Comments (52)
Done
from itables.
Sounds good to me!
I've just been reading about Import maps which would be the business for this I think. Chrome based browsers only for now though (is that an issue on Jupyter Notebooks - can they run Firefox?)
from itables.
@fwouts and @AllanJard thank you again for your lovely help here... Thanks to the more uniform loading of the JS libraries (and a much shorter template file), I've been able to proceed with other little developments like the column filters (#81), and now I am even seeing some partial success with datatables plugins (#83)!
from itables.
Hi @BBassi , yes that is something that I would like to see supported in the future. Do you think you you could help us with this, I mean, do you think you could author a PR in that direction? Thanks
from itables.
@mwouts We do not have the bandwidth to do this internally BUT am happy to pay someone do it
from itables.
@mwouts We do not have the bandwidth to do this internally BUT am happy to pay someone do it
Oh that is very kind of you ! Let me invite @AllanJard in this issue. Allan is the founder of SpryMedia, and the author of the (Javascript) datatables library.
Allan, would you like to be working on this question of allowing the offline use of datatables in the context of Jupyter Notebooks ? If so, would you like to propose a quote to @BBassi ? I am happy to help with the python packaging (e.g. include the datatables files in the python package), but I don't have the know-how on how to build an offline web page.
Also, there are two other issues that we might have to address before this one, they are:
- How to address the presence or absence of requirejs - should we always use ES imports #60 or should we use an alternative to requirejs like in this PR #67
- How to activate datatables extensions (a WIP in the PR #67)
from itables.
Hi :)
You'll need to forgive me, by I've not used a Jupyter Notebook yet (still on my list to fire up sometime!), so I'm not familar with how its offline mode works. Is there a package manager that installs packages for offline use or something? Are there other Javascript libraries (e.g. Bootstrap, jQuery, etc) that have an offline mode for Jupyter Notebooks?
from itables.
Hi @AllanJard , well sure no problem. I'll try to give a few pointers and they we'll see if there is any direction that looks easier than others.
- Until now I am loading datatables by displaying custom HTML code in a Python notebook. Displaying HTML or Javascript in a (Python) Jupyter notebook is quite easy, you just need to do e.g.
from IPython.display import HTML, Javascript
HTML("""<b>some html content</b>""")
If you're never used a notebook before maybe you might want to try this directly on https://colab.research.google.com/.
Note that in itables
, the HTML we display is created from datatables_template.html
-
One way to provide an offline mode is to inject the JS library in full in the web page, like is done by "plotly" for (one of) their offline mode. The JS library is in the package_data folder of the
plotly.py
python package, and the content of that file is injected in HTML documents (the "notebooks") by callingget_plotlyjs
. The difficulty is that notebooks become very big (because they include the JS library), and also you need to pay attention to inject the library just once, not for every table. -
I see that Altair (and probably also Plotly) can use JupyterLab extensions to render JS plots. I suppose this only works in Jupyter Lab, but the advantage is that the JS library does not need to be injected in all notebooks. @BBassi , do you need this offline mode just in Jupyter Lab, or also in notebooks exported with "nbconvert" ?
from itables.
Just Jupyterlab
from itables.
Okay, so if I understand correctly, we'd need to package DataTables in a Python library? That would get installed on the notebook and can be referenced by the python package? Is it not possible to reference npm packages?
I guess another way of wording that is what is the end user installation of this? Presumably they aren't installing a python module, but rather a package that happens to contain Python software (and whatever else is needed - e.g. Javascript)?
from itables.
Hi @AllanJard , yes the fact that @BBassi wants this in Jupyter Lab only should allow us to provide the functionality through a "Jupyter Lab extension". Maybe we can do something like this: load datatables as a dependency of the jupyter lab extension, and detect in the notebook whether datatables is already available (in Jupyter Lab), or not (in other contexts).
I see this example Jupyter Lab extension: https://github.com/jupyterlab/extension-examples/tree/master/datagrid that might be of some inspiration to us (though I have not looked into the details)
@BBassi , would you mind to contact @AllanJard - maybe through his website (https://sprymedia.co.uk/) - to make him an offer for solving this issue ? Thanks !
from itables.
@BBassi Many thanks - I've just replied back.
I'm not actually clear on what is needed from a DataTables point of view here. @mwouts Are you looking for DataTables to be wrapped up as a Jupyter Lab extension? Or is it itables that needs to be wrapped up as an extension?
from itables.
Awesome. Thank you both!
Allan, I think the next steps could be as follow:
- I document how to create a Python environment with Jupyter Lab so that you can test displaying HTML code in a notebook, and especially datatables_template.html (cf. my earlier comment)
- I do some research on what is the simplest 2022 way to create a Jupyter Lab extension. Then we create the extension, you and I. Maybe our extension will need no code - we just want it to provide
datatables
andjquery
inside Jupyter Lab, so maybe we'll just have to set the right dependencies. See e.g. this other Jupyter Lab extension that I maintain. - Then, you update datatables_template.html to detect whether
datatables
is loaded by the Jupyter Lab extension, and don't reload the library from a CDN in that case.
Does that seems alright to you?
from itables.
Sounds good to me - let me know how you get on :-)
from itables.
I plan to start working on 1. and 2. soon, maybe tonight.
For 2. I'll try to follow this tutorial.
Maybe Allan you can help me with TypeScript - what would be the syntax for importing datatables
in TypeScript ? I mean, when the tutorial says
import { ICommandPalette, MainAreaWidget } from '@jupyterlab/apputils';
what should we write to import datatables
?
from itables.
@jptio, @fcollonval, the tutorial on Jupyter Lab extensions is great, but I am struggling to add the extension to the current itables
project.
I moved parts of the setup.py
generated by the cookie cutter to my root setup.py
in this branch, but I am trying to keep the extension in the labextension
folder.
The issue that I am facing is that the build process looks for the package.json
file at the root at the project, while in fact it is in the labextension
folder:
$ python -m build
/home/marc/miniconda3/envs/itables-dev/lib/python3.10/site-packages/setuptools/command/install.py:34: SetuptoolsDeprecationWarning: setup.py install is deprecated. Use build and pip and other standards-based tools.
warnings.warn(
* Creating virtualenv isolated environment...
* Installing packages in isolated environment... (jupyter_packaging~=0.10,<2, jupyterlab~=3.1)
* Getting dependencies for sdist...
running egg_info
writing itables.egg-info/PKG-INFO
writing dependency_links to itables.egg-info/dependency_links.txt
writing requirements to itables.egg-info/requires.txt
writing top-level names to itables.egg-info/top_level.txt
reading manifest file 'itables.egg-info/SOURCES.txt'
reading manifest template 'MANIFEST.in'
warning: no files found matching 'package.json'
warning: no files found matching 'install.json'
warning: no files found matching 'ts*.json'
warning: no files found matching 'yarn.lock'
warning: no directories found matching 'itables/labextension'
warning: no directories found matching 'src'
warning: no directories found matching 'style'
no previously-included directories found matching '**/node_modules'
no previously-included directories found matching 'lib'
no previously-included directories found matching 'binder'
warning: no previously-included files matching '*~' found anywhere in distribution
warning: no previously-included files matching '*.pyc' found anywhere in distribution
warning: no previously-included files matching '*.pyo' found anywhere in distribution
warning: no previously-included files matching '.git' found anywhere in distribution
warning: no previously-included files matching '.ipynb_checkpoints' found anywhere in distribution
adding license file 'LICENSE'
writing manifest file 'itables.egg-info/SOURCES.txt'
* Building sdist...
yarn install v1.21.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.03s.
yarn run v1.21.1
error Couldn't find a package.json file in "/home/marc/GitHub/itables"
Could you please point out at what I need to change in my setup.py ?
Also, do you think creating an extension is the right thing to do to provide a npm library (here, datatables.net
) offline in Jupyter?
from itables.
Hi @AllanJard , I am trying again to build a very simple extension. For simplicity I have created another project at https://github.com/mwouts/jupyterlab-itables2 (and when it starts working I will merge it with the main itables
project). For now my objective is to do something very simple just to check that the extension works, say I'd like to display every HTML table using datatables.net.
So I wrote something like this:
https://github.com/mwouts/jupyterlab-itables2/blob/3fc5c495fc50b45be592b05de09fd2e76e49bd35/src/index.ts#L17-L26
initDataTables();
// This is not the final code - but say that we want to turn
// any HTML table into an interactive table
$(document).ready(() => {
const tables = document.getElementsByTagName('table');
for (let i = 0; i < tables.length; i++) {
const table = tables[i];
table.DataTable();
}
});
but the problem is that I cannot build the package (pip install -ve .
) because of these errors:
$ tsc
src/index.ts(17,5): error TS2348: Value of type 'Api<any>' is not callable. Did you mean to include 'new'?
src/index.ts(26,15): error TS2339: Property 'DataTable' does not exist on type 'HTMLTableElement'.
Do you see how should I change src/index.ts
above?
from itables.
I may have found a syntactically correct fix at mwouts/jupyterlab-itables2@fae71ca.
Now the question is how I can use the $
object and .datatable
extension in the datatables_template.html
file...
from itables.
I see that this extension provides the mathjax library in Jupyter Lab, it might be a good starting point
from itables.
At some point I have been able to expose jquery
and datatables.net-dt
in Jupyter Lab with this tentative extension: https://github.com/mwouts/jupyterlab-itables3
With the extension enabled I have been able to load the libraries locally in Jupyter Lab with e.g.
from IPython.display import HTML
HTML("""
<link rel="stylesheet" type="text/css" href="/static/itables-jupyterlab/datatables.net-dt/css/jquery.dataTables.min.css">
<script type="module" src="/static/itables-jupyterlab/jquery/src/jquery.js"></script>
<script type="module" src="/static/itables-jupyterlab/datatables.net-dt/js/dataTables.dataTables.js"></script>
""")
I'll have to confirm that this really works (seems to be a slight issue at the moment), and also we will have to find out how to update datatables_template.html
to import (with a real ES import if possible) the library from there if available...
from itables.
Hi _ sorry I wasn't able to reply over the weekend. That looks good to me - statically including local files. I couldn't see the Javascript initialisation in the latest repo though, although I might just be clean missing it on a Monday morning!
from itables.
Hi @AllanJard ,
Yes you're right the JS files are not included in the repo - it is only when the python package is build that they are included. I have a few questions about this by the way:
- At the moment the copyAssets.py script copies the full folder under
node_modules
for bothjquery
anddatatables.net-dt
. Would you filter their content (since we're only going to use three files) or not? - Is that OK in terms of the jQuery and DataTables license to package them in another package? Does this as any implication on the license I should choose for that new package?
Other than the above, what I need from you is a change to datatables_template.html
that will let it use these static files. Maybe you can work under the assumption that these files are located locally as in the above (again, the content of these files is the same as in a local node_modules
folder)?
I'd like the template file to work in three different settings:
- The static files are present and require is not available (Jupyter Lab with the extension)
- The static files are not present and require is not available (Jupyter Lab without the extension, VS Code, etc)
- The static files are not present and require is available (Jupyter Notebook, Jupyter Book etc)
from itables.
Would you filter their content (since we're only going to use three files) or not?
It would certainly be cleaner to do so, yes. The only thing I can think of that might be an issue is if you decide to use Bootstrap or something else in future, you'd just need to remember to copy those files across as well.
Is that OK in terms of the jQuery and DataTables license to package them in another package?
I can't speak officially for jQuery, but yes, that is absolutely fine. As long as the copyright notice at the top of the Javascript files is retained, which it will be with a straight copy, then it is within the licensing requirements (MIT for both jQuery and DataTables).
The datatables_template.html
isn't in that repo. Where is it? That said, doesn't what you have above (/static/itables-jupyterlab/jquery/src/jquery.js
) do it?
Allan
from itables.
Hi Allan, thanks for the above. Then I'll package a first version of the extension (with just the static files) tonight or tomorrow.
The datatables template file is in this repository (itables). I am afraid I will have to keep the static files in another repo as they will have to be installed at a different location (static files on the jupyter server python environment , itables on the python environment used as a kernel), but maybe for you you just need to consider that you are working on a simple html file plus static libraries.
With the static files included as above I got a few errors, like require is not defined and $ is not defined - the only way I got datatables to work in Jupyter Lab being with the ES imports until now.
from itables.
Hi @AllanJard , I've tried to take a few more steps on this project...
- A pre-release candidate of the extension is available at https://pypi.org/project/jupyterlab-itables/ (at the moment I have not filtered the modules, the package is not big anyway, and also I have moved the files from
/static/itables-jupyterlab/
to/static/itables/
to avoid references to Jupyter Lab in case we find in the future how to make an extension for VS Code and other editors) - I have updated the documentation etc on the main
itables
project to describe the future offline mode in this PR: #74 - And I also experimented a bit about what it could mean on
datatables_template.html
at dd28d58, but unfortunately my javascript is not great and I don't know how to importdatatables.net-dt
- do you think you could fix that? (and then we will need to handle the case where the static folder is not available, both for the libraries and for the css)
from itables.
Thanks! Given that the Javascript is just being run directly in the browser, and no bundler is being used, I wonder if you might be best just importing the static files in the same way as you do for the CSS files - e.g.:
<script src="/static/itables/datatables.net/js/jquery.dataTables.js"></script>
It will then work immediately, since when included by a browser it will make itself available on the global jQuery
object.
from itables.
Well, I am afraid Javascript will always remain so mysterious for me...
As suggested, I have added datatables.net
as a requirement to the Jupyter Lab extension at mwouts/jupyterlab-itables@356219e and published jupyterlab-itables 0.1.0b0
at https://pypi.org/project/jupyterlab-itables/#files (BTW I have kept datatables.net-dt
as that one provides the CSS file, but maybe that is something we should review?)
I have also updated the datatables_template.html
file as suggested to import the jQuery
and datatables.net
libraries like this: 4d8eb7c
In some cases that works (restart kernel and run all cells?)
but in some others (Ctrl+R on a saved notebook?) it does not:
The problem is with the jQuery global variable:
Here is the HTML for the reloaded notebook - it still seems to have the jQuery script:
@AllanJard , do you see how to address this?
Last but not least I'd like the datatables_template.html
file to work in absence of the static files, do you know if we can specify a fallback src
for scripts and CSS directly in an HTML file?
from itables.
Part of the problem might be that the jquery
and datatables.net
libraries are injected in the middle of the HTML document rather than in the header... that might be an argument in favor of using local ES module imports - but for this I need help from an ESM expert!
Otherwise I am also aware of the addScript
approach that dynamically adds a script to the document header, but I am wondering if that is a recommendable approach...
from itables.
I've spent long hours trying to make the addScript
approach work (i.e. inject the script in the document header), I have had some success for loading the static files, but I find it too hard to cover the other cases (no static files, or require.js is present), and also I really think that there is way to much code just for loading the libraries (see this commit 7b1aa5e).
I would by much prefer to use local imports - @AllanJard , is it possible to use import
on a recent release of datatables.net
(see also DataTables/DataTablesSrc#199) ?
from itables.
Hi - sorry this is taking so much of your time!
is it possible to use import on a recent release of datatables.net
Unfortunately no - the esm file isn't included in the package. I'll get that in for the 1.12 release which is up coming. Since you have static files, you could just grap the content from here though. That might be a good option to get a PoC while I get the 1.12 release ready. I should note that I don't currently have esm plans for the extensions for DataTables though. As noted in the issue you linked, the dependency loading when using esm in the browser is not clear. So this approach would be limited until we can solve that.
I'm afraid I have no idea about the jQuery load issue. What you've done is what I would expect to work in a browser, so I suspect there is perhaps something specific about the Jupyter Notebook (perhaps the framework?) that is causing that issue. Is there a Jupyter support forum / channel?
from itables.
Thank you @AllanJard. Oh that's great news that you already have an ES module at https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.mjs ! Sure no problem I can add the file to the static files (done at mwouts/jupyterlab-itables@36ec441).
I'll give a try to the import approach, I think it has the potential to make the table template short and self contained. Hopefully your ES module will work even when requirejs
is available (unlike the one I previously got from https://esm.sh/[email protected] ) - I'll report later in the day.
No worries if we cannot get the extensions immediately, I much prefer to have a simple and clear template !
from itables.
Well, we're not done yet...
At https://datatables.net/manual/installation#NPM the instructions to import datatables are
var $ = require( 'jquery' );
var dt = require( 'datatables.net' )();
but in Jupyter Lab I don't have require
.
So I tried this:
const { default: $ } = await import(jQuery_url);
const { default: initDataTables } = await import(datatables_url);
but then $
and initDataTables
are undefined...
@AllanJard would you have an example for importing datatables.net
from an URL?
BTW I noticed that
import 'https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.mjs'
or similar causes the following error:
Loading module from “https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.mjs” was blocked because of a disallowed MIME type (“”).
Maybe a MIME type for .mjs files should be set on the CDN?
from itables.
@AllanJard , do you have a minimal example that shows how to import the jquery.dataTables.min.mjs
file? Please let me know when that is the case. Thanks!
from itables.
Oof - sorry about loosing track of this one. Try this:
import 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs'
(I've added the mime type handler for it now).
from itables.
Thank you @AllanJard . Actually I am afraid I also need some help on the example HTML... I've tried this minimal example:
<table id="table"><thead><tr><th>A</th></tr></thead></table>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet">
<script type="module">
import 'https://code.jquery.com/jquery-3.5.1.min.js';
import 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs';
$(document).ready(function () {
$('#table').DataTable(dt_args);
});
</script>
but I get this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Module source URI is not allowed in this document: “https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs”. [datatables_template.html:3:1](file:///home/marc/GitHub/itables/itables/datatables_template.html)
Is this something that you know how to fix?
Or more importantly, what should I import exactly from jQuery
and dataTables
? Should I write something more explicit like e.g.
import {$} from 'https://code.jquery.com/jquery-3.5.1.min.js';
import {initDataTables} from 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs';
initDataTables($);
Thanks !
from itables.
This is how to do it:
import 'https://code.jquery.com/jquery-3.5.1.min.js';
import dt from 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.mjs';
dt($);
$(document).ready(function () {
$('#table').DataTable({});
});
http://live.datatables.net/yecukepe/1/edit
Live example.
It looks like the .min.js
file we have isn't actually a valid module. The compressor we are using (an older version of closure compiler) doesn't have support for JS modules - hence the need to use the jquery.dataTables.mjs
file in that example. I need to get that sorted out.
from itables.
Thanks @AllanJard ! I've tested the code snippet just above and I can confirm that it works (BTW may I suggest you had a new section on this at https://datatables.net/manual/installation ?)
Now I need to find out how to replace the fixed urls with dynamic ones (either distant or local). My naive attempt below results in an error "$ is not a function", so I guess the problem is with the jQuery import. Maybe on this point I can ask once more for @fwouts' help, he's so good at solving these kind of issues!
let jQuery_url = 'https://code.jquery.com/jquery-3.5.1.min.js';
let datatables_url = 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.mjs';
const { default: $ } = await import(jQuery_url);
const { default: dt } = await import(datatables_url);
// works
dt($);
// fails with error "$ is not a function"
$(document).ready(function () {$('#table_id').DataTable();});
from itables.
BTW may I suggest you had a new section on this at https://datatables.net/manual/installation
Thanks! As soon as I figure out how to load in the extensions and styling integration files with ES modules, then yes, it will go up there as fully supported. I've made no progress or found a way to do dependencies with ES modules in a way that would be suitable (like we discussing in the other thread). Until something for that becomes available, it would require a big long list of import statements which isn't ideal.
Recarding the error - what happens if you console.log($);
? I'm going to guess it is undefined?
from itables.
@AllanJard , yes when I do
const { default: $ } = await import(jQuery_url);
console.log($);
with jQuery_url
as above, then the result is undefined
.
If I interpolate with the current working version of itables
, I see that we have let jQuery_url = 'https://esm.sh/[email protected]';
, and this actually works!
Still I'd prefer to not use esm.sh
if not necessary, I'll have a look at https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax...
from itables.
Regarding your questions on how to load the extensions and styling with ES modules, I am afraid I can't help here, but maybe @fwouts will have a pointer for you?
The SO thread says
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
but if I replace the first line with const { $, jQuery } = await import(jQuery_url);
then again I get undefined
for $
. Probably this is because in the context of the SO question 'jquery'
refers to an ES module, while I am trying to import from a URL - anyone knows if an official ES module for jQuery is available online?
from itables.
@mwouts I think it should be:
import jQuery from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;
from itables.
I've spent some more time on this, here are a few findings:
- the jQuery team is working on a native ES version, cf. https://gist.github.com/mgol/af95c1358d4ca9f2d45db4f0c55a74a4. At the time being this seems to be available only on the main branch of https://github.com/jquery/jquery (which is in version 4.0.0-pre according to
package.json
). So I'll take this 4.0.0-pre version for our static site, and the esm.sh version when we have to go online. - The file
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.mjs
causes an error "dt is not a function" (cc @AllanJard ), so I'll take the non-minified file.
from itables.
Hi again... good news, I think we're almost ready!
I have a release candidate ready, @BBassi would you like to test it? You will need to install the development version itables_0.5.0
with
pip install git+https://github.com/mwouts/itables.git@offline_mode_always_use_import
Also you will need to install separately the static files, which is documented at https://github.com/mwouts/itables/blob/offline_mode_always_use_import/docs/quick_start.md#offline-mode (@BBassi can you tell me if it is clear enough that one needs to install the extension in the Python env used to launch Jupyter Lab?)
Then I'd like to know who I can thank in the changelog... @BBassi, @AllanJard was then any sponsoring involved in the end?
Kind regards
from itables.
That's awesome - nice one! Nope - no sponsoring in the end.
from itables.
Thanks Allan! Indeed getting rid of the switch between require
and import
is a great milestone, and so is the option to use the static files. @BBassi let me know if it works for you, and also if you are still considering sponsorship for this issue.
from itables.
@AllanJard, we are currently studying yet another option with @fwouts at #77 - we are considering to just inject the JS code in the notebook (=HTML file). I prefer this approach as the user will not need to install another Python package (but we still have to fix some issues probably related to the constraint that our scripts are injected in the HTML body, not head...)
When doing the above, we noticed that we can load jQuery
(which does not have an ES version in production yet) with just
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
but we can't do that for datatables.net
when require.js
is present.
That seems to be the only reason why we want to import datatables using an ES import (the ES import is robust to the presence of require).
Is that something that you would be willing to fix? A MRE is this HTML file (it works when you delete the require.js script)
<!DOCTYPE html>
<html>
<head>
<title>DataTables</title>
</head>
<body>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$('#table').DataTable({});
});
</script>
<div class="container">
<table id="table" class="display nowrap" width="100%">
<thead>
<atr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
from itables.
I'm not sure that is going to be a "proper" change in DataTables. jQuery is somewhat unique in the AMD world in that is exports itself as a named module, and it looks like in an AMD environment it will also register to the browser's global scope. That rather goes against the modularisation that AMD tries to achieve.
This is what DataTables does if we detect that require.js is present (as an AMD loader):
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery'], function ( $ ) {
return factory( $, window, document );
} );
}
Whereas with jQuery, if you look at their loader they only make a distinction between CommonJS and everything else, with an AMD / Require.js loader being added later on in their code:
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}
When Require.js is present, I've assumed that DataTables will be used only via Require.js. I could change that, but I'm not convinced that it would be the correct decision to make.
from itables.
If a remote URL is acceptable (perhaps at build stage) perhaps something like: ?
requirejs.config({
paths: {
'datatables.net': 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables',
jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min',
}
});
require(
['jquery', 'datatables.net'],
function ($) {
$('#table').DataTable({});
}
)
from itables.
Hi @AllanJard , thank you for the detailed answer !
When Require.js is present, I've assumed that DataTables will be used only via Require.js. I could change that, but I'm not convinced that it would be the correct decision to make.
Yes that is exactly the problem that I am facing. In some environments the notebook will have require.js, in some others it won't, and I have no choice on that (and I cannot generate the notebook accordingly - I need that the same notebook works in both cases).
Thanks also for the suggestion to use requirejs.config
. That's actually what we do in the current version (0.4.7). In the two PRs that are attached to this issue (#76 and #77 ) we are able to remove the fallback on that config file, and I do like this! This comes at the expense of using the module version of datatables.net (which is great!) but also this means, as you stated previously, that we won't be able to use extensions very soon.
Maybe what we can do is to document this issue on datatables' issue tracker and when you find the proper approach (sorry again for not being able to help you with this) I'll get a notification and will reconsider using the non-ES script ?
from itables.
Very good, thanks Allan! Done at DataTables/DataTablesSrc#213.
I've just been reading about Import maps which would be the business for this I think. Chrome based browsers only for now though (is that an issue on Jupyter Notebooks - can they run Firefox?)
Oh I'm afraid that's still a long way to extensions then... Jupyter Notebooks are supposed to work in all browsers, and sometime in very exotic browsers like VS Code or PyCharm, so we might not be able to use import maps in all these environments for a while... That's a strong argument for going back to plain JS scripts when the require.js issue is solved, isn't it? 😄
from itables.
Its probably a strong argument to use a pre-processing bundler to generate a single <script> file that you load in.
from itables.
Its probably a strong argument to use a pre-processing bundler to generate a single <script> file that you load in.
This is not something that I am familiar with, but apparently my brother is, so maybe indeed we will see that at a later stage. But I guess this is for the vanilla JS version of datatables.net, so maybe we will have to fix DataTables/DataTablesSrc#213 first?
Regarding this issue I am super happy to let you know that we have integrated #77 and that itables=1.0.0
is available. Now by default the jQuery and datatables.net libraries will be injected in the notebook so an internet connection will not be required (in the end there is no need to use the jupyterlab-itables
extension). Let me thank again @AllanJard and @fwouts for their precious contributions here!
from itables.
Related Issues (20)
- Implement a Dash component for ITables/DataTables HOT 3
- Transition ITables to the `src` layout HOT 6
- Order in Pandas Style HOT 6
- Support for Selecting rows? HOT 4
- download table using buttons feature errors out HOT 12
- UnicodeDecodeError in JupyterLab Desktop HOT 3
- Annoying pop-pup window from datatables.net for tables with multi-index and style HOT 4
- Some text is not visible in Jupyterlab dark theme HOT 13
- Modernize paging buttons style HOT 1
- Export buttons with formatted data frame HOT 2
- The background color for tables in the dark mode is not correct in Jupyter Book
- Log messages appearing twice with Python Logging after itable import HOT 3
- Implement a Jupyter Widget for ITables HOT 5
- Issue on page /custom_extensions.html
- Custom search builder - Boolean filter not working
- Download CSV and Excel HOT 2
- Tables in a Streamlit app have a fixed height that does not work well with lengthMenu or search extensions
- Deploy a sample Shiny app that uses ITables HOT 1
- New landing page for conda forge `itables` HOT 4
- Support for the cell range copy to excel HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from itables.