opengridv0.15.0

CASOON Open Source

Grid, table and pivot on one query engine.

opengrid gives your web page three Web Components for showing and working with tabular data: a data grid, a table and a pivot. Sorting, filtering, grouping and pivots are answered by one engine: in the browser as WebAssembly, on your server against PostgreSQL, or split between the two, and the answer is the same everywhere.

npm install @casoon/opengrid
pnpm add @casoon/opengrid
MIT OR Apache-2.0npm 0.15.0React · Vue · Svelte · plain HTML
opengrid-grid in the Base look, from the live demo: a search field with + Filter, + Group, Filter row, Columns and the density switch, a filter row, and the first orders sorted by ID with order date and customer, such as 1, 12 Apr 2026, Yarrow Works.

Who it is for

elements: table, grid and pivot
3
places a query can run: tab, server, or both
3
built-in looks, from Base to Dark
5
live demo sites: JavaScript, React, Vue, Svelte, Angular
5

How it works

An element never runs a query itself. It hands the query, as JSON, to a provider you choose. The engine can answer it right in the tab, compiled to WebAssembly and running in a worker if you like, so data the page loads itself needs no server at all.

For data that belongs on a server, opengrid-server answers the same queries from PostgreSQL, SQLite or a connector of your own. In between, the planner gives the server the part it can answer and finishes the rest in the tab. A shared set of conformance cases checks that all paths agree.

Where an opengrid query runsA grid, table or pivot on your page hands its query, as JSON and never as SQL, to a provider, which answers it in one of three ways: with the engine compiled to WebAssembly in the tab or a worker, on an opengrid-server that reads PostgreSQL or another connector, or split between the two by the planner. Every path gives the same answer.Where an opengrid query runsBrowserYour serverGrid, table or pivot → In the tabGrid, table or pivot → HybridGrid, table or pivot → On the serverHybrid → On the server: what it can doHybrid → In the tab: the restOn the server → PostgreSQLwhat it can dothe restGrid, table or pivot – hands its query to a providerGrid, table or pivothands its query to a providerHybrid – the planner splits the queryHybridthe planner splits the queryIn the tab – WebAssembly, or a workerIn the tabWebAssembly, or a workerOn the server – opengrid-serverOn the serveropengrid-serverPostgreSQL – or another connectorPostgreSQLor another connector
Where an opengrid query runsA grid, table or pivot on your page hands its query, as JSON and never as SQL, to a provider, which answers it in one of three ways: with the engine compiled to WebAssembly in the tab or a worker, on an opengrid-server that reads PostgreSQL or another connector, or split between the two by the planner. Every path gives the same answer.Where an opengrid query runsBrowserYour serverGrid, table or pivot → In the tabGrid, table or pivot → HybridGrid, table or pivot → On the serverHybrid → On the server: what it can doHybrid → In the tab: the restOn the server → PostgreSQLwhat it can dothe restGrid, table or pivot – hands its query to a providerGrid, table or pivothands its query to a providerHybrid – the planner splits the queryHybridthe planner splits the queryIn the tab – WebAssembly, or a workerIn the tabWebAssembly, or a workerOn the server – opengrid-serverOn the serveropengrid-serverPostgreSQL – or another connectorPostgreSQLor another connector
Where an opengrid query runsA grid, table or pivot on your page hands its query, as JSON and never as SQL, to a provider, which answers it in one of three ways: with the engine compiled to WebAssembly in the tab or a worker, on an opengrid-server that reads PostgreSQL or another connector, or split between the two by the planner. Every path gives the same answer.Where an opengrid query runsBrowserYour serverGrid, table or pivot → In the tabGrid, table or pivot → HybridGrid, table or pivot → On the serverHybrid → On the server: what it can doHybrid → In the tab: the restOn the server → PostgreSQLwhat it can dothe restGrid, table or pivot – hands its query to a providerGrid, table or pivothands its query to a providerHybrid – the planner splits the queryHybridthe planner splits the queryIn the tab – WebAssembly, or a workerIn the tabWebAssembly, or a workerOn the server – opengrid-serverOn the serveropengrid-serverPostgreSQL – or another connectorPostgreSQLor another connector
Where an opengrid query runsA grid, table or pivot on your page hands its query, as JSON and never as SQL, to a provider, which answers it in one of three ways: with the engine compiled to WebAssembly in the tab or a worker, on an opengrid-server that reads PostgreSQL or another connector, or split between the two by the planner. Every path gives the same answer.Where an opengrid query runsBrowserYour serverGrid, table or pivot → In the tabGrid, table or pivot → HybridGrid, table or pivot → On the serverHybrid → On the server: what it can doHybrid → In the tab: the restOn the server → PostgreSQLwhat it can dothe restGrid, table or pivot – hands its query to a providerGrid, table or pivothands its query to a providerHybrid – the planner splits the queryHybridthe planner splits the queryIn the tab – WebAssembly, or a workerIn the tabWebAssembly, or a workerOn the server – opengrid-serverOn the serveropengrid-serverPostgreSQL – or another connectorPostgreSQLor another connector
Where queries runQuery semanticsTry the demoAll live demos →

Quickstart

Install the package, put an element on the page and connect it to a provider. The documentation walks through the engine in the tab, bundlers and the React, Vue and Svelte components.

  1. Install @casoon/opengrid with the line above.
  2. Put an <opengrid-table>, <opengrid-grid> or <opengrid-pivot> on the page.
  3. Connect it to a provider: the engine in the tab, or your server as below.
Read the documentation
index.htmlHTML
<opengrid-grid label="Orders" datasource="orders"
               columns="id,customer,amount"></opengrid-grid>
<script type="module">
  import { connect, createRestProvider } from "@casoon/opengrid";
  connect(document.querySelector("opengrid-grid"), {
    provider: createRestProvider({ url: "https://example.org", source: "orders", token: "…" }),
  });
</script>

A grid on your page in three steps.

Read the quickstart