The javascript spreadsheet v3 - Pro Edition

jExcel is a lightweight, vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with Excel. You can create an excel compatible table from a JS array, JSON or CSV files. You can use your copy from google spreadsheet, excel and paste straight to your jExcel spreadsheet and vice versa. It will be very easy to integrate any third party javascript plugins to create your own custom columns, custom editors, and customize new features to your clients. jExcel has plenty of input options through its native column types to cover the most common web-based application requirements. It is a complete solution for web data management. Create amazing applications with jExcel javascript spreadsheet.


The benefits to embed a javascript spreadsheet and table in your web based applications

With a few simple steps, you can have jExcel integrated into your applications. Impress your clients with better user experience with this amazing data interactive tool.


New jExcel Version

In the new version of jExcel we move away from jquery. This is a complete new version and will require some codes updates if you are upgrating from version 2. If you have questions, you can review the article upgrating from jExcel v2 or Handsontable.

The jExcel v3 brings lot of great new features:

Jexcel 3.0.0

Big improviments are included, such as:


Demo

A very example to integrate the javascript spreadsheet in your website to create your first online spreadsheet. You can check out more advanced examples here.


jExcel instance

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

<div id="spreadsheet"></div>

<script>
var data = [
    ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
    ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];

jexcel(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type: 'text', title:'Car', width:120 },
        { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
        { type: 'calendar', title:'Available', width:200 },
        { type: 'image', title:'Photo', width:120 },
        { type: 'checkbox', title:'Stock', width:80 },
        { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
        { type: 'color', width:100, render:'square', }
     ]
});
</script>
</html>

Download





Javascript spreadsheet examples


Notice: Undefined property: bossanova\View\View::$service in /var/www/jexcel.net/modules/V3/views/jexcel.html on line 204

Fatal error: Uncaught Error: Call to a member function getPages() on null in /var/www/jexcel.net/modules/V3/views/jexcel.html:204 Stack trace: #0 /var/www/jexcel.net/vendor/bossanova/bossanova/src/View/View.php(42): include_once() #1 /var/www/jexcel.net/vendor/bossanova/bossanova/src/Module/Module.php(171): bossanova\View\View->render('modules/V3/view...') #2 /var/www/jexcel.net/vendor/bossanova/bossanova/src/Render/Render.php(480): bossanova\Module\Module->loadView('jexcel', 'V3') #3 /var/www/jexcel.net/vendor/bossanova/bossanova/src/Render/Render.php(358): bossanova\Render\Render::getContent() #4 /var/www/jexcel.net/vendor/bossanova/bossanova/src/Render/Render.php(82): bossanova\Render\Render::execute(NULL) #5 /var/www/jexcel.net/public/index.php(33): bossanova\Render\Render::run() #6 /var/www/jexcel.net/public/v3/index.php(7): include('/var/www/jexcel...') #7 {main} thrown in /var/www/jexcel.net/modules/V3/views/jexcel.html on line 204