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.
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
Getting started
Introduction to React Query Builder
Introduction to React Query Builder and prerequisites for the course
INTRODUCTION
1:18 minutes
How to Create a React App With React Query Builder Using npm
Setting up the application and adding a query builder
LESSON
11:12 minutes
Add Fields and Operators to React Query Builder
Enhancing the query builder with fields from the sample sales data set
LESSON
4:13 minutes
Configuration
How to Build a Multilingual React Site with Query Builder
Adding another bit of customization to the query builder -- a Spanish translation
LESSON
7:20 minutes
Customize or Replace Default Component in React Query Builder
Changing or removing certain components of the query builder
LESSON
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
LESSON
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
LESSON
11:19 minutes
Integrating with an API
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
LESSON
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
LESSON
12:38 minutes
Add a PostgreSQL Database to React Query Builder
Connecting to a database and finalizing the API
LESSON
16:28 minutes
How to Build a Data Table in React With AG Grid
Configuring a grid to display the data
LESSON
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
LESSON
7:05 minutes
Geographic data
How to Build a New React API Endpoint
Setting up a new API endpoint to serve geographic data (UN/LOCODE ports)
LESSON
2:28 minutes
How to Add a New API and Variables to React Query Builder
Configuring the query builder with geographic data fields
LESSON
7:33 minutes
How to Fetch and Display Data With React Query Builder
Configuring the grid to show the geographic data
LESSON
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
LESSON
11:23 minutes
Bulk edits
How to Bulk Edit Data With React Query Builder
Using React Query Builder for a completely different purpose
LESSON
12:15 minutes
How to Add Features to the React onClickUpdate Feature
Changing the update mechanism to cover more use cases
LESSON
7:54 minutes
How to Build Custom ValueEditor Components in React
Polishing off the bulk editor with a custom value editor
LESSON
10:01 minutes
Your Instructors
Jake Boone
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.
