Excel-Like jQuery Data Table Plugin - xTab

xTab is a jQuery plugin extends the standard Html table to make it behave like a Microsoft Office Excel-like spreadsheet.

See also:

• Excel-like Data Grid Editor For jQuery - handsontable

Basic Usage:

1. Load the latest version of jQuery library and the jQuery xTab plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="xtab.js"></script>
<link rel="stylesheet" href="xtab.css"/>

2. Create an empty container element to place a data table.

<div id="demo"></div>

3. Initialize the plugin to render a spreadsheet in the container you just created.

$(document).ready(function() {
$("#demo").xtab("init", { 
rows: 10, 
cols: 20, 
collabels: true, 
rowlabels: true
});
});

4. Get the table value as an 10x20 string array.

console.log($("#mydiv").xtab("val"));

Change logs:

2018-02-18

• Added col/row highlighting

2015-02-02

• Added col/row highlighting

2014-11-18

• Select on click

2014-09-15

• Updated select+focus

2014-09-01

• Added fixed width + split columns headers

2014-08-29

• Fixed and enhanced examples

2014-08-28

• Improved functions
• Fix.

---

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