Installation

From npm

npm install @casoon/opengrid

One package, two WebAssembly modules:

In the package	Contains	Imported as
loader.js, pkg/	<opengrid-table>, <opengrid-grid>, <opengrid-pivot>; the providers and connect	@casoon/opengrid
engine/, worker.js	Engine (in-memory sources over its own typed columns) and Planner; the worker that runs the engine	@casoon/opengrid/engine/opengrid_wasm.js

A page that only talks to an opengrid-server never loads the engine. One that queries in the tab imports it, and createWorkerProvider() finds it on its own (The public API → Providers).

In React, Vue or Svelte, the components are in the same package, as subpaths — @casoon/opengrid/react, /vue and /svelte. The framework is an optional peer, so it is the page’s own dependency:

npm install @casoon/opengrid react    # React 18 or 19 — import from @casoon/opengrid/react
npm install @casoon/opengrid vue      # Vue 3.4.20 and later — @casoon/opengrid/vue
npm install @casoon/opengrid svelte   # Svelte 5 — @casoon/opengrid/svelte

What the adapters take and how they bind the view is in Frameworks.

Where the modules are found

loadOpengrid() loads the element module from pkg/ next to loader.js, and createWorkerProvider() loads worker.js and the engine from engine/ next to it — after an install, all under node_modules/@casoon/opengrid/. Wherever loader.js goes, those go with it, whole directories.

With a bundler there is nothing to do: loader.js and worker.js import the modules the way a bundler follows, so a production build (checked with Vite) puts the elements, the worker, the engine and both .wasm files into its output. Pass moduleUrl or workerUrl only to serve them from somewhere else; the options are in Frameworks → Bundlers and the WebAssembly module.

Without a bundler

A page without a bundler takes the files from node_modules and serves them as they are:

mkdir -p opengrid
cp -R node_modules/@casoon/opengrid/{loader.js,worker.js,pkg,engine} opengrid/

opengrid/
├── loader.js
├── worker.js
├── pkg/                      # the elements
└── engine/
    ├── opengrid_wasm.js      # the engine
    └── opengrid_wasm_bg.wasm

The Quickstart assumes this layout. Serve the .wasm files as application/wasm: with another type the browser cannot compile the module while it downloads, and the loader falls back to compiling after the whole download, with a warning in the console.

Content Security Policy

The elements run under a strict policy. What they need:

• script-src 'wasm-unsafe-eval' to compile the WebAssembly modules, plus the origin the files are served from ('self' when they sit next to the page). Nothing is built at run time: no 'unsafe-eval', no inline script.
• style-src needs nothing of its own. Every element styles itself with constructed stylesheets adopted into its shadow root and writes the few inline values — row positions, column widths — through the CSSOM. Neither is governed by style-src, so a policy of style-src 'self' with no 'unsafe-inline' and no nonce draws the grid whole.
• connect-src for a provider that asks a server (createRestProvider, createPivotProvider), and for createWorkerProvider the origin of worker.js under worker-src — or script-src, which it falls back to.

The page’s own styling of the element (opengrid-grid { height: … }) is the page’s: in a file or under a hash, like any other style it writes.

Adopted stylesheets are in every browser of the baseline — Chrome and Edge 73+, Firefox 101+, Safari 16.4+. There is no fallback to a <style> element.

Building from the repository

For working on opengrid itself, or for a version that is not released yet.

Requirements

• a recent stable Rust with the wasm32-unknown-unknown target (rust-toolchain.toml in the repository asks for it)
• just
• wasm-bindgen CLI 0.2.126 — the crate pins the same version, and a different CLI stops with a version error
• wasm-opt from binaryen 132
• Node 22 with pnpm, for the adapters and the end-to-end tests

Build the modules

git clone https://github.com/casoon/opengrid.git
cd opengrid
just wasm-build-components   # the elements -> packages/opengrid/pkg/
just wasm-build              # the engine   -> examples/engine-demo/pkg/

The examples and the demo on this site load the engine from examples/engine-demo/pkg/. just package builds both modules again into the element package — the engine into packages/opengrid/engine/ — and packs the package the way a release does, into target/npm-package/. The React, Vue and Svelte adapters are in packages/opengrid/react/, vue/ and svelte/, published as the package’s subpaths.

Check the build

just check         # fmt, clippy -D warnings, the whole test suite
just wasm-check    # every wasm-capable crate builds for wasm32
just e2e           # Playwright + axe-core against a real browser