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

---
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".

Using React Query Builder for a completely different purpose