Introduction to React Query Builder and prerequisites for the course

Introduction to React Query Builder

Setting up the application and adding a query builder

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

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

Add Fields and Operators to React Query Builder

Getting started

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

How to Build a Multilingual React Site with Query Builder

Changing or removing certain components of the query builder

Customize or Replace Default Component in React Query Builder

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

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

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

How to Customize the React Query Builder ValueEditor Component

Configuration

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

Create SQL Queries With React formatQuery and valueProcessor

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

Push a React Query Builder API Server to Heroku With Git

Connecting to a database and finalizing the API

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

Configuring a chart to display summary information about the data

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

Integrating with an API

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

How to Build a New React API Endpoint

Configuring the query builder with geographic data fields

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

Configuring the grid to show the geographic data

How to Fetch and Display Data With React Query Builder

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

How to Add a Google Maps Object to a React Site

Geographic data

Using React Query Builder for a completely different purpose

How to Bulk Edit Data With React Query Builder

Changing the update mechanism to cover more use cases

How to Add Features to the React onClickUpdate Feature

Polishing off the bulk editor with a custom value editor

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're going to use a query builder for a different purpose: bulk editing. This is useful when your data grid is updateable and you want to be able to define many changes at once.

First we'll add a selection column to the data grid so users can determine exactly which rows they want to update. Make sure to set the 

 so we can select multiple rows. We'll also need to capture the grid API in a state variable for later use.

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

  const [gridApi, setGridApi] = useState<GridApi>();

        <AgGridReact
          columnDefs={[
            {
              field: "selectionColumn",
              headerCheckboxSelection: true,
              checkboxSelection: true,
              width: 40,
            },
            ...(dataset === "sales" ? columnDefs : columnDefsUNL),
          ]}
          onGridReady={(gre) => setGridApi(gre.api)}
          rowData={dataset === "sales" ? rawData : rawDataUNL}
          rowSelection="multiple"
          suppressPropertyNamesCheck
        />

---
title: How to Bulk Edit Data With React Query Builder
description: Using React Query Builder for a completely different purpose
privateVideoUrl: https://fullstack.wistia.com/medias/0sgppx4741
---

# Setting up the bulk editor

Now we're going to use a query builder for a different purpose: bulk editing. This is useful when your data grid is updateable and you want to be able to define many changes at once.

## Grid configuration

First we'll add a selection column to the data grid so users can determine exactly which rows they want to update. Make sure to set the `rowSelection` prop to `"multiple"` so we can select multiple rows. We'll also need to capture the grid API in a state variable for later use.

```typescript { actualFilename=./protected/src/App.tsx endLine=3 startLine=3 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_05/lesson_05.01/protected/src/App.tsx#L3 }
import { ColDef, GridApi } from "ag-grid-community";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=51 startLine=51 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_05/lesson_05.01/protected/src/App.tsx#L51 }
  const [gridApi, setGridApi] = useState<GridApi>();
```

```typescript { actualFilename=./protected/src/App.tsx endLine=168 startLine=154 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_05/lesson_05.01/protected/src/App.tsx#L154 }
        <AgGridReact
          columnDefs={[
            {
              field: "selectionColumn",
              headerCheckboxSelection: true,
              checkboxSelection: true,
              width: 40,
            },
            ...(dataset === "sales" ? columnDefs : columnDefsUNL),
          ]}
          onGridReady={(gre) => setGridApi(gre.api)}
          rowData={dataset === "sales" ? rawData : rawDataUNL}
          rowSelection="multiple"
          suppressPropertyNamesCheck
        />
```

## Query builder configuration

For the query builder configuration, we can re-use the `fields` from our SQL-generating query builder setup, but we'll use different operators. (The `ValueEditor` component will also need to be different, but we'll cover that in a subsequent lesson.)

Set up a new state variable to hold the update query and place a **new** `<QueryBuilder />` component just above the data grid. Place a button below the new query builder labeled "Update".

Jake Boone

Now we're going to use the query builder for a completely different purpose,

This is useful when your data grid is updatable and you want to be able to

First we'll add a selection column to the data grid so users can determine

Make sure to set the row selection prop to multiple so we can select multiple

We'll also need to capture the grid API in a state variable for later use.

So let's start out in app.tsx creating the state variable for the grid API.

We'll call this grid API and the setter set grid API.

That's going to equal use state of type grid API which we can get from a ggrid

And we'll leave it as null for the default.

Now down in our aggrid react component we want to add a selection column.

So we want to leave the other columns alone.

So what I'm going to do is wrap that in parentheses and then wrap that in

That'll leave them the same as they were before but we're going to stick

And it's going to have a field name of what is called this selection column.

And then we want to set header checkbox selection to true and checkbox

And then so it doesn't take up too much room.

We also want to set the ongrid ready function or event.

It's going to take a grid ready event parameter.

And we're going to set the grid API to GRE.API.

And remember we also need to set the rows selection prop equal to multiple so

I'm going to format that real quick and save it.

For the query builder configuration we can reuse the fields from our SQL

builder setup but we'll use different operators.

The value editor component will also need to be different but we'll cover that

Set up a new state variable to hold the update query and place a new query

Place the button below the new query builder labeled update.

So let's start out with our state variable to hold the update query.

And what we can do is just copy the query state variable and setter.

And set update query and we'll use the same defaults.

And then down just above the data grid below our get data button we'll set up a

The fields are going to be the same as our SQL generating query builder.

And our on query change prop is going to take the query and set update query to

Our query prop is going to be our update query state variable that we declared

Now for get operators we want these operators to be different than the SQL

So we're going to define a new function called get operators for update which

Since we don't need the and or a combinator picker and we don't want the user

groups of rules the query builder should not have combinator selector or ad

So like we did before we'll just set those to return null.

So control elements is going to be an object where ad group action is a

Copy that down and combinator selector is the same thing the function that

Now just below the query builder we want to have a button labeled update.

It's going to be of type button and it will have an on click handler of the

click update which we'll define in just a minute.

Now create a file called get operators for update.ts that exports a function

This method will return the operators we need to use for the bulk editor.

The default operator will be set to which will set the field to the value

The numeric fields will also get increased by and decreased by which will

perform addition and subtraction on the field.

Date fields will get the operator extend by number of days which will add days

Now I've already got this typed up so I'm just going to save this as get

How to Bulk Edit Data With React Query Builder

Grid configuration#

Query builder configuration#