Selection using Active Item

When a row is clicked, the item object from that row is assigned to activeItem.

To select items on click, activeItem can be added to the selectedItems array. You can also call selectItem(item) or deselectItem(item) in order to select or deselect the grid item.

In the example below, the selectedItems array is replaced whenever activeItem changes, making single-item selection.

Selection using Templates

In addition to modifying selection using selectedItems property or selectItem(item) and deselectItem(item) methods, the template variable {{selected}} can also be used.

Multi-Selection Column

<vaadin-grid> ships with a helper element <vaadin-grid-selection-column> which provides a checkboxes bound to selection. It also comes with a "select all" checkbox for the header.

Hint: auto-select can be set to enable selecting rows on click.

Note: This is a opt-in feature so vaadin-grid-selection-column.html needs to be explicitly imported.

Custom Select All with Data Provider

When dealing with remote data, "selecting all" can be tricky since pushing every item to selectedItem would require fetching all of the items.

In this example, a custom selection state is used to provide a "select all" functionality without having to fetch all of the items.

Space Key Action and Click to Activate

When a focused cell has child elements, the Space key clicks the first child element.

Clicking a child element inside a cell activates the item, unless either:

• The clicked child is a focusable element, for example, an <input>, a <button>, or has the tabindex attribute.
• The clicked child prevents default action of the click event.
• The clicked child stops propagation of the click event.

Try clicking and pressing Space for the body cell contents in the example below.