Jspreadsheet-plus: The Enhanced JavaScript Spreadsheet

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

Jspreadsheet-plus Use Cases

Jspreadsheet-plus is an extensible framework for building sophisticated data-oriented interfaces with Excel-like controls. By bringing familiar spreadsheet features to your application, you can drastically reduce development time while delivering an interface that users already know how to use, leading to faster adoption and increased productivity. You can use Jspreadsheet in many different applications, such as:

• An editable data grid-based interface to simplify inventory management and production planning in a manufacturing company's ERP system.
• At an educational institution, Jspreadsheet powers grade management systems where teachers can efficiently import and modify student data.
• A logistics company uses Jspreadsheet to create dynamic delivery route planning tables with real-time updates.
• In a research laboratory, scientists use Jspreadsheet to collect and analyze experimental data with custom validation rules.
• At a retail chain, managers use Spreadsheet-based tools to coordinate staff schedules across multiple locations.

Overview

Why Choose Jspreadsheet-plus?

• Create rich, interactive data grid interfaces
• Handle complex data inputs with Excel-like functionality
• Direct Excel compatibility: Copy and paste using standard shortcuts
• Proven success across thousands of implementations
• Lightweight, fast, and intuitive
• Easy integration with third-party plugins
• Built for collaboration and sharing

Screenshot

Installation

NPM

npm install jspreadsheet-plus

CDN

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-plus/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-plus/dist/jspreadsheet.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />

Basic Demo

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

Usage

Add jexcel/jspreadsheet and Jsuites to your html file

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

You should initialize your data grid on a div container, such as:

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

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

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
            ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
        ],
        columns: [
            { type: 'text', title:'Car', width:120 },
            { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw", "Honda" ] },
            { 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

Development

Build your package

% npm run build

Start a web service

% npm run start

Data Grid Examples

• https://bossanova.uk/jspreadsheet/docs/examples/create-from-table
• https://bossanova.uk/jspreadsheet/docs/examples/translations
• https://bossanova.uk/jspreadsheet/docs/examples/table-overflow
• https://bossanova.uk/jspreadsheet/docs/examples/richtext-html-editor
• https://bossanova.uk/jspreadsheet/docs/examples/column-dragging
• https://bossanova.uk/jspreadsheet/docs/examples/web-component
• https://bossanova.uk/jspreadsheet/docs/examples/jquery

Jspreadsheet-plus Changelog

Jspreadsheet-plus 1.0.1

• Separation of spreadsheet and worksheets;
• New worksheet methods and events;
• Dedicated wrappers for React and Vue for better framework integration;
• Modern development environment powered by Webpack;
• Updated architecture aligned with other distributions;

Community

• GitHub

Contributing

See contributing

Copyright and license

Jspreadsheet Plus is released under the [MIT license]. Contact [email protected]

Other tools

• LemonadeJS Reactive Library
• jSuites Components