Recommand · October 1, 2021 0

Select Rows On PrimeNG Table With Keypress

Stackblitz

I am working with a PrimeNG table, and am trying to select the row of a pSelectableRow by keypress.

I have a global search input that will filter all results of the table, and when the user is done searching, I would like them to be able to click a button on the keyboard and have the row selected from the filtered options.

Currently, if a user is searching and the input box has the focus, they can press tab , but they must press 5 times in order to get down to to first row (more if there are more columns).

Is it possible to select a row element within the app component via typescript or other method where on a keypress, the first row would be selected? Then of course, the user could press enter to actually select the row. The up and down arrows work once the rows are active, but you need to get to the rows first.

I have set up a hotkey function inside of my app so that the f1 key triggers an event:

this.addShortcut({ keys: 'f1' }).subscribe(() => {
  this.showMessage();
  console.log(this.table.value);
});

This is showing a message from the PrimeNG message service to make sure the hotkey is working, and it is also logging the value of the table to the console. I have looked through the table and there doesn’t seem to be any way of selecting a row. I have tried setting the this.table.selection = this.table.value[1] and this does store the [1] array item as the "selected value", but this does not actually select any item from the table.

Is there a better way of doing this?
For simplicity of the code required to make this reproducible in StackOverflow, I have included a stackblitz instead.
Here is a stackblitz.