Excel-like Interactive Table With Keyboard Navigation - Tablenav

tablenav is a very small jQuery plugin for creating spreadsheet-like data table with input fields and keyboard navigation support just like the Microsoft Excel.

How to use it:

1. Create a regular html table with or without input fields:

<table class="table" id="demo">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
      <td><input type="text" /></td>
    </tr>
  </tbody>
</table>

2. Include jQuery JavaScript library and the JavaScript file jquery.tablenav.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.tablenav.js"></script>

3. Call the function on the html table and activate the input fields.

$("#demo").tablenav({
  input:true
})

4. Add a custom background color to the table celled when selected.

$("#demo").tablenav({
  input:true,
  background:'#89AAE6'
})

5. More config options with default values.

$("#demo").tablenav({

  // z-index property
  zindex:12,

  // default CSS class
  class:'grid-table-clicked',
  
})

Changelog:

2019-11-16

• Update

2018-10-28

• Imporved performance

2018-02-06

• JS Update

About Author:

Author: Naveen DA

Website: https://naveenda.github.io/tablenav/

---

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