This video is available to students only
Custom value editors
How to provide your own value editor in order to take full control of the rule manager
Now we'll customize the ValueEditor component of our query builder and tailor it to the different data types.
Using the default ValueEditor#
Create a React component in a file called ValueEditor.tsx and use that component as your custom ValueEditor. For now, the component should simply return null if the operator is null or notNull; otherwise it should return the default ValueEditor component from react-querybuilder.
1
import {2
ValueEditor as DefaultValueEditor,
3
ValueEditorProps,4
} from "react-querybuilder";
5
6
const ValueEditor = (props: ValueEditorProps) => {
7
const { operator } = props;
8
9
if (operator === "null" || operator === "notNull") {
10
return null;
11
}
12
13
return <DefaultValueEditor {props} />;
14
};
15
16
export default ValueEditor;
1
import React, { useState } from "react";
2
import QueryBuilder, { formatQuery, RuleGroupType } from "react-querybuilder";
3
import combinators from "./combinators";
4
import CombinatorSelector from "./CombinatorSelector";
5
import fields from "./fields";
6
import getOperators from "./getOperators";
7
import translations from "./translations";
8
import { Language } from "./types";
9
import ValueEditor from "./ValueEditor";
10
11
function App() {
12
const [query, setQuery] = useState<RuleGroupType>({
13
id: "root",
14
combinator: "and",
15
rules: [],16
});
17
const [language, setLanguage] = useState<Language>("en");
18
19
return (20
<>21
<select value={language} onChange={e => setLanguage(e.target.value as Language)}>
22
<option value="en">English</option>
23
<option value="es">Spanish</option>
24
</select>
25
<QueryBuilder
26
fields={fields}
27
getOperators={getOperators}
28
query={query}
29
onQueryChange={(q) => setQuery(q)}
30
translations={translations[language]}
31
combinators={combinators[language]}
32
controlElements={{
33
combinatorSelector: CombinatorSelector,
34
valueEditor: ValueEditor,
35
}}
36
/>37
<pre>{formatQuery(query, "sql")}</pre>
38
<pre>{formatQuery(query, "json")}</pre>
39
</>
40
);
41
}
42
43
export default App;
If you like, check out the react-querybuilder source code to see what the default ValueEditor looks like.
This page is a preview of Building Advanced Admin Reporting in React