Live demo
Every element below runs on the WebAssembly engine in this tab, over the 50-row dataset the conformance suite is written against (crates/opengrid-conformance/data/orders.csv) — NULLs, empty strings, -0.01 and 999999999.99 included on purpose. Nothing is sent to a server. The pivot needs an opengrid-server and is not part of this page.
<opengrid-grid> — search, facets, column menu
Type a filter into the search field — country = DE and amount ≥ 10 — or plain text, then Enter. With an or — country = DE or (qty ≥ 900 and customer = Alpha) — it becomes one nested filter, a chip in words; Advanced filter builds the same in a dialog, and the chip opens it again. The facets count without their own restriction, so a ticked value never zeroes its neighbours. Alt+↓ on a header opens its column menu; the toolbar switches the filter row, the columns and the density, and every active filter is a chip. Colours come from this page's theme through the --og-* custom properties.
<opengrid-grid group-by> — groups, aggregates, total
Grouped by country, then customer — still virtualized, and a treegrid while grouped: Enter or Space opens a group, → and ← open and close it on its first cell. Amount and quantity are summed, the order date shows the range a group spans, and the grand total is the last row, reachable like any other.
Column bands — a header above several columns
Customer and country stand under the band Customer; amount, quantity and order date under Order. ↑ on a column's header goes to its band, ↓ comes back. Ctrl+← and Ctrl+→ move a column inside its band, and on the band's own cell they move the band with all its columns; Alt+Shift+← pins the whole band at the start. Each cell under a band names the band and the column as its headers.
Views are values
The grid hands out its whole view — sort, filters, columns, density, grouping, facets — as one value, and takes one back in a single query. A saved view is that value with a name on it; the tabs below are page code, not part of the element. Change something in the grid and the view below follows.
The view, as get_view answers it
Themed — the five looks of the prototype
Same element, only custom properties changed: eighteen --og-* tokens, and the grid computes the soft accent, the selected and the hover colours from them. The defaults are system colours, so an unthemed grid follows light and dark on its own; under forced colours every token gives way to the user's palette.
<opengrid-table>
Display: a plain native table with header buttons that sort one column — for answers that are read, not worked with.