React Pivot Grid Selection Overview

    With the Ignite UI for React Select feature in React Pivot Grid you can easily interact with and manipulate data using simple mouse interactions. There are three selection modes available:

    • Row selection
    • Cell selection
    • Column selection

    With the rowSelection property, you can specify:

    • None
    • Single
    • Multiple Select

    React Pivot Grid Selection Example

    The sample below demonstrates three types of cell selection behaviors in the IgrPivotGrid. Use the buttons below to enable each of the available selection modes.

    React Pivot Grid Selection Options

    React Pivot Grid Row Selection

    Property rowSelection enables you to specify the following options:

    • None - Row selection would be disabled for the IgrPivotGrid.
    • Single - Selection of only one row within the IgrPivotGrid would be available.
    • Multiple - Multi-row selection would be available by using the row selectors, with a key combination like CTRL + click, or by pressing the space key once a cell is focused.

    Go to Row selection topic for more information.

    React Pivot Grid Cell Selection

    Property cellSelection enables you to specify the following options:

    • None - Cell selection would be disabled for the IgrPivotGrid.
    • Single - Selection of only one cell within the IgrPivotGrid would be available.
    • Multiple - Currently, this is the default state of the selection in the IgrPivotGrid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.

    React Pivot Grid Column Selection

    The Selectable property enables you to specify the following options for each IgrColumn. The corresponding column selection will be enabled or disabled if this property is set to true or false, respectively.

    This leads to the following three variations:

    • Single selection - mouse click over the column cell.
    • Multi column selection - holding CTRL + mouse click over the column cells.
    • Range column selection - holding SHIFT + mouse click selects everything in between.

    Known Issues and Limitations

    When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

    • Row Selection
    • Row Expand/collapse
    • Row Editing
    • Row Pinning

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.