Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

How to Add a Google Maps Object to a React Site

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

This page is a preview of Building Advanced Admin Reporting in React

Previous Lesson:

How to Fetch and Display Data With React Query Builder

Next Lesson:

How to Bulk Edit Data With React Query Builder

Start a new discussion. All notification go to the author.

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: (11:12)

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: (7:20)

How to Build a Multilingual React Site with Query Builder

Lesson 2: (6:58)

Customize or Replace Default Component in React Query Builder

Lesson 3: (4:35)

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

Lesson 4: (11:19)

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: (2:28)

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: (9:22)

How to Fetch and Display Data With React Query Builder

Lesson 4: (11:23)

How to Add a Google Maps Object to a React Site

Module 5: Bulk edits

Lesson 1: (12:15)

How to Bulk Edit Data With React Query Builder

Lesson 2: (7:54)

How to Add Features to the React onClickUpdate Feature

Lesson 3: (10:01)

How to Build Custom ValueEditor Components in React

How to Add a Google Maps Object to a React Site