jsheet-plus/README.md

Jspreadsheet-plus is an enhanced lightweight, vanilla javascript plugin to create amazing web-based interactive data grids with spreadsheet like controls compatible with Excel, Google Spreadsheets and any other spreadsheet software.

# 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

![The JavaScript spreadsheet](https://bossanova.uk/templates/default/img/jexcel.gif)

## Installation

### NPM

`npm install jspreadsheet-plus`

### CDN

```html
<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](https://codepen.io/hchiam/pen/qBRzXKK)

#### Usage

Add jexcel/jspreadsheet and Jsuites to your html file

```html
<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:

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

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

```javascript
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

![sampleTable](./docs/sampleTable.png)

<br>

## 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](https://github.com/kakalong100/jspreadsheet-plus/issues)

## Contributing

See [contributing](contributing.md)

## Copyright and license

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

## Other tools

- [LemonadeJS Reactive Library](https://lemonadejs.com)
- [jSuites Components](https://jsuites.net)