Oracle JET table, row selection using arrow keys

A common requirement when using tables to display data is the ability to traverse rows using the up and down arrow keys to change selection. You may have another section on the screen displaying additional data for the selected row, so why force the end user to have to use the mouse?

This is not the default behaviour as of version 3.1.0, which took me by surprise having come from using ADF. Although there is no simple attribute to add onto the ojTable data bind, there is support to achieve this without having to write some crude javascript by leveraging the table events.

<table id="myTable" summary="Test Table" aria-label="Test Table"
   data-bind="ojComponent: {component: 'ojTable',
   data: datasource,
   columnsDefault: {sortable: 'enabled'},
   selectionMode: {row : 'single'},
   columns: [
      {headerText: 'Department ID', field: 'DepartmentId'},
      {headerText: 'Department Name', field: 'DepartmentId'},
      {headerText: 'Department Manager', field: 'DepartmentId'}
   ]}, 
   hasFocus: true">
 </table>

Extra: Within the $(document).ready section below, there is a snippet of code that will set the default row of the table to be the first row. This is documented in the JS docs but it caught me out by not specifying that if it isn’t put within the document ready function then it does not attach to the table properly, leaving the initial row selection to not be set.

function beforeCurrentRowListener(event, data)
 {
   var newCurrentRow = data.currentRow;
   
   var rowIndex = newCurrentRow.rowIndex;
   $("#myTable").ojTable("option", "selection", 
         [{startIndex: {"row":rowIndex}, 
           endIndex:{"row":rowIndex}}]);
 }
$(document).ready(
   function()
   {
     $("#myTable").ojTable({
        "ready": function () {
          $("#myTable").ojTable("option", "selection", 
               [{startIndex: {"row": 0},
                 endIndex: {"row": 0}}
               ]
            );
        }
     });
   $('#myTable').on('ojbeforecurrentrow',beforeCurrentRowListener);
   }
 );

Oracle JET tables have the concept of a current row, and a selected row. The selected row is as expected, the row that was selected. The current row is what currently has the dotted border around it as seen in the image below. This does not mean that row is active, and is what happens OOTB when you press arrow up/down.

To make the current row the selected one we make use of the ojbeforecurrentrow event documented here:
http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html#event:beforeCurrentRow

This will capture when the current row changes, providing you with the index of the row. This information can then be used in conjunction with set row selection to change the selected row to the current row http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojTable.html#selection

That is everything that you need to do in order to get row selection working with arrow keys in JET tables. Register a function to run when the ojbeforecurrentrow event is published, in the function extract the current row index and set the selected row index to it.

Additional

If you have optionChange registered on your table to run a function when row selection happens, this this will automatically get run as part of the programatic row selection within the beforeCurrentRowListener function.

If you don’t want instant row selection, and are interested in being able to traverse current rows and have selection using an enter event then see below.

<table id="myTable" summary="Test Table" aria-label="Test Table"
   data-bind="ojComponent: {component: 'ojTable',
   data: datasource,
   columnsDefault: {sortable: 'enabled'},
   selectionMode: {row : 'single'},
   columns: [
      {headerText: 'Department ID', field: 'DepartmentId'},
      {headerText: 'Department Name', field: 'DepartmentId'},
      {headerText: 'Department Manager', field: 'DepartmentId'}
   ]}, 
   hasFocus: true,
   event: {keypress: enterEvent}">
 </table>

What has been added is a generic knockout keypress event on the table, this is not to be added within the ojComponent braces. The function that the keypress event is bound to checks to see if it was enter pressed, if so then it will set the selected row in the same way that the ojbeforecurrentrow event did.

self.enterEvent = function(data ,event){
   if (event.keyCode === 13){
     var currentIndex =
     $("#myTable").ojTable("option","currentRow").rowIndex;
     $("#myTable").ojTable("option", "selection", 
       [{startIndex: {"row":currentIndex}, 
         endIndex:{"row":currentIndex}}]);
   }
   return true;
 };