Add Fields and Operators to React Query Builder

Enhancing the query builder with fields from the sample sales data set

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents
  • |

Lesson Transcript

  • [00:00 - 00:06] Now we'll add fields from the sample sales dataset. Each field will need name and label attributes.

  • [00:07 - 00:20] We'll come back to it later and augment the field names and labels with some other attributes to configure the behavior of the query builder in a later lesson. Let's split this out into a separate file, fields.ts, because it can get quite large.

  • [00:21 - 00:34] Create a new file called fields.ts in the source folder. I've already got this typed up, but if you're following along with the transcript, you can get the code from there.

  • [00:35 - 00:44] Let's do... ...save as...

  • [00:45 - 01:23] ...fields.ts Make sure you include them in the query builder props. Back in app.tsx, we'll replace the test fields that we typed earlier with the fields from our new fields.ts file. View the application and check that all the new fields are available to choose from the drop-down list.

  • [01:24 - 01:42] There we go. We have a working query builder now, but all the fields have the same options, meaning the operators and value editors are the defaults.

  • [01:43 - 01:55] What we really want to do is tailor the operators and value editors to each specific field so that users get an optimal experience. There are two ways to configure operators in React Query Builder.

  • [01:56 - 02:07] One, the get operators prop at the query level, and two, the operators attribute at the field level. We're going to use the get operators method in order to keep all our operator configuration in the same place.

  • [02:08 - 02:25] Now we'll configure the operators with the get operators prop. Once again, we'll split this out into a separate file to keep things nice and tidy in our app.tsx file.

  • [02:26 - 02:59] Once again, I've got this already typed up. I'm just going to save as get operators.ts and you can get this code from the transcript. The date fields in our data set, order date and ship date, will get date- related operators, such as is before, is after, etc.

  • [03:00 - 03:19] While numeric fields will get the number-related operators, is greater than, is less than, etc. The remaining fields will get the default operators which we can import from React Query Builder.

  • [03:20 - 03:39] Once again, include the new function in the query builder props. Save that.

  • [03:40 - 03:54] View the application and make sure the correct operators are available when you choose specific fields. If we choose order ID, that's a numeric field.

  • [03:55 - 04:02] We would want to see is less than, is greater than, etc. We do, which is good.

  • [04:03 - 04:11] If we choose a date field like order date, we'd want to see is before, is after , etc.