Home

Awesome

Jspreadsheet CE v4: The JavaScript spreadsheet

<b>Jexcel CE</b> has been renamed to <b>Jspreadsheet CE</b><br><br>

<br>

Jspreadsheet CE is a lightweight Vanilla JavaScript <b>data grid</b> plugin to create amazing web-based interactive HTML tables, and spreadsheets compatible data grid with other spreadsheet software. You can create an online spreadsheet table from a JS array, JSON, CSV or XSLX files. You can copy from excel and paste straight to your Jspreadsheet CE spreadsheet and vice versa. It is very easy to integrate any third party JavaScript plugins to create your own custom columns, custom editors, and customize any feature into your application. Jspreadsheet CE has plenty of different 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 Jspreadsheet CE JavaScript spreadsheet.

Jspreadsheet Pro - Enterprise Solution

<br>

Main advantages

Screenshot

The JavaScript spreadsheet

<br>

Installation

As node package

npm install jspreadsheet-ce

As standalone library/js plugin

Download ZIP

put and use the files of dist folder in your project (js library and css files)

With a framework

See examples section for code examples of jspreadsheets with popular frameworks

Basic demo

A basic example to integrate the Jspreadsheet in your website to create your first rich data grid. https://codepen.io/hchiam/pen/qBRzXKK

Usage

Add jexcel/jspreadsheet and jsuites to your html file

<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/docs/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/docs/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />

You should initialize your table based on a div container, such as:

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

To initialize a Jspreadsheet CE table you should run JavaScript, such as:

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

jspreadsheet(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', }
    ]
});

Serve your html file and then you will get the rendered table in your browser

sampleTable

<br>

Development

Build your package

% npm run build

Start a web service

% npm run start

<br>

Data grid examples

<br>

Jspreadsheet CE History

Jspreadsheet CE 4.2.0

Jspreadsheet CE 4.13.0

Jspreadsheet CE 4.6

<b>Jexcel</b> has been renamed to <b>Jspreadsheet</b>

Jspreadsheet CE 4.0.0

A special thank to the FDL - Fonds de Dotation du Libre support and sponsorship that make this version possible with so many nice features.

Jspreadsheet CE 3.9.0 (Jexcel)

Jspreadsheet CE 3.6.0 (Jexcel)

Jspreadsheet CE 3.2.3 (Jexcel)

Jspreadsheet CE 3.0.1 (Jexcel)

Jspreadsheet CE v3 is a complete rebuilt JavaScript Vanilla version. For that reason it was not possible to keep a complete compatibility with the previous version. If you are upgrading you might need to implement a few updates in your code. If you have questions, you can review the article upgrading from Jspreadsheet CE v2 or Handsontable.

The Jspreadsheet CE v3 brings lot of great new features:

Big improvements are included, such as:

Jspreadsheet CE 2.1.0 (Jexcel)

We are glad to bring you the latest jQuery plugin version, with the following improvements:

Jspreadsheet CE 2.0.0 (Jexcel)

Jspreadsheet CE 1.5.7 (Jexcel)

Jspreadsheet CE 1.5.1 (Jexcel)

Jspreadsheet CE 1.5.0 (Jexcel)

<br>

Official websites

Community

<br>

Contributing

See contributing

<br>

Copyright and license

Jspreadsheet CE is released under the [MIT license]. Contact contact@jspreadsheet.com

<br>

Other tools

<br>

jSuites

Image cropper

Documentation

Examples

Integrations

Javascript Template

Documentation

Examples

JavaScript Organogram

Documentation

Examples

Integrations

Javascript Heatmap

Documentation

Examples

Core features

Core

Helpers

JavaScript Dropdown

Documentation

Examples

Integrations

JavaScript Calendar

Documentation

Examples

Integrations

Tags and keywords

Documentation

Examples

Integrations

JavaScript tabs plugin

Documentation

Examples

Color picker plugin

Documentation

Examples

Examples

Context menu plugin

Documentation

Examples

Input mask plugin

Documentation

Examples

JavaScript Modal

Documentation

Examples

Rich HTML Forms

Documentation

Examples

JavaScript rating plugin

Documentation

Examples

Integrations

JavaScript toolbar

Documentation

Examples

Text editor plugin

Documentation

Examples

Picker plugin

Documentation

Examples

Integrations

Image slider plugin

Documentation

Examples

All Components

Core

Extensions

Components