react-awesome-query-builder
Query builder
A user-friendly React component for building complex queries with filter functionality
User-friendly query builder for React
2k stars
32 watching
503 forks
Language: JavaScript
last commit: 2 days ago
Linked from 1 awesome list
ant-designantdantdesignfilterhacktoberfesthacktoberfest2021material-uimongoqueryquery-builderreactreact-componentreact-componentsreactjssqltypescript
Features | |||
| JsonLogic | Export to MongoDb, SQL, , , ElasticSearch or your custom format | ||
| JsonLogic | Import from , | ||
| Ant Design | Themes: , , , , vanilla It is possible to use another UI framework of your choice, see | ||
| types | TypeScript support (see and ) | ||
Getting started | |||
| @react-awesome-query-builder/core | has core functionality to import/export/store query, provides utils | ||
| @react-awesome-query-builder/ui | has core React components like and CSS, provides config with basic (vanilla) widgets | ||
| @react-awesome-query-builder/antd | provides config with widgets | ||
| @react-awesome-query-builder/mui | provides config with widgets | ||
| @react-awesome-query-builder/material | provides config with widgets (deprecated) | ||
| @react-awesome-query-builder/bootstrap | provides config with widgets | ||
| @react-awesome-query-builder/fluent | provides config with widgets | ||
Demo apps | |||
| pnpm start | demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage, uses all supported UI frameworks | ||
| pnpm sandbox-ts | simple demo app, built with Vite, uses TS, uses MUI widgets | ||
| pnpm sandbox-js | simplest demo app, built with Vite, not uses TS, uses vanilla widgets | ||
| pnpm sandbox-next | advanced demo app with server side, built with Next.js, uses TS, uses MUI widgets, has API to save/load query value and query config from storage | ||
API / <Query /> | |||
| CONFIG | destructured | ||
| Immutable | query value in internal format | ||
| index.d.ts | callback called when query value changes. Params: (in Immutable format), , (details about action which led to the change, see in ), (you can use to run actions programmatically, see in ) | ||
| Material-UI | 93,969 | 3 days ago | If you put query builder component inside 's or , please: |
| Fluent-UI | If you put query builder component inside 's , please: | ||
| index.d.ts | For a list of available actions see interface in . See in as a demonstration of calling actions programmatically | ||
API / Versions / Migration to 6.0.0 | |||
| @react-awesome-query-builder/ui | |||
| @react-awesome-query-builder/antd | |||
| @react-awesome-query-builder/bootstrap | |||
| @react-awesome-query-builder/mui | |||
| @react-awesome-query-builder/material | (deprecated) | ||
| @react-awesome-query-builder/fluent | |||
brillout/awesome-react-components