Selection

The Grid enables the user to select single or multiple cells and rows. It also provides default selection implementation from the getSelectedState utility function.

Getting Started

The Grid selection can be enabled by:

1. Set the selectable option.
2. Set theselectedField option.
3. Use the onSelectionChange event.
4. Optionally use the getSelectedState utility function for default selection behavior.

As a result, the Grid allows you to:

• Select single cell or row
• Select multiple cells or rows
• Select range of cells or rows by dragging

The selectedField option represents a field inside the data collection which determines the rows that will be render as selected.

Row Selection

Row selection can be enabled by setting selectable to true or to an object with enabled property set to true.

The following example demonstrates multiple-row selection with enabled drag selection.

Cell Selection

Cell selection is enabled by setting an object to the selectable property with enabled set to true and cell set to true.

The following example demonstrates multiple-cell selection with enabled drag selection.

Selection Aggregates

The Grid enables you to select single or multiple cells or rows and calculate different metrics based on the selected data.

This functionality allows you to get a quick snapshot of some of the more important aggregates of the selected data. You can use the built-in approach and display these metrics at the bottom of the Grid or create your own elements that would display the data.

The Grid supports the following built-in aggregates for all selected cells:

• max—the greatest number. Valid for numeric fields.
• min—the smallest number. Valid for numeric fields.
• sum—the sum of all numbers. Valid for numeric fields.
• average—the average of all numbers. Valid for numeric fields.
• count—the total number of cells.
• earliest—the earliest date. Valid for Date fields.
• latest—the latest date. Valid for Date fields.
• isTrue—the total number of boolean fields with true value.
• isFalse—the total number of boolean fields with false value.

To enable the selection aggregates of the Grid enable its selectable prop, add a StatusBar component and update its data based on its current selection of the component.

Customizing the Selection

The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.

The checkbox selection enables selection upon a checkbox click and implements a master checkbox in the header that selects and deselects all items.

To configure the checkbox selection:

1. Set a selection column by setting the field option and passing the select value to field.
2. Handle the GridSelectionChangeEvent and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.
3. Depending on the selected state of an item, set the selectedField value.

The following example demonstrates how to implement multiple selection both on row click and with checkboxes.

Combining Selection with Data Operations (filtering, sorting, paging, etc.)

The following example demonstrates how to integrate checkbox selection with enabled grouping, filtering, sorting and paging. The main idea is to apply the selected state to the dataItems before or after processing the filter, group, and sort expressions.

Suggested Links

• API Reference of the Grid
• API Index of the Grid
• React Data Grid High-Level Overview