v2.0.0-alpha2 - Keyboard navigation and Interaction modes, Reordering and Resizing columns

Live demos ↗

API Changes

• auto-select added to <vaadin-grid-selection-column>
• cell-click event was dropped.
• --vaadin-grid-focused-cell style mixin was added

New Features

Keyboard navigation mode

• Now the user can focus the grid and move the focus to the header, body and footer using Tab key, and can move between cells by using Left, Right, Up, Down, PgDn, PgUp, End and Home keys.

Interaction mode

• When the user pushes Enter or F2 he can interact with cell editable content, and exit from edition by using the escape key.

Column Reordering

• The user can change the order of columns by dragging and dropping column headers. It's necessary to enable the feature by using the column-reordering-allowed property

<vaadin-grid items="[[users]]" column-reordering-allowed>
  ...
</vaadin-grid>

Column Resizing

• The new attribute resizable can be applied to columns and groups to allow the user resize them.

<vaadin-grid items="[[users]]">
   <vaadin-grid-column width="30px" flex-grow="0" resizable>
     ...
   </vaadin-grid-column>
   <vaadin-grid-column-group resizable>
    ...
   </vaadin-grid-column-group>
</vaadin-grid>

Other Notable Changes

• Added internal cache for cells improving performance of rendering when modifying column configuration.

Fixes

• Avoid unnecessary clearCache on init
• Fix initialisation on shadow
• Fix handling wheel events