Welcome to

Building Advanced Admin Reporting in React

Example Code Download

You can download the complete example code by clicking here.

Getting started

3 lessons 16m total

Introduction to React Query Builder

Introduction to React Query Builder and prerequisites for the course

INTRODUCTION

1:18 minutes

Initializing the query builder

Setting up the application and adding a query builder

LESSON

11:12 minutes

Fields and operators

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

LESSON

4:13 minutes

Configuration

4 lessons 30m total

Translations

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

LESSON

7:20 minutes

Other customizations

Changing or removing certain components of the query builder

LESSON

6:58 minutes

Built-in input types

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

LESSON

4:35 minutes

Custom value editors

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

6 lessons 59m total

Formatting the query

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

LESSON

5:24 minutes

Server setup, part 1

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

LESSON

12:38 minutes

Server setup, part 2

Connecting to a database and finalizing the API

LESSON

16:28 minutes

Fetching data

Retrieving data from the server

LESSON

6:10 minutes

Displaying data in the grid

Configuring a grid to display the data

LESSON

11:37 minutes

Displaying data in a chart

Configuring a chart to display summary information about the data

LESSON

7:05 minutes

Geographic data

4 lessons 30m total

Adding a new API endpoint

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

LESSON

2:28 minutes

Preparing a new data set

Configuring the query builder with geographic data fields

LESSON

7:33 minutes

Displaying the new data

Configuring the grid to show the geographic data

LESSON

9:22 minutes

Displaying a map

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

LESSON

11:23 minutes

Bulk edits

3 lessons 30m total

Setting up the bulk editor

Using React Query Builder for a completely different purpose

LESSON

12:15 minutes

Enhancing the bulk editor

Changing the update mechanism to cover more use cases

LESSON

7:54 minutes

Finalizing the bulk editor

Polishing off the bulk editor with a custom value editor

LESSON

10:01 minutes