opengridv0.3.0

CASOON Open Source

One query model. The same answer in the tab, on the server and in PostgreSQL.

opengrid is a portable Rust data and query engine. On top of it sit an accessible data grid, table and pivot, delivered as Web Components. The product is the engine, not a JavaScript grid.

npm install @casoon/opengrid
pnpm add @casoon/opengrid
MIT OR Apache-2.0on npmnot on crates.io yet
cases/s3-nulls-last-ascending.jsonConformance case
{
  "id": "s3-nulls-last-ascending",
  "rule": "S3",
  "query": {
    "source": "orders",
    "select": ["id", "note"],
    "filter": {
      "field": "id",
      "op": "in",
      "value": [1, 2, 8]
    },
    "sort": [
      {
        "field": "note",
        "direction": "asc"
      }
    ]
  },
  "expected": {
    "columns": ["id", "note"],
    "rows": [
      [2, ""],
      [8, "ä"],
      [1, null]
    ]
  },
  "ordered": true
}
query conformance cases, one JSON file each
53
pivot conformance cases
5
Playwright end-to-end spec files
48
of them run axe-core over the result
33

What it does

  1. One query model

    A JSON AST, never SQL from a browser. The conformance cases pin its semantics — NULL ordering, binary collation, exact decimals, NaN, microseconds — and the same case files run against the native engine, the WASM build in headless Chrome, the hybrid path and PostgreSQL.

  2. Three ways to run a query

    In the tab (WebAssembly over Apache Arrow), on a server (PostgreSQL, one compiled statement), or split between the two. The planner decides from what the source declares it can do.

  3. Accessibility as the design

    A native table where that suffices and role="grid" where interaction needs one. Every feature is keyboard-operable and every state change goes through one polite live region. A screen-reader run of the finished V1 is still open.

  4. A pivot that is an engine

    A pivot is a set of grouping sets plus a reshaping, so it works over any source — and PostgreSQL folds it into a single GROUPING SETS statement.

Quickstart

One package holds the elements and the engine that answers queries in the tab. The documentation has the full walkthrough, with bundlers and the React, Vue and Svelte adapters.

  1. npm install @casoon/opengrid, and serve its loader.js, worker.js, pkg/ and engine/ next to the page as opengrid/.
  2. Put an <opengrid-table>, <opengrid-grid> or <opengrid-pivot> on the page.
  3. Load the engine, register a source, and attach it to the element with set_provider.
Read the documentation
index.htmlHTML
<opengrid-table label="Orders" datasource="orders"
                columns="id,customer,country,amount"></opengrid-table>

<script type="module">
  import { loadOpengrid, createLocalProvider } from "./opengrid/loader.js";
  import init, { Engine } from "./opengrid/engine/opengrid_wasm.js";

  await init();
  const engine = new Engine();
  const schema = await (await fetch("./orders.schema.json")).text();
  const csv = await (await fetch("./orders.csv")).arrayBuffer();
  engine.load_csv("orders", new Uint8Array(csv), schema);

  const loader = await loadOpengrid();
  loader.module.set_provider(
    document.querySelector("opengrid-table"),
    createLocalProvider(engine),
  );
</script>