Skip to content

Instantly share code, notes, and snippets.

@gnestor

gnestor/javascript-extension.ipynb Secret

Last active March 10, 2024 18:50
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save gnestor/f1893e0226ced227e910f11b769adc06 to your computer and use it in GitHub Desktop.
Save gnestor/f1893e0226ced227e910f11b769adc06 to your computer and use it in GitHub Desktop.
Download ZIP
Demo notebook for @jupyterlab/javascript-extension: https://github.com/jupyterlab/jupyterlab/pull/4515
Display the source blob
Display the rendered blob
Raw
javascript-extension.ipynb
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@shardator
Copy link

Hi. This is great, but how do you refer to a created DOM element? Particularly I'd like to make a simple table sortable, but JupyterLab makes this rocket science.

@gnestor
Copy link
Author

gnestor commented Mar 1, 2021

Use CSS selectors:

# cell 1
%%javascript
    element.innerHTML = '<pre id="test">hello</pre>'

# cell 2
%%javascript
    var test = document.querySelector('#test')
    test.textContent = 'hello world'

@shardator
Copy link

Thanks!

@sandorspruit
Copy link

This is a really nice demo, just what I was looking for, thanks! 👍🏻

@gnestor
Copy link
Author

gnestor commented Mar 25, 2022

@sandorspruit You're welcome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment