MatRowKeyboardSelectionDirective
Demo
https://douglasgsouza.github.io/mat-row-keyboard-selection/
Table of contents
About
This is a simple directive that allows navigate Angular Material Data Table with keyboard. This allow Focus MatRow and toogle SelectionModel using keyboard TAB, arrows Up, Down, Enter and Space.
Made with ❤️ in Brazil.
Getting Started
Installing and Importing
Install the package by command:
npm install mat-row-keyboard-selection --save
Import the module
;
or import only Directive
;
Using
With <table mat-table>
....
With <mat-table>
....
Keyboard Keys:
Tab
- Focus a row or next element (follow the native tabindex).Space
andEnter
- When row focused, toggle row. (Can be disabled with optiontoggleOnEnter
=false
)Arrow Down
- Move focus to next row.Arrow Up
- Move focus to previous row.
Case selectOnFocus
is True
model is selected when row is focused.
Options
You can set options...
Available options:
selectOnFocus
- Automatic select on row focus. (default:false
)- If you have other row selection behaviors such as select
on click
orcheckbox selection
I recommend not enable this option and let your component decide when to make selection.
- If you have other row selection behaviors such as select
deselectOnBlur
- Automatic deselect on row blur. (default:false
)toggleOnEnter
- Toggle Row on press Enter or Space. (default:true
)preventNewSelectionOnTab
- Prevent next row Focus on Tab. (default:false
)
Dependencies
- Angular Core
- Angular Material (MatTable, MatTableDataSource, MatRow)
- Angular CDK Collections (SelectionModel)
Tested and made with on Angular 7.3.
License
MIT @ Douglas Gomes de Souza