A million rows in DuckDB, no server

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height:560px"></div>

<script type="module">
  // Lattice ships no engine. The page starts DuckDB-Wasm itself and hands the
  // adapter a live connection; the grid imports none of it, so the bundle is the
  // same size whether this is used or not.
  import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.29.0/+esm';
  const bundle = await duckdb.selectBundle(duckdb.getJsDelivrBundles());
  const worker = await duckdb.createWorker(bundle.mainWorker);
  const db = new duckdb.AsyncDuckDB(new duckdb.ConsoleLogger(duckdb.LogLevel.ERROR), worker);
  await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
  const connection = await db.connect();

  // from is any SQL table expression. read_parquet over an HTTP URL streams the
  // file; a host that honours range requests lets DuckDB read only the bytes a
  // query touches rather than the whole 7.4 MB.
  const adapter = LatticeGrid.duckdbAdapter({
    connection,
    from: "read_parquet('/demo-data/readings.parquet')",
  });
  const source = LatticeGrid.createPushdownSource({
    adapter,
    compute: LatticeGrid,   // the grid finishes anything SQL could not express
    pageSize: 200,
  });

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'reading_id',
    toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { field: 'reading_id', title: '#', type: 'number' },
      { field: 'plant', title: 'Plant', filter: { type: 'set' } },
      { field: 'line', title: 'Line', filter: { type: 'set' } },
      { field: 'product', title: 'Product' },
      { field: 'bore_mm', title: 'Bore', type: 'millimetres',
        spec: { lower: 9.95, upper: 10.05, target: 10 } },
      { field: 'cycle_seconds', title: 'Cycle', type: 'seconds' },
      { field: 'in_spec', title: 'In spec', type: 'boolean' },
    ],
    source,   // one million rows; DuckDB answers each filter and sort in SQL
  });

  // adapter.sqlFor(query) returns the exact { sql, params } the adapter would run,
  // which is how the demo shows the statement without executing it twice.
</script>