Setting up the bulk editor
Using React Query Builder for a completely different purpose
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.
1
import { ColDef, GridApi } from "ag-grid-community";
1
const [gridApi, setGridApi] = useState<GridApi>();
1
<AgGridReact
2
columnDefs={[
3
{
4
field: "selectionColumn",
5
headerCheckboxSelection: true,
6
checkboxSelection: true,
7
width: 40,
8
},
9
dataset === "sales" ? columnDefs : columnDefsUNL),(
10
]}
11
onGridReady={(gre) => setGridApi(gre.api)}
12
rowData={dataset === "sales" ? rawData : rawDataUNL}
13
rowSelection="multiple"
14
suppressPropertyNamesCheck
15
/>
Query builder configuration#
Loading...