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