Introduction to React Query Builder and prerequisites for the course

Introduction to React Query Builder

Setting up the application and adding a query builder

How to Create a React App With React Query Builder Using npm

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

Add Fields and Operators to React Query Builder

Getting started

Adding another bit of customization to the query builder -- a Spanish translation

How to Build a Multilingual React Site with Query Builder

Changing or removing certain components of the query builder

Customize or Replace Default Component in React Query Builder

Using the various input types provided with React Query Builder, including numeric inputs and drop-down lists

How to Configure Built-in Input Types in React Query Builder

How to provide your own value editor in order to take full control of the rule manager

How to Customize the React Query Builder ValueEditor Component

Configuration

Preparing for the server setup by processing the output of the query builder into database-ready SQL

Create SQL Queries With React formatQuery and valueProcessor

Beginning the process of setting up a server to host the API

Push a React Query Builder API Server to Heroku With Git

Connecting to a database and finalizing the API

Add a PostgreSQL Database to React Query Builder

How to Fetch Data From a React API

How to Build a Data Table in React With AG Grid

Configuring a chart to display summary information about the data

How to Visualize React API Data in a Graph With AG Charts

Integrating with an API

Setting up a new API endpoint to serve geographic data (UN/LOCODE ports)

How to Build a New React API Endpoint

Configuring the query builder with geographic data fields

How to Add a New API and Variables to React Query Builder

Configuring the grid to show the geographic data

How to Fetch and Display Data With React Query Builder

Using the Google Maps API to display the geographic data on a map

How to Add a Google Maps Object to a React Site

Geographic data

Using React Query Builder for a completely different purpose

How to Bulk Edit Data With React Query Builder

Changing the update mechanism to cover more use cases

How to Add Features to the React onClickUpdate Feature

Polishing off the bulk editor with a custom value editor

How to Build Custom ValueEditor Components in React

Bulk edits

In this course we teach you how to create admin reports with React using a query builder. Admin reporting is a broad topic, and getting started can be overwhelming.

In five modules, we cover configuration of the query builder, setting up a server, displaying data in a grid, chart, and map, as well as some more advanced uses of the query builder. It's about three hours long and comes with code samples.

The course is taught by Jake Boone, who uses React Query Builder in real, mission-critical applications for a large engineering and construction firm.

In this course, we'll be using React Query Builder to create admin reports with complex filtering, bulk editing, data grids, charts, and maps.

Building Advanced Admin Reporting in React

Now we'll add fields from the sample sales data set. This is a randomized data set with columns for location, item type, dates, quantities and totals. Each field will need 

 attributes. We'll come back to that 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, 

, because it can get quite large. Create a new file called 

import { Field } from "react-querybuilder";

const fields: Field[] = [
  {
    name: "order_id",
    label: "Order ID",
  },
  {
    name: "region",
    label: "Region",
  },
  {
    name: "country",
    label: "Country",
  },
  {
    name: "item_type",
    label: "Item Type",
  },
  {
    name: "sales_channel",
    label: "Sales Channel",
  },
  {
    name: "order_priority",
    label: "Order Priority",
  },
  {
    name: "order_date",
    label: "Order Date",
  },
  {
    name: "ship_date",
    label: "Ship Date",
  },
  {
    name: "units_sold",
    label: "Units Sold",
  },
  {
    name: "unit_price",
    label: "Unit Price",
  },
  {
    name: "unit_cost",
    label: "Unit Cost",
  },
  {
    name: "total_revenue",
    label: "Total Revenue",
  },
  {
    name: "total_cost",
    label: "Total Cost",
  },
  {
    name: "total_profit",
    label: "Total Profit",
  },
];

export default fields;

Make sure you include them in the query builder props in 

 assignment and adding the following import:

// App.tsx
import fields from "./fields";

// ...

<QueryBuilder fields={fields} {...} />

View the application and check that all the new fields are available to choose from the drop-down list.

We have a working query builder now, but all the fields have the same options (meaning the operators and value editors are the defaults). What we really want to do is tailor the operators and value editors to each specific field so that users get an optimal experience.

---
title: Add Fields and Operators to React Query Builder
description: Enhancing the query builder with fields from the sample sales data set
privateVideoUrl: https://fullstack.wistia.com/medias/85qhqqntoq
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/jake-boone-building-advanced-admin-reporting-in-react/-/tree/main/code/module_01/lesson_01.03
---

# Fields and operators

## Fields

Now we'll add fields from the sample sales data set. This is a randomized data set with columns for location, item type, dates, quantities and totals. Each field will need `name` and `label` attributes. We'll come back to that 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. Create a new file called `fields.ts` in the `client/src/` folder.

```typescript { actualFilename=./protected/src/fields.ts endChar=910 endLine=63 startChar=0 startLine=1 statedFilename=client/src/fields.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_01/lesson_01.03/protected/src/fields.ts }
import { Field } from "react-querybuilder";

const fields: Field[] = [
  {
    name: "order_id",
    label: "Order ID",
  },
  {
    name: "region",
    label: "Region",
  },
  {
    name: "country",
    label: "Country",
  },
  {
    name: "item_type",
    label: "Item Type",
  },
  {
    name: "sales_channel",
    label: "Sales Channel",
  },
  {
    name: "order_priority",
    label: "Order Priority",
  },
  {
    name: "order_date",
    label: "Order Date",
  },
  {
    name: "ship_date",
    label: "Ship Date",
  },
  {
    name: "units_sold",
    label: "Units Sold",
  },
  {
    name: "unit_price",
    label: "Unit Price",
  },
  {
    name: "unit_cost",
    label: "Unit Cost",
  },
  {
    name: "total_revenue",
    label: "Total Revenue",
  },
  {
    name: "total_cost",
    label: "Total Cost",
  },
  {
    name: "total_profit",
    label: "Total Profit",
  },
];

export default fields;
```

Make sure you include them in the query builder props in `App.tsx` by changing the `fields` assignment and adding the following import:

```tsx
// App.tsx
import fields from "./fields";

// ...

<QueryBuilder fields={fields} {...} />
```

View the application and check that all the new fields are available to choose from the drop-down list.

We have a working query builder now, but all the fields have the same options (meaning the operators and value editors are the defaults). What we really want to do is tailor the operators and value editors to each specific field so that users get an optimal experience.

Jake Boone

Now we'll add fields from the sample sales dataset.

Each field will need name and label attributes.

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

Let's split this out into a separate file, fields.ts, because it can get quite

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.

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

View the application and check that all the new fields are available to choose

We have a working query builder now, but all the fields have the same options,

meaning the operators and value editors are the defaults.

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.

One, the get operators prop at the query level, and two, the operators

We're going to use the get operators method in order to keep all our operator

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

Once again, I've got this already typed up. I'm just going to save as get

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.

While numeric fields will get the number-related operators, is greater than, is

The remaining fields will get the default operators which we can import from

Once again, include the new function in the query builder props.

View the application and make sure the correct operators are available when you

If we choose order ID, that's a numeric field.

We would want to see is less than, is greater than, etc.

If we choose a date field like order date, we'd want to see is before, is after