Navigate Between Table Cells Using Arrow Keys - Arrow Table

Arrow Table is a jQuery plugin for editable tables that enable the user to navigate between table cells containing input fields (or any other trigger elements) using arrow keys.

Ideal for spreadsheet-like data grid(table) that makes it simple to switch between cells with keyboard interactions.

How to use it:

1. Add input fields to table cells as follows:

<table class="table" id="example">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input></td>
      <td><input class="form-control"></td>
      <td><input class="form-control"></td>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
    <tr>
      <td><input></td>
      <td><input></td>
      <td><input"></td>
    </tr>
    ...
  </tbody>
</table>

2. Include jQuery library and the JavaScript arrow-table.js at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/arrow-table.js"></script>

3. Call the function on the HTML table and the plugin will do the rest.

$('#example').arrowTable();

4. Enable/disable arrow keys.

$('#example').arrowTable({
  enabledKeys: ['left', 'right', 'up', 'down']
});

5. Set the target element the plugin listens for move/key events.

$('#example').arrowTable({
  listenTarget: 'input'
});

6. Set the target element on which the plugin move the focus after the move has completed.

$('#example').arrowTable({
  focusTarget: 'input'
});

7. Set the namespace for the keybinding, etc.

$('#example').arrowTable({
  namespace: 'arrowtable'
});

8. Set the delay in milliseconds for continuous movement when holding down arrow keys.

$('#example').arrowTable({
  continuousDelay: 50
});

9. Callback functions available.

$('#example').arrowTable({

  // Function to call before navigating
  beforeMove: function(input, targetFinder, direction){
    // do something
  },      

  // Function to call after navigating
  afterMove: function(input, targetFinder, direction){
    // do something
  },      

});

---

This awesome jQuery plugin is developed by garygreen. For more Advanced Usages, please check the demo page or visit the official website.