qnot vs DevExtreme FilterBuilder
devextreme 26.1 · Commercial
Feature by feature.
| feature | qnot | DevExtreme FilterBuilder |
|---|---|---|
| License | MIT (qnot ahead) | Commercial, per developer |
| Frameworks | React, Vue, Svelte, Solid, plain DOM | jQuery, Angular, React, Vue; ASP.NET wrappers |
| Part of a suite | No, one library | Yes: DataGrid, PivotGrid, charts, schedulers, forms (DevExtreme FilterBuilder ahead) |
| Value editing | Inline editors for every value | Values shown as text; an editor opens on click |
| Output | Plain JSON, typed by the schema | DevExtreme filter expression (nested arrays) |
| Export formats | SQL (5 dialects, bound params), MongoDB, JsonLogic, Elasticsearch, SpEL, text (qnot ahead) | None built in; the expression feeds DevExtreme data sources |
| Grid integration | Through your data layer | Native with DataGrid and PivotGrid (DevExtreme FilterBuilder ahead) |
| Group operations | AND, OR, NOT | And, Or, Not And, Not Or |
| Custom operations | defineOperator() with evaluation and per-format output | customOperations |
| Undo, drag and drop | Built in (qnot ahead) | Not built in |
| JS, gzipped | 25.7 KB (qnot ahead) | 283.8 KB |
| Add a rule, 1,000 rules | 0.7 ms | 4.7 ms |
Measured at 1,000 rules.
Run of 2026-10-19: Apple M5, Chromium 156 via Playwright 1.64, production builds, no CPU throttling. Medians of fresh pages (5 to 9 per size); the tree is 10 fields in groups of 10 rules. JS is gzipped and excludes React for React libraries (jQuery is included). Lower is better. DevExtreme FilterBuilder takes 1.2× as long to render. The harness, its method and every size.
When DevExtreme FilterBuilder is the better choice.
- Your app is built around DevExtreme's DataGrid or PivotGrid. FilterBuilder's value is the grid's own filter expression, so it plugs straight in.
- You already license DevExtreme and want one theme and one vendor across grids, charts, schedulers and forms.
- You build with Angular or ASP.NET. DevExtreme supports both; qnot has no binding for them.
- You want a compact, click-to-edit filter. Values shown as text take less room than a row of inputs, which suits dense admin screens.
Switching.
'!' negation and anyof / noneof.Fields become a schema: dataType: 'string' is f.text(), or f.enum() with a lookup; 'number', 'boolean' and 'date' map to f.number(), f.boolean(), f.date().
Then mount a framework-free, React or Vue builder on the result.
Questions people ask
- Is DevExtreme free?
- No. DevExtreme is a commercial suite from DevExpress, licensed per developer; see DevExpress licensing for the current terms. qnot is MIT licensed.
- Why does DevExtreme have no keystroke number?
- Its FilterBuilder shows values as text and opens an editor when you click one, so there is no inline input to type into. That is a design choice, and it is also why it renders large trees with few DOM nodes.
- Can qnot filter a DevExtreme DataGrid?
- Not directly: qnot's output is its own JSON, not a DevExtreme filter expression. Filter on your server instead (encode the query to SQL or a MongoDB filter and load the grid's data source from the result), or write the reverse of the converter above. If the grid is the center of your app, FilterBuilder's native expressions are the shorter path.
- How do I convert saved filter expressions?
- The function above walks DevExtreme's nested array format ([field, operation, value], joined by 'and' / 'or', negated with '!') and builds a qnot query. Run validateQuery on the result to catch operations that didn't map.
Other comparisons
- qnot vs react-querybuilderMIT
The most used React query builder. Huge ecosystem, React Native, many export formats.
- qnot vs react-awesome-query-builderMIT
The feature-rich React option: functions, list groups, many widgets. qnot matches it feature for feature.
- qnot vs jQuery QueryBuilderMIT
The classic jQuery plugin with Bootstrap styling and SQL/Mongo plugins.
- qnot vs Syncfusion QueryBuilderCommercial or community
A commercial component in the Syncfusion suite, with wrappers for most frameworks.