Created
May 16, 2026 19:54
-
-
Save aszenz/a9ccf0a5d467e09f863e561f44a6b32c to your computer and use it in GitHub Desktop.
Quak datatable standalone html demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Quak Standalone JS Demo</title> | |
| </head> | |
| <body> | |
| <h1><a href="https://github.com/manzt/quak">Quak</a> Standalone JS Demo</h1> | |
| <p>With Libs loaded from cdn</p> | |
| <table id="table"><th>Loading quak table...</th></table> | |
| <script type="module"> | |
| import * as quak from "https://esm.sh/jsr/@manzt/quak@0.3.5"; | |
| import * as mc from "https://esm.sh/@uwdata/mosaic-core@0.26.0"; | |
| import * as msql from "https://esm.sh/@uwdata/mosaic-sql@0.26.0"; | |
| const $table = document.querySelector("#table"); | |
| const coordinator = new mc.Coordinator(); | |
| const connector = mc.wasmConnector(); | |
| coordinator.databaseConnector(connector); | |
| const db = await connector.getDuckDB(); | |
| const tablename = "demo"; | |
| await db.registerFileText( | |
| "test.csv", | |
| "car,year,rating\nhonda,2012,2.5\ntoyata,2013,5", | |
| ); | |
| const exec = await msql.loadCSV(tablename, "test.csv", { | |
| replace: true, | |
| }); | |
| await coordinator.exec([exec]); | |
| const dt = await quak.datatable(tablename, { | |
| coordinator, | |
| height: 500, | |
| }); | |
| console.log({ quak }); | |
| $table.replaceChildren(); | |
| $table.appendChild(dt.node()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment