Excel-Like jQuery Data Table Plugin - xTab

File Size: 5.62 KB
Views Total: 18459
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.