QueryBuilder
Builds nested, typed, serializable table filters with complete keyboard alternatives to structural editing.@gemologic/sheen-table · dataPlayground
<QueryBuilder columns={queryColumns} value={filter()} onChange={setFilter} label="Account query" disabled={false} label="Query builder"/>Variant matrix
Nested account query
Anatomy
- Package
@gemologic/sheen-table- Source
packages/table/src/QueryBuilder.tsx- Tokens
--sheen-color-bg--sheen-color-border-control--sheen-color-focus-ring
Accessibility
Role: region, group, button, listbox, checkbox, spinbutton, statusKeyboard: Tab, Shift+Tab, Enter, Space, Escape, ArrowUp, ArrowDownDo
- Control the builder and DataTable from the same accepted filter state.
- Serialize only through serializeFilter and validate URL or saved-view input with deserializeFilter.
- Offer move buttons even when a product later adds drag reordering.
Do not
- Do not dispatch remote requests from partial input drafts.
- Do not encode executable predicates or CSS in persisted query state.
- Do not flatten nested and, or, or not nodes for display.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
columns * | readonly QueryBuilderColumn[] | — | Typed query columns with user-facing labels and closed enum options. |
value * | FilterNode | — | Controlled immutable filter AST shared with DataTable, URL state, and saved views. |
onChange * | (filter: FilterNode) => void | — | Receives a validated immutable AST after each complete editor operation. |
label | string | Query builder | Accessible region label. |
disabled | boolean | false | Retains the visible query while preventing edits. |