Building Advanced Admin Reporting in React

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

5.0 (0 ratings)99 students

2h 47m20 Video Lessons

Published  | Updated

Course Preview

What You Will Learn

How to configure a query builder

How to create an API for reports

How to add data grids, charts, and maps

What problems query builders can solve

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.

Course Content

5 modules20 lessons2h 47m total

Getting started

3 lessons 16m total

Introduction to React Query Builder

Introduction to React Query Builder and prerequisites for the course


1:18 minutes

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

Setting up the application and adding a query builder


11:12 minutes

Add Fields and Operators to React Query Builder

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


4:13 minutes


4 lessons 30m total

How to Build a Multilingual React Site with Query Builder

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


7:20 minutes

Customize or Replace Default Component in React Query Builder

Changing or removing certain components of the query builder


6:58 minutes

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

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


4:35 minutes

How to Customize the React Query Builder ValueEditor Component

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


11:19 minutes

Integrating with an API

6 lessons 59m total

Create SQL Queries With React formatQuery and valueProcessor

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


5:24 minutes

Push a React Query Builder API Server to Heroku With Git

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


12:38 minutes

Add a PostgreSQL Database to React Query Builder

Connecting to a database and finalizing the API


16:28 minutes

How to Fetch Data From a React API

Retrieving data from the server


6:10 minutes

How to Build a Data Table in React With AG Grid

Configuring a grid to display the data


11:37 minutes

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

Configuring a chart to display summary information about the data


7:05 minutes

Geographic data

4 lessons 30m total

How to Build a New React API Endpoint

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


2:28 minutes

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

Configuring the query builder with geographic data fields


7:33 minutes

How to Fetch and Display Data With React Query Builder

Configuring the grid to show the geographic data


9:22 minutes

How to Add a Google Maps Object to a React Site

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


11:23 minutes

Bulk edits

3 lessons 30m total

How to Bulk Edit Data With React Query Builder

Using React Query Builder for a completely different purpose


12:15 minutes

How to Add Features to the React onClickUpdate Feature

Changing the update mechanism to cover more use cases


7:54 minutes

How to Build Custom ValueEditor Components in React

Polishing off the bulk editor with a custom value editor


10:01 minutes

Your Instructors

Profile image for jakeboone02

Jake Boone

Product Owner and Web Developer

👋 Hi! I'm Jake. I'm a front-end web developer and product owner at a large engineering and construction firm working on mission-critical applications.

Frequently Asked Questions

Who is this course for?

This course is for anyone who wants to know how to create flexible, robust reporting solutions with React.

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.


newline Pro Subscription

Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More


Charged monthly. Free to cancel anytime.


One-Time Purchase

Get lifetime access to this course.

$39$49$10 off

Building Advanced Admin Reporting in React