Introduction

ReactGrid has three properties related to selections inside the grid via ReactGrid:

1. enableRangeSelection
2. enableRowSelection
3. enableColumnSelection

enableRangeSelection property

The range selection is the most common selection, but in case you want to use it, it's necessary to enable it before. You can do multiple selections by holding the Ctrl or Command ⌘ key on Apple devices.

<ReactGrid
    {...props}
    enableRangeSelection //highlight-line
/>

enableRowSelection and enableColumnSelection property

Way how enableRowSelection and enableColumnSelection property works is very similar.

When you first click on:

• the left cell of a row, the whole row will be selected, then you can expand this selection to other rows;
• the top cell of the column, the whole column will be selected, then you can expand this selection to other columns.

You can then select or unselect any row/column by Ctrl or Command ⌘ key.

If you click on the first top-left cell and enableColumnSelection is enabled then the column has a priority over the row in this particular case.

<ReactGrid
    {...props}
    enableRowSelection //highlight-line
    enableColumnSelection //highlight-line
/>