mat-row-keyboard-selection
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    MatRowKeyboardSelectionDirective

    GitHub issues GitHub stars GitHub license

    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

    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)

    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

    Install

    npm i mat-row-keyboard-selection

    DownloadsWeekly Downloads

    19

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    106 kB

    Total Files

    24

    Last publish

    Collaborators

    • douglasgsouza