Create spreadsheet like Excel using jQuery jExcel Plugin

0 439

Today I would like 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.

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="https://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.

Leave A Reply

Your email address will not be published.