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 can modify the client to fetch data from the new endpoint and display the results.

 mapping with a mapper function and add a mapping for the UN/LOCODE dataset.

import { ColDef } from "ag-grid-community";

import { QueryBuilder, Field, RuleGroupType } from "react-querybuilder";

const columnDefsMapper = (field: Field): ColDef => ({
  ...field,
  field: field.name,
  headerName: field.label,
})

const columnDefs = fields["sales"].map(columnDefsMapper);

const columnDefsUNL = fields["unlocode"].map(columnDefsMapper);

 prop in the QueryBuilder component to read the correct fields from the 

      <QueryBuilder
        fields={fields[dataset]}

---
title: How to Fetch and Display Data With React Query Builder
description: Configuring the grid to show the geographic data
privateVideoUrl: https://fullstack.wistia.com/medias/8w8qpi36pa
---

# Displaying the new data

Now we can modify the client to fetch data from the new endpoint and display the results.

## Column definitions

Back in `App.tsx`, replace the existing `columnDefs` mapping with a mapper function and add a mapping for the UN/LOCODE dataset.

```typescript { actualFilename=./protected/src/App.tsx endLine=2 startLine=2 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L2 }
import { ColDef } from "ag-grid-community";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=6 startLine=6 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L6 }
import { QueryBuilder, Field, RuleGroupType } from "react-querybuilder";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=23 startLine=15 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L15 }
const columnDefsMapper = (field: Field): ColDef => ({
  ...field,
  field: field.name,
  headerName: field.label,
})

const columnDefs = fields["sales"].map(columnDefsMapper);

const columnDefsUNL = fields["unlocode"].map(columnDefsMapper);
```

Change the `fields` prop in the QueryBuilder component to read the correct fields from the `fields` records.

```typescript { actualFilename=./protected/src/App.tsx endLine=102 startLine=101 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L101 }
      <QueryBuilder
        fields={fields[dataset]}
```

Add a state variable to hold the UN/LOCODE data and use it in the AG Grid configuration.

```typescript { actualFilename=./protected/src/App.tsx endLine=41 startLine=41 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L41 }
  const [rawDataUNL, setRawDataUNL] = useState<any[]>([]);
```

```typescript { actualFilename=./protected/src/App.tsx endLine=121 startLine=117 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.03/protected/src/App.tsx#L117 }
        <AgGridReact
          columnDefs={dataset === "sales" ? columnDefs : columnDefsUNL}
          rowData={dataset === "sales" ? rawData : rawDataUNL}
          suppressPropertyNamesCheck
        />
```

We don't need to add a new `getOperators` method. We can simply modify the existing one to accommodate the new fields. Add `case "date":` to the group of case statements for date fields, add another group of case statements for the Boolean fields, and add `"id"`, `"latitude"`, and `"longitude"` to the group of case statements for numeric fields.

Configuring the grid to show the geographic data

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

How to Fetch and Display Data With React Query Builder