Create spreadsheet like Excel using jQuery jExcel Plugin

Today I would like to share an awesome jquery plugin I found on github for creating spreadsheet with lot’s of excel like feature. In shot you can add excel like sheet on your website with quick excel formula etc. jExcel is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can load data straight to a jExcel table from a JS array, json or even a CSV file. You can copy and paste from or to Excel straight to a jExcel table. You can easily integrate jExcel with other third party jquery plugin to create your own custom columns, custom editors, and much more. jExcel has a plenty of nice features such as key-value dropdown, CSV loading/exporting, multiple spreadsheets and much more.



jExcel - The javascript spreadsheet

Features

  • Make rich web applications
  • Improve your clients software experience
  • Better CRUDS and beautiful UI
  • Compatibility with excel, just copy and paste
  • Powerful customizations
  • Simple to use



Integrate jExcel on your website

It is very easy to use jExcel. just follow the below steps.

Libraries

first you should make you have include the latest jquery core lib and jexcel JS and CSS style.

<!--CSS-->
<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>

HTML

Now you can initiate your table based on a div container, such as:

<div id="mytable"></div>

JS

Finally you can create data arry you need to load on table and initialize a jExcel table you should run a javascript, such as:

<script>
$(function() {   
data = [
    ['Google', 1998, 807.80],
    ['Apple', 1976, 116.52],
    ['Yahoo', 1994, 38.66],
];
 
$('#mytable').jexcel({ data:data, colWidths: [ 300, 80, 100 ] });
});
</script>




Creating a web spreadsheet based on an external CSV file
You easily load a plain csv file as spreadsheet on browser, this feature is helpful to display preview of your excel file with download feature.

<script>
$(function() {  
$('#mytable').jexcel({
    csv:'http://example.com/demo.csv',
    csvHeaders:true,
    colWidths: [70, 200, 300],
});
}
</script>

Download csv file on button click.

<p><button id='download'>Export my spreadsheet as CSV</button></p>
 
$('#download').on('click', function () {
    $('#my').jexcel('download');
})

See live demo and download source code.

DEMO | DOWNLOAD

Above are the just basic example you must see official documentation with lot’s of cool features.

One Reply to “Create spreadsheet like Excel using jQuery jExcel Plugin”

  1. One thing i cannot find anywhere is to add a search box to an inline content editable table. There are so many examples of inline editable tables but no way to filter these tables from a search box. Pls be kind to make an example with even more than one search box if possible to filter multiple columns together.
    Thx for nice tutorials. Your site is 1 of the best on internet. Wish i saw it long ago
    Regards Neels

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.