Introduction to React Query Builder

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

Add Fields and Operators to React Query Builder

Getting started

How to Build a Multilingual React Site with Query Builder

Customize or Replace Default Component in React Query Builder

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

How to Customize the React Query Builder ValueEditor Component

Configuration

Create SQL Queries With React formatQuery and valueProcessor

Push a React Query Builder API Server to Heroku With Git

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

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

Integrating with an API

How to Build a New React API Endpoint

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

How to Fetch and Display Data With React Query Builder

How to Add a Google Maps Object to a React Site

Geographic data

How to Bulk Edit Data With React Query Builder

How to Add Features to the React onClickUpdate Feature

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.

There are two ways to configure operators in React Query Builder: 

 method in order to keep all our operator configuration in the same place. To configure the operators with the 

 prop, we will again split this out into a separate file to keep things nice and tidy in our 

import { defaultOperators, NameLabelPair } from "react-querybuilder";

const getOperators = (field: string): NameLabelPair[] => {
  switch (field) {
    case "order_date":
    case "ship_date":
      return [
        { name: "=", label: "is" },
        { name: "!=", label: "is not" },
        { name: "<", label: "is before" },
        { name: ">", label: "is after" },
        { name: "<=", label: "is on or before" },
        { name: ">=", label: "is on or after" },
        { name: "null", label: "is blank" },
        { name: "notNull", label: "is not blank" },
      ];

    case "order_id":
    case "units_sold":
    case "unit_price":
    case "unit_cost":
    case "total_revenue":
    case "total_cost":
    case "total_profit":
      return [
        { name: "=", label: "is" },
        { name: "!=", label: "is not" },
        { name: "<", label: "is less than" },
        { name: ">", label: "is greater than" },
        { name: "<=", label: "is less than or equal to" },
        { name: ">=", label: "is greater than or equal to" },
        { name: "null", label: "is blank" },
        { name: "notNull", label: "is not blank" },
      ];

    default:
      return defaultOperators;
  }
};

export default getOperators;

, will get date-related operators ("is before", "is after", etc), while numeric fields will get number-related operators ("is greater than", "is less than", etc). The remaining fields will get the default operators, which we can import from 

And once again, include the new function in the query builder props.

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

// ...

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

View the application and make sure the correct operators are available when you choose specific fields.

import React, { useState } from "react";
import { QueryBuilder, formatQuery, RuleGroupType } from "react-querybuilder";
import fields from "./fields";
import getOperators from "./getOperators";

function App() {
  const [query, setQuery] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: [],
  });

  return (
    <>
      <QueryBuilder
        fields={fields}
        getOperators={getOperators}
        query={query}
        onQueryChange={(q) => setQuery(q)}
      />
      <pre>{formatQuery(query, "sql")}</pre>
      <pre>{formatQuery(query, "json")}</pre>
    </>
  );
}

export default App;

---
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
---

# 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.

## Operators

There are two ways to configure operators in React Query Builder: 

-   the `getOperators` prop at query level
-   the `operators` attribute at field level

We're going to use the `getOperators` method in order to keep all our operator configuration in the same place. To configure the operators with the `getOperators` prop, we will again split this out into a separate file to keep things nice and tidy in our `App.tsx` file.

Create a new file called `getOperators.ts` in the `client/src/` folder.

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

const getOperators = (field: string): NameLabelPair[] => {
  switch (field) {
    case "order_date":
    case "ship_date":
      return [
        { name: "=", label: "is" },
        { name: "!=", label: "is not" },
        { name: "<", label: "is before" },
        { name: ">", label: "is after" },
        { name: "<=", label: "is on or before" },
        { name: ">=", label: "is on or after" },
        { name: "null", label: "is blank" },
        { name: "notNull", label: "is not blank" },
      ];

    case "order_id":
    case "units_sold":
    case "unit_price":
    case "unit_cost":
    case "total_revenue":
    case "total_cost":
    case "total_profit":
      return [
        { name: "=", label: "is" },
        { name: "!=", label: "is not" },
        { name: "<", label: "is less than" },
        { name: ">", label: "is greater than" },
        { name: "<=", label: "is less than or equal to" },
        { name: ">=", label: "is greater than or equal to" },
        { name: "null", label: "is blank" },
        { name: "notNull", label: "is not blank" },
      ];

    default:
      return defaultOperators;
  }
};

export default getOperators;
```

The date fields in our data set, `order_date` and `ship_date`, will get date-related operators ("is before", "is after", etc), while numeric fields will get number-related operators ("is greater than", "is less than", etc). The remaining fields will get the default operators, which we can import from `react-querybuilder`.

And once again, include the new function in the query builder props.

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

// ...

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

View the application and make sure the correct operators are available when you choose specific fields.

Let's take a look at the `App.tsx` file as it stands now.

```typescript { actualFilename=./protected/src/App.tsx endChar=626 endLine=28 startChar=0 startLine=1 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_01/lesson_01.03/protected/src/App.tsx }
import React, { useState } from "react";
import { QueryBuilder, formatQuery, RuleGroupType } from "react-querybuilder";
import fields from "./fields";
import getOperators from "./getOperators";

function App() {
  const [query, setQuery] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: [],
  });

  return (
    <>
      <QueryBuilder
        fields={fields}
        getOperators={getOperators}
        query={query}
        onQueryChange={(q) => setQuery(q)}
      />
      <pre>{formatQuery(query, "sql")}</pre>
      <pre>{formatQuery(query, "json")}</pre>
    </>
  );
}

export default App;
```


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

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building Advanced Admin Reporting in React

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting started

Introduction: (1:18)

Introduction to React Query Builder

Lesson 1:

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

Lesson 2: (4:13)

Add Fields and Operators to React Query Builder

Module 2: Configuration

Lesson 1:

How to Build a Multilingual React Site with Query Builder

Lesson 2:

Customize or Replace Default Component in React Query Builder

Lesson 3:

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

Lesson 4:

How to Customize the React Query Builder ValueEditor Component

Module 3: Integrating with an API

Lesson 1: (5:24)

Create SQL Queries With React formatQuery and valueProcessor

Lesson 2: (12:38)

Push a React Query Builder API Server to Heroku With Git

Lesson 3: (16:28)

Add a PostgreSQL Database to React Query Builder

Lesson 4: (6:10)

How to Fetch Data From a React API

Lesson 5: (11:37)

How to Build a Data Table in React With AG Grid

Lesson 6: (7:05)

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

Module 4: Geographic data

Lesson 1:

How to Build a New React API Endpoint

Lesson 2: (7:33)

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

Lesson 3:

How to Fetch and Display Data With React Query Builder

Lesson 4:

How to Add a Google Maps Object to a React Site

Module 5: Bulk edits

Lesson 1: (12:16)

How to Bulk Edit Data With React Query Builder

Lesson 2:

How to Add Features to the React onClickUpdate Feature

Lesson 3:

How to Build Custom ValueEditor Components in React

Add Fields and Operators to React Query Builder