React Grid Column Selection Overview
The React Grid Column Selection feature in Ignite UI for React offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the columnSelection
input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.
React Grid Column Selection Example
The sample below demonstrates the three types of IgrGrid
's column selection behavior. Use the column selection dropdown below to enable each of the available selection modes.
*Contact Title, City and Address columns are with disabled column selection.
Basic Usage
The column selection feature can be enabled through the columnSelection
input, which takes GridSelectionMode
values.
Interactions
The default selection mode is None
. If set to Single
or Multiple
, all of the presented columns will be selectable
. With that being said, in order to select a column, we just need to click on one, which will mark it as selected
. If the column is not selectable, no selection style will be applied on the header, while hovering.
[!Note] The Multi Column Headers feature does not reflect on the
selectable
input. TheColumnGroupComponent
isselectable
, if at least one of its children has the selection behavior enabled. In addition, the component is marked asselected
if all of itsselectable
descendants areselected
.
*Under Country Information Column Group only column City and Postal code are selectable.
Keyboard Combinations
[!Note] The keyboard combinations are available only when the grid
columnSelection
input is set tomultiple
.
There are two scenarios for keyboard navigation of the Column Selection feature:
- Multi-column selection - holding ctrl + click on every selectable header cell.
- Range column selection - holding shift + click selects all selectable columns in between.
API Manipulations
The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as selected
by setting the corresponding setter.
[!Note] The above statement also applies to the
ColumnGroupComponent
, except that when theselected
property is changed it changes the state of its descendants.
More information regarding the API manipulations could be found in the API References section.
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties.
In case you would like to change some of the colors, you need to set a class
for the grid first:
<IgrGrid className="grid"></IgrGrid>
Then set the related CSS properties to this class:
.grid {
--ig-grid-row-selected-background: #0062A3;
--ig-grid-row-selected-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
--ig-grid-header-selected-text-color: #ecaa53;
--ig-grid-header-selected-background: #0062A3;
--ig-grid-row-selected-hover-text-color: #ecaa53;
--ig-grid-row-selected-hover-background: #0062A3;
}
Demo
API References
The column selection UI has a few more APIs to explore, which are listed below.
IgrGrid
properties:
IgrColumn
properties:
columnGroup
properties:
IgrGrid
events:
OnColumnsSelectionChange
Additional Resources
- Selection
- Cell Selection
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Virtualization and Performance
Our community is active and always welcoming to new ideas.