Data table keyboard navigation with arrow keys

brunano21 / angular-4-data-table

An Angular 5 data table, with pagination, sorting, expandable rows, row selection, etc. with basic accessibility support.

MIT License

11 stars 19 forks source link

Data table keyboard navigation with arrow keys #17

Closed veerasrikanthv closed 6 years ago

veerasrikanthv commented 6 years ago

At present i am unable to navigate in side the table with keyboard. How i can navigate the by keyboard arrow keys like left, right, up and down in side the table ?

brunano21 commented 6 years ago

Hi. The library does not support this functionality, because it's not meant to. What are the reasons for looking forward this feature?

veerasrikanthv commented 6 years ago

Because of user have large set of rows and columns and user wants to traverse cell wise focus to read data in the table (for user convenience). And if user wants to make select a particular row by using enter key where the current focus is there on cell.

Could you please help me out, how can i achieve these functionalities either customize API or any other way?

veerasrikanthv commented 6 years ago

Any idea/suggestions to navigate by using keyboard in data table ?

brunano21 commented 6 years ago

Hi @veerasrikanthv, unfortunately, I'm not planning to add this feature at the moment.

brunano21 commented 6 years ago

What you can do is to add an HostListener and implement the keyboard navigation by yourself.

veerasrikanthv commented 6 years ago

Thank you very much for the response. Here i have struct with below implementation.

I have tried to implement by using a focus directive as below. export class FocusDirective implements OnChanges { @Input() focus: boolean; constructor(private element: ElementRef) { } ngOnChanges() { if (this.focus) { this.element.nativeElement.focus(); } } And i have added below code under of "row.template.ts" <td ngFor="let column of dataTable.columns, let colIdx = index" [hide]="!column.visible" [ngClass]="column.styleClassObject" [className]="dataTable.showOnTop ? 'data-column-nowrap' : 'data-column-wrap'" [style.background-color]="column.getCellColor(_this, index)" tabindex="0" (keyup.arrowright)="onKey($event,index,colIdx)" (keyup.arrowleft)="onKey($event,index,colIdx)" (keyup.arrowdown)="onKey($event,rowPos+1,colIdx)" (keyup.arrowup)="onKey($event,index,colIdx)" [focus]="index === rowPos && colIdx === columnPos"> <div ngIf="!column.cellTemplate" [textContent]="item[column.property]">

And below is my onKey method. onKey(event, rowIdx: number, colIdx: number) { const keyCode = event.keyCode; if (keyCode === 37) { // left arrow this.rowPos = rowIdx; this.columnPos = colIdx; this.columnPos -= 1; if (this.columnPos < 0) { this.columnPos = this.dataTable.columnCount - 1; } } else if (keyCode === 38) { // up arrow this.rowPos -= 1; if (this.rowPos < 0) { this.rowPos = 8; } } else if (keyCode === 39) { // right arrow this.rowPos = rowIdx; this.columnPos = colIdx; this.columnPos += 1; if (this.columnPos >= this.dataTable.columnCount) { this.columnPos = 0; } } else if (keyCode === 40) { // down arrow this.rowPos = rowIdx; this.columnPos = colIdx; if (this.rowPos > this.dataTable.rows.toArray().length - 1) { this.rowPos = this.dataTable.rows.toArray().length - 1; } this.dataTable.rows.toArray().forEach(row => { if (row.index === this.rowPos) { row.selected = true; } }); } }

With the above logic i am able to jump to first row cell wise with right arrow but not able to focus down cells(2nd, 3rd etc.. rows), while using down arrow.

Can you please help me out like what i have missed and where should i have to write exactly in API level? Thanks in advance.

brunano21 commented 6 years ago

I guess you should add the host listeners into Table component, where you have available all the rows.