<data-grid> is a web component written
in es6 to quickly explore large,
narrow, datasets in your browser.
<data-grid> started as a clean-room reimplementation of
PivotTable.js to explore how
Web SQL could lift its
size limitations.
Unfortunately, Web SQL was deprecated
so <data-grid> now depends on @sqlite.org/sqlite-wasm
thanks to the magic of WebAssembly.
<data-grid> consists of a single
javascript module.
The module registers several custom elements (5 to be precise) but only
<data-grid> is really useful
<!DOCTYPE html>
<head>
<script type="module" src="js/dataGrid.js"></script>
</head>
<body>
<data-grid data-name="myTable" data-db-name="myDatabase"></data-grid>
</body><data-grid> also ships as an anyywidget.
from data_grid import DataGridWidget
# assume you have a sqlite database called examples/example.db
DataGridWidget(table="fines", db="example", source="/api/contents/examples/example.db")DataGridWidget implements two-way binding with <data-grid>. You can set .col_axis
or .row_axis in a separate cell and watch the output respond asynchronously.
Testing DataGridWidget is unfortunately finicky because of
CORS restrictions.
One approach is to run jupyter lab
and Vite side-by-side and leverage Vite's
server.proxy to
route most request to jupyter. This requires editing jupyter_lab_config.py:
## Set the Access-Control-Allow-Origin header
#
# Use '*' to allow any origin to access your server.
#
# Takes precedence over allow_origin_pat.
# Default: ''
c.ServerApp.allow_origin = 'http://localhost:5173'
## Supply overrides for the tornado.web.Application that the Jupyter server uses.
# Default: {}
c.ServerApp.tornado_settings = {
'headers': {
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
}
}