Note: Range selection is an ag-Grid Enterprise feature. You can test drive all of the enterprise features for free, you just can't ship them to production without a license. We're also using this StackBlitz in this lesson.
ag-Grid offers us several options for range selection.
To enable range selection, we need to add a property to our state:
// App.js
// state object
enableRangeSelection: true
And then add a corresponding prop to the AgGridReact component:
// App.js
// AgGridReact props
enableRangeSelection={this.state.enableRangeSelection}
Here's the list of features I demonstrate in the video:
- Mouse Drag: Click the mouse down on a cell and drag and release the mouse over another cell. A range will be created between the two cells and clear any existing ranges.
- Shift & Click: Clicking on one cell to focus that cell, then holding down Shift while clicking another cell, will create a range between both cells.
- Shift & Arrow Keys: Focusing a cell and then holding down Shift and using the arrow keys will create a range starting from the focused cell.
- Ctrl & Mouse Drag: Holding Ctrl key (command on Mac) while creating a range using mouse drag will create a new range selection and keep any existing ranges.
Finally, if you add a property called suppressMultiRangeSelection and set it equal to true, you can disable the ability to select multiple ranges.