This video is available to students only

Setting up the bulk editor

Using React Query Builder for a completely different purpose

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.

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

No discussions yet