How can I programmatically disable or remove arrow key navigation on a PrimeNG Table using TypeScript or Angular

Question

I would like to programmatically disable left and right arrow key navigation in a PrimeNG Table using cell editing, without having to modify the Table component source code. See this example: Angular Primeng Tableedit Demo code.

I have tried and succeeded in manually disabling left and right arrow key navigation, if I disable/comment out the onArrowLeft(event) and onArrowRight(event) events in the following script: \node_modules\primeng\fesm2015\primeng-table.js

Is there a better way to successfully disable/remove/override left and right arrow key navigation in a PrimeNG Table that uses cell editing, in code (i.e how can I override the onArrowLeft(event) and onArrowRight(event) events)? Thank you!

Answer 1

There is another way that I found on Github primeng Github issues. Basically, it is using the method stopPropagation() to prevent the event from expanding and thus reaching the directive pEditableColumn which is responsible for the navigation with arrows. You may use the event 'keydown' on your input or any primeng component inside the pCellEditor tag. Hope it helps... Cheers!!!

some samples of how I am implementing it: