Getting started

Jexcel is a JavaScript vanilla plugin to create online data grids that fell like a spreadsheet. Bring life to your datasets and improve the user experience of your web-based applications.


Installation

Please choose one of the following options:

NPM
CDN
Download

To install jexcel using NPM

% npm install jexcel-pro

To integrate jexcel on your application using our CDN

<script src="https://jexcel.net/v7/jexcel.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />

To download jexcel and install on local project

https://jexcel.net/v7/jexcel.zip


License key

The license key on version v7+ works as a certificate. Each certificate has an expiration date and should be updated in the same frequency of the chosen subscription plan. The developer should update that manually or they can create an automatic API request to update that automatically. For convenience, it is possible to activate the automatic certificate management, which allows Jexcel to download a new certificate automatically.

Apart from the latter option, there is no online validation. So, all certificates work and are validated in offline mode. To avoid causing any disruption, Jexcel will continue working with an expired certificate for 30 days. After that, the spreadsheet would be shown in read-only mode. The certificate can be generated using an online account. For evaluation, a certificate can be generated using a demo account for free and the certificate would be valid for 30 days.

Create an demo account for free



Create your first spreadsheet

A Jexcel spreadsheet can be created from an HTML table element, a JS array, a CSV or a JSON file, as below:

Array
JSON
CSV
Static Table

Create a spreadsheet from a JavaScript array

<html>
<script src="https://jexcel.net/v7/jexcel.js"></script>
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />

<div id='spreadsheet'></div>

<script>
data = [
    ['Mazda', 2001, 2000],
    ['Pegeout', 2010, 5000],
    ['Honda Fit', 2009, 3000],
    ['Honda CRV', 2010, 6000],
];

jexcel(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
        { title:'Model', width:'300px' },
        { title:'Price', width:'80px' },
        { title:'Model', width:'100px' }
    ]
});
</script>
</html>

Create a spreadsheet from a JSON object

<html>
<script src="https://jexcel.net/v7/jexcel.js"></script>
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />

<div id='spreadsheet'></div>

<script>
jexcel(document.getElementById('spreadsheet'), {
    data: [
        { name:'Jorge', id:'3', age:'40', gender:'Male' },
        { name:'Cosme Sergio', id:'4', age:'48', gender:'Male' },
        { name:'Jorgina Santos', id:'5', age:'32', gender:'Female' },
    ],
    columns: [
        { type:'text', width:'300px', name:'id' },
        { type:'text', width:'200px', name:'name' },
        { type:'text', width:'100px', name:'age' },
        { type:'hidden', name:'gender' },
     ]
});
</script>
</html>

Create a spreadsheet from a CSV file

<html>
<script src="https://jexcel.net/v7/jexcel.js"></script>
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />

<div id='spreadsheet'></div>

<script>
jexcel(document.getElementById('spreadsheet'), {
    csv: 'demo.csv',
    csvHeaders: true,
    columns: [
        { width:300 },
        { width:80 },
        { width:100 }
    ]
});
</script>
</html>

Create a spreadsheet from a existing HTML table element

<html>
<script src="https://jexcel.net/v7/jexcel.js"></script>
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />

<h4>The Official Top biggest albums of 2019</h4>

<table id="spreadsheet">
<thead>
<tr>
<td>POS</td>
<td>TITLE</td>
<td>ARTIST</td>
<td>PEAK</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>DIVINELY UNINSPIRED TO A HELLISH EXTENT</td>
<td>LEWIS CAPALDI</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>NO 6 COLLABORATIONS PROJECT</td>
<td>ED SHEERAN</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>THE GREATEST SHOWMAN</td>
<td>MOTION PICTURE CAST RECORDING</td>
<td>1</td>
</tbody>
</table>

<br>

<script>
jexcel(document.getElementById('spreadsheet')); 
</script>
</html>

NOTE: A table will be generate in read-only mode if no license is provided. Evaluation certificate is available for 30 days for free.


See a working example


Destroy an existing spreadsheet

It is possible to destroy a spreadsheet, all data and events related.

<html>
<script src="https://jexcel.net/v7/jexcel.js"></script>
<script src="https://jexcel.net/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" />

<div id='spreadsheet'></div>

<script>
var myInstance = jexcel(document.getElementById('spreadsheet'), {
    csv: 'demo.csv',
    csvHeaders: true,
    columns: [
        { width: '300px' },
        { width: '100px' },
        { width: '100px' },
    ]
});

// If second argument is true will destroy
// all handlers and you can't create any other instance.
jexcel.destroy(myInstance, true);
</script>
</html>