Let's learn about basic row selection in ag-Grid with React. We set row selection using a few different properties on the grid that we can add to our state object and then pass as props to the AgGridReact component.
The first property is rowSelection. This specifies the type of row selection and can be set to either "single" or "multiple" to enable selection. Single row selection means that when you select a row, any previously selected row gets unselected. Multiple row selection allows multiple rows to be selected.
First add the property to state:
// App.js
// state object
rowSelection: "multiple",
Then, add it as a prop to the AgGridReact component:
// App.js
// AgGridReact component props
rowSelection={this.state.rowSelection}
By default, the grid disallows deselection of rows. Once a row is selected, it remains selected until another row is selected in its place. To change this, we can use the rowDeselection property and set to true to allow rows to be deselected.
First, add it to state:
// App.js
// state object
rowDeselection: true,
Then, add it as a prop to the AgGridReact component:
// App.js
// AgGridReact component props
rowDeselection={this.state.rowDeselection}
You can now deselect rows by holding down command on a Mac (control on Windows) and clicking on a row.
An especially useful option for touch devices (where command/control and shift are not available) is rowMultiSelectWithClick. Setting this property to true will allow multiple rows to be selected with clicks. If you click to select one row and then click to select another row, the first row will stay selected.
As with the other options, we'll add a property to state:
// App.js
// state object
rowMultiSelectWithClick: true,
And then add it as a prop to the AgGridReact component:
// App.js
// AgGridReact component props
rowDeselection={this.state.rowDeselection}
That's it for the basics of row selection in ag-Grid with React. Up next: checkbox selection!