Query Builder

Pick an entity → build a query → POST as JSON to /api/<entity>/search → backend translates to SQL via QueryBuilderWalker<T> → render PagedResult<T> in a <bs-datatable>. Pagination / filtering / sorting are all server-side.

Styling — this component renders in the light DOM

It has no shadow root. Anything you render into it — row templates, node templates, cell renderers — stays in the document, so your app's stylesheet, your own component styles and Bootstrap's utility classes reach it normally.

Its own CSS is scoped at build time onto a data-mps attribute, the same device Angular uses for _ngcontent, so it cannot leak out onto your markup.

The trade-off runs the other way: page CSS now reaches this component's internals, exactly as emulated encapsulation behaves everywhere else. ::part() and ::slotted() no longer address it — use ordinary CSS selectors instead.

Basic usage

0 matches

Wire-format JSON (what the demo POSTs)

JSON wire format

The component is JSON-only by design — schema validation and translation to your storage layer (SQL, OData, Mongo, …) belong on the server, where the user-controlled tree can be safely walked. The example below is what query() serialises to when the user picks status equals shipped AND total > 100.

Custom field editor

Keymap

Tab / Shift+Tab — move focus through controls in DOM order.
Enter on Add condition / Add group / Add sub-query — insert child.
Alt+ArrowUp / Alt+ArrowDown on a focused row — reorder among same-group siblings.
Esc — close any open dropdown.