<vaadin-grid> ships with a helper element <vaadin-grid-selection-column>
that renders checkboxes bound to the selection state of the grid on every row.
It also adds a "select all" checkbox to the column header when items array is used
as the grid's data source.
The selected items can be accessed through the grid's selectedItems property. Each time
the selection state changes, grid dispatches a "selected-items-changed" event.
Hint: Use autoSelect to enable selecting rows on click.
NOTE: You must explicitly import the vaadin-grid-selection-column in order to use it.
When a row is clicked or the space key is pressed while a row cell is in focus,
the related item object is assigned as the grid's activeItem.
To programmatically select items, the activeItem, for example, could be
added to the grid's selectedItems array.
The methods selectItem(item) and deselectItem(item) can also be used
to select or deselect items.
In the example below, the grid's selectedItems array is replaced
whenever activeItem changes, making it single-selectable.
When dealing with remote data, "selecting all" can get tricky when it comes to
reflecting the full data set to the grid's selectedItems array.
In this example, a custom selection state is used to implement "select all"
functionality without having to include all the items to selectedItems.
The selected property of the rowData renderer parameter is used
here to reflect the item's selection state to a checkbox on the corresponding row.
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.
In addition to modifying selection using selectedItems property
or selectItem(item) and deselectItem(item) methods,
with Polymer templates, the instance property {{selected}} can also be
toggled to apply selection.