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.
In addition to modifying selection using selectedItems property
or selectItem(item) and deselectItem(item) methods,
the template variable {{selected}} can also be used.
<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.
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.
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:
<input>, a <button>, or has
the tabindex attribute.
click event.click event.Try clicking and pressing Space for the body cell contents in the example below.