Mat-row-keyboard-selection NPM

MatRowKeyboardSelectionDirective

Demo

https://douglasgsouza.github.io/mat-row-keyboard-selection/

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 :heart: in Brazil.

Getting Started

Installing and Importing

Install the package by command:

    npm install mat-row-keyboard-selection --save

Import the module

import { MatRowKeyboardSelectionModule } from "mat-row-keyboard-selection";

@NgModule({
    imports: [
        ...
        MatRowKeyboardSelectionModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

or import only Directive

import { MatRowKeyboardSelectionDirective } from "mat-row-keyboard-selection";

@NgModule({
    declarations: [MatRowKeyboardSelectionDirective],
})
export class YourModule {}

Using

With <table mat-table>

    <table mat-table [dataSource]="dataSource1">
    ....
    <tr mat-row [matRowKeyboardSelection]="selectionModel" [rowModel]="row" *matRowDef="let row; columns: displayedColumns;"></tr>

With <mat-table>

    <table mat-table [dataSource]="dataSource1">
    ....
    <mat-row [matRowKeyboardSelection]="selectionModel" [rowModel]="row" *matRowDef="let row; columns: displayedColumns;"></mat-row>

Keyboard Keys:

Tab - Focus a row or next element (follow the native tabindex).
Space and Enter - When row focused, toggle row. (Can be disabled with option toggleOnEnter = 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...

    <tr mat-row [matRowKeyboardSelection]="selectionModel" [rowModel]="row" [selectOnFocus]="true" [deselectOnBlur]="true" *matRowDef="let row; columns: displayedColumns;"></tr>

Available options:

selectOnFocus - Automatic select on row focus. (default: false)
- If you have other row selection behaviors such as select on click or checkbox selection I recommend not enable this option and let your component decide when to make selection.
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)