Dynamic Spreadsheet Like Data Grid – jExcel

Table
Demo    Download
File Size: 143.5 KB
Views Total: 683 views
Last Update:September 17, 2021
Publish Date: February 20, 2017
Official Website: Go to website
License: MIT
Plugin Author: jspreadsheet

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:[
    // columns data here
  ]
});

// from a JSON file
jexcel(document.getElementById('demo'), {
  url:'data.json',
  columns:[
    // columns data here
  ]
});

// from a CSV file
jexcel(document.getElementById('demo'), {
  csv:'demo.csv',
  csvHeaders:true,
  columns:[
    // 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.

$('#demo1').jexcel({ 
  data:data1
});

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

$('#demo1').jexcel({ 
  url:'/json'
});

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

$('#demo1').jexcel({
  csv:'demo.csv',
  csvHeaders:true
})

8. Export the spreadsheet data as a CSV file:

$('#demo1').jexcel('download');

Done

List Of Version :
  • v4.6.0
  • v4.5.0
  • v4.4.1
  • v4.2.3
  • v4.2.0
  • v3.6.1
  • v3.5.0
  • v3.4.4
  • v3.3.3
  • v3.0.1
  • v2.1.0
  • v2.0.2
  • v2.0.1
  • v2.0.0
  • 2.0.0
  • 1.5.7
  • 1.5.4
  • 1.5.3
  • 1.5.0
  • 1.3.4
  • 1.3.3
  • 1.2.2
  • 1.2.1
  • 1.0.1

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.