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. 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.
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.