Dynamic Spreadsheet Like Data Grid – jExcel

File Size: 143.5 KB
Views Total: 1581 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author: jspreadsheet
Demo    Download

jExcel is a lightweight vanilla javascript plugin to make astonishing electronic intelligent tables and accounting pages viable with Excel or some other bookkeeping page programming.

Simple to coordinate with any outsider module information control module like information cover, cash organizing, key-esteem dropdown, shading picker and significantly more. Additionally accompanies an onchange overseer which will be terminated on each adjustment in your accounting page.

See Also:

10 Best Data Table/Grid Systems In JavaScript.

How to use it (v4+, Vanilla JS Version):

1. Import the jExcel and jSuites into the document.

<link rel="stylesheet" href="/path/to/jsuites.css" />
<link rel="stylesheet" href="/path/to/jexcel.css" />
<script src="/path/to/jsuites.js"></script>
<script src="/path/to/jexcel.js"></script>

2. Create an empty DIV element to hold your spreadsheet.

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

3. Generate a spreadsheet from data set you provide.

// from JS arrays
jexcel(document.getElementById('demo'), {
  data: [
    // data here
    // columns data here

// from a JSON file
jexcel(document.getElementById('demo'), {
    // columns data here

// from a CSV file
jexcel(document.getElementById('demo'), {
    // columns data here
How to use it (v2.x, jQuery Version):

1. Add references to jQuery library and the jQuery jExcel plugin’s JS & CSS files into the webpage.

<link href="dist/css/jquery.jexcel.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/js/jquery.jexcel.js"></script>

2. Load extensions as per your needs. All possible extensions:

  • Dropdown
  • Calendar picker
  • CSV
  • Formula
<!-- Dropdown -->
<link rel="stylesheet" href="dist/css/jquery.jdropdown.min.css" />
<script src="dist/js/jquery.jdropdown.js"></script>

<!-- Calendar picker -->
<link rel="stylesheet" href="dist/css/jquery.jcalendar.css" />
<script src="dist/js/jquery.jcalendar.js"></script>

<!-- CSV -->
<script src="dist/js/jquery.csv.min.js"></script>

<!-- Formula -->
<script src="dist/js/excel-formula.min.js"></script>

3. Create an empty DIV element that will be served as the container for your spreadsheet.

<div id="demo1"></div>

4. Define an array of JS data to be presented in the spreadsheet.

data1 = [
  ['Google', 1998, 807.80],
  ['Apple', 1976, 116.52],
  ['Yahoo', 1994, 38.66],

5. Initialize the spreadsheet and done.


6. Or load the data from an external JSON file.


7. If you’d like to load an external CSV file into the spreadsheet. Requires the CSV extension.


8. Export the spreadsheet data as a CSV file:



Thanks for make jQuery plugin is developed by jspreadsheet For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins

You Might Also Like