Using ag-Grid with React: Selection

Range Selection


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

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.


I finished! On to the next chapter