ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.

6,725

826

6,725

149

View on GitHub View on NPM

Top Related Projects

handsontable

20,191

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

ag-grid

13,037

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

sheetjs

35,258

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

SlickGrid

6,811

A lightning fast JavaScript grid/spreadsheet

Quick Overview

Jspreadsheet/ce is an open-source JavaScript spreadsheet library that allows developers to create web-based spreadsheets and data tables. It provides a lightweight and customizable solution for integrating Excel-like functionality into web applications, offering features such as cell editing, formulas, and data manipulation.

Pros

Lightweight and fast performance
Highly customizable with numerous plugins and extensions
Easy integration with existing web projects
Supports both mouse and touch-based interactions

Cons

Limited advanced features compared to full-fledged spreadsheet applications
Documentation could be more comprehensive
Some advanced functionalities may require additional plugins or custom development
Learning curve for complex implementations

Code Examples

Basic initialization:

var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    data: [
        ['John', 'Doe', 'john@example.com'],
        ['Jane', 'Doe', 'jane@example.com']
    ],
    columns: [
        { type: 'text', title: 'First Name', width: 120 },
        { type: 'text', title: 'Last Name', width: 120 },
        { type: 'text', title: 'Email', width: 250 }
    ]
});

Adding a new row programmatically:

spreadsheet.insertRow(['New', 'User', 'new@example.com']);

Applying a custom cell style:

spreadsheet.setStyle('A1', 'background-color', 'yellow');

Retrieving cell value:

var cellValue = spreadsheet.getValueFromCoords(0, 0);
console.log(cellValue); // Outputs: "John"

Getting Started

To get started with jspreadsheet/ce, follow these steps:

Include the necessary files in your HTML:

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

Create a container element in your HTML:

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

Initialize the spreadsheet in your JavaScript:

var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    data: [['', '']],
    columns: [
        { type: 'text', title: 'Column A', width: 120 },
        { type: 'text', title: 'Column B', width: 120 }
    ]
});

This will create a basic spreadsheet with two columns. You can customize it further by adding more options, data, and functionality as needed.

Competitor Comparisons

handsontable

20,191

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

More extensive feature set, including advanced data manipulation and analysis tools
Better performance with large datasets due to virtual rendering
Stronger enterprise support and documentation

Cons of Handsontable

Steeper learning curve due to more complex API
Higher resource usage, which may impact performance on low-end devices
More expensive licensing for commercial use

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

jSpreadsheet:

jspreadsheet(document.getElementById('spreadsheet'), {
  data: data,
  columns: [
    { type: 'text', title: 'Name', width: 120 },
    { type: 'numeric', title: 'Age', width: 100 }
  ]
});

Both libraries offer similar basic functionality for creating spreadsheets in web applications. Handsontable provides more advanced features out of the box, while jSpreadsheet focuses on simplicity and ease of use. The choice between the two depends on the specific requirements of your project, such as the need for advanced features, performance considerations, and budget constraints.

ag-grid

13,037

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

More feature-rich with advanced functionality like pivoting, grouping, and filtering
Better performance for large datasets (100,000+ rows)
Extensive documentation and community support

Cons of ag-grid

Steeper learning curve due to complexity
Larger file size and potential performance impact for smaller datasets
Commercial license required for some advanced features

Code Comparison

ag-grid:

const gridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ]
};

jspreadsheet:

jspreadsheet(document.getElementById('spreadsheet'), {
  data: [
    ['Toyota', 'Celica', '35000'],
    ['Ford', 'Mondeo', '32000'],
    ['Porsche', 'Boxter', '72000']
  ],
  columns: [
    { type: 'text', title: 'Make', width: 120 },
    { type: 'text', title: 'Model', width: 120 },
    { type: 'numeric', title: 'Price', width: 100, mask: '$ #,##0.00' }
  ]
});

Both libraries offer spreadsheet-like functionality for web applications, but ag-grid is more powerful and complex, while jspreadsheet is simpler and easier to implement for basic use cases.

sheetjs

35,258

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Pros of SheetJS

Broader file format support (XLS, XLSX, CSV, and more)
More comprehensive API for advanced spreadsheet operations
Better performance with large datasets

Cons of SheetJS

Steeper learning curve due to more complex API
Larger file size, which may impact load times
Requires more setup and configuration for basic use cases

Code Comparison

sheetjs:

import * as XLSX from 'xlsx';

const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, "output.xlsx");

jspreadsheet:

import jspreadsheet from 'jspreadsheet-ce';

jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: columns
});

Key Differences

SheetJS focuses on data processing and file manipulation, while jspreadsheet emphasizes UI and interactivity
jspreadsheet provides a more user-friendly interface out of the box
SheetJS offers more flexibility for working with various spreadsheet formats and complex data operations
jspreadsheet is better suited for creating editable spreadsheets within web applications
SheetJS has a larger community and more frequent updates

Both libraries have their strengths, and the choice between them depends on specific project requirements, such as file format support, performance needs, and desired user interface.

exceljs

13,903

Excel Workbook Manager

Pros of ExcelJS

More comprehensive Excel file manipulation (read, write, and modify)
Supports a wider range of Excel features and formulas
Better suited for server-side processing and automation

Cons of ExcelJS

Lacks built-in UI components for spreadsheet rendering
Steeper learning curve for basic spreadsheet operations
Heavier library size, which may impact performance in browser environments

Code Comparison

ExcelJS (Node.js environment):

const Excel = require('exceljs');
const workbook = new Excel.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');
worksheet.getCell('A1').value = 'Hello, World!';
await workbook.xlsx.writeFile('output.xlsx');

Jspreadsheet CE (Browser environment):

const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    data: [['Hello, World!']],
    columns: [{ type: 'text', width: 200 }]
});

Summary

ExcelJS is more powerful for Excel file manipulation and server-side processing, while Jspreadsheet CE excels in creating interactive spreadsheet interfaces in the browser. ExcelJS offers more comprehensive Excel feature support but requires more setup, whereas Jspreadsheet CE provides a simpler API for basic spreadsheet functionality with built-in UI components.

SlickGrid

6,811

A lightning fast JavaScript grid/spreadsheet

Pros of SlickGrid

More advanced data handling capabilities, suitable for large datasets
Highly customizable with extensive plugin ecosystem
Better performance for rendering large grids with many rows

Cons of SlickGrid

Steeper learning curve due to its complexity
Less frequent updates and maintenance compared to jspreadsheet/ce
More challenging to implement basic spreadsheet functionality

Code Comparison

SlickGrid:

var grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onCellChange.subscribe(function (e, args) {
  // Handle cell change
});

jspreadsheet/ce:

jspreadsheet(document.getElementById('spreadsheet'), {
  data: data,
  columns: columns,
  onchange: function(instance, cell, x, y, value) {
    // Handle cell change
  }
});

Summary

SlickGrid excels in handling large datasets and offers extensive customization options, making it suitable for complex data grid applications. However, it has a steeper learning curve and may be overkill for simpler spreadsheet needs. jspreadsheet/ce, on the other hand, provides an easier-to-use solution for basic spreadsheet functionality but may not be as performant for very large datasets. The choice between the two depends on the specific requirements of your project, such as data size, complexity, and desired features.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Jspreadsheet CE v4: The JavaScript spreadsheet

Jexcel CE has been renamed to Jspreadsheet CE

Jspreadsheet CE is a lightweight Vanilla JavaScript data grid 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

Jspreadsheet Pro

Main advantages

Make rich and user-friendly data grid interfaces with excel controls.
You can easily handle complicated data inputs in a way users are used.
Improve your user software experience.
Create rich CRUDS and beautiful UI.
Compatibility with excel: users can move data around with common copy and paste shortcuts.
Easy customizations with easy third-party plugin integrations.
Lean, fast and simple to use.
Speed up your work dealing with difficult data entry in a web-based software.

Screenshot

The JavaScript spreadsheet

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

Development

Build your package

% npm run build

Start a web service

% npm run start

Data grid examples

React Implementation
A full example on how to integrate Jspreadsheet CE with React.
VUE Implementation
A full example on how to integrate Jspreadsheet CE with Vue.
Search and pagination
Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables.
Column types
Learn more about the powerful column types. This example brings all native column types and how to create your own custom type.
Javascript dropdown
Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing JavaScript tables using categories and images in your dropdowns.
Javascript calendar
Example from basic to advanced calendar usage, date and datetime picker.
Image upload
This examples shows how to upload images to your spreadsheet.
Programmatically updates
How to update your spreadsheet and its data by JavaScript.
Table Style
Bring a very special touch to your applications customizing your JavaScript spreadsheet.
Events
Learn how to handle events on Jspreadsheet CE.
Importing data
How to import data from an external CSV, json file or XLSX.
Formulas
Unleash the power of your tables bringing formulas and custom JavaScript methods on your Jspreadsheet spreadsheet.
Custom toolbars
Full example on how to enable nor customize your JavaScript spreadsheet toolbar.
Column comments
Allow comments in your table spreadsheet.
Headers
Enabled nested headers in your spreadsheet and learn how to set or get header values.
Translations
How to translate the default messages from Jspreadsheet.
Merged cells
Full example on how to handle merge cells in your JavaScript tables.
Sorting columns
Example how to sort the table by a column via JavaScript.
Lazy loading
This example brings a very nice feature to deal with large table datasets.

Jspreadsheet CE History

Jspreadsheet CE 4.2.0

Paste on larger and proportional areas
New webpack development ENV.
npm run test

Jspreadsheet CE 4.13.0

FormulaJS integration
Webpack integration

Jspreadsheet CE 4.6

Jexcel has been renamed to Jspreadsheet

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.

Support workbooks/tabs
Create a dymic jexcel table from a HTML static element
Highlight the border from cells after CTRL+C
Footer with formula support
Multiple columns resize
JSON update support (Helpers to update a remote server)
Global super event (centralized method to dispatch all events in one)
Custom helpers: =PROGRESS (progressbar), =RATING (5 star rating)
Custom helpers: =COLUMN, =ROW, =CELL, =TABLE, =VALUE information to be used on formula execution
Dynamic nested header updates
A new column type for HTML editing
New flags such as: includeHeadersOnCopy, persistance, filters, autoCasting, freezeColumns
New events such as: onevent, onchangepage, onbeforesave, onsave
More examples and documentation

Jspreadsheet CE 3.9.0 (Jexcel)

New methods
General fixes

Jspreadsheet CE 3.6.0 (Jexcel)

Better formula parsing
New events
New initialization options
General fixes

Jspreadsheet CE 3.2.3 (Jexcel)

getMeta, setMeta methods
Npm package with jSuites
General fixes

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:

Drag and drop columns.
Resizable rows.
Merge columns.
Search.
Pagination.
Lazy loading.
Full screen flag.
Image upload.
Native color picker.
Better mobile compatibility.
Better nested headers compatibility.
Amazing keyboard navigation support.
Better hidden column management.
Great data picker: dropdown, autocomplete, multiple, group options and icons.
Importing from XLSX (experimental).

Big improvements are included, such as:

Complete new formula engine with no external dependencies with much faster results.
Absolutely no selectors, means a much faster application.
New native columns.
jQuery is not required anymore.
React, Vue and Angular examples.
XLSX support using a custom sheetjs (experimental).

Jspreadsheet CE 2.1.0 (Jexcel)

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

Mobile touch fixes.
Paste fixes & New CSV parser.

Jspreadsheet CE 2.0.0 (Jexcel)

New radio column.
New dropdown with autocomplete and multiple selection options.
Header/body separation for a better scroll/column resize behavior and compatibility.
Better text-wrap including alt+enter excel compatibility.
New set/get meta information.
New set/get config parameters.
New set/get programmatically cell style.
New set/get cell comments.
New table custom toolbar.
New responsive calendar picker.

Jspreadsheet CE 1.5.7 (Jexcel)

Checkbox column type improvements.
Destroy jQuery table updates.

Jspreadsheet CE 1.5.1 (Jexcel)

Spreadsheet data overflow and fixed headers. See an example.
Navigation improvements.

Jspreadsheet CE 1.5.0 (Jexcel)

Relative insertRow, deleteRow, insertColumn, deleteColumn.
Redo, Undo action tracker for insertRow, deleteRow, insertColumn, deleteColumn, moveRow.
New formula column recursive chain.
New alternative design option bootstrap-like.
updateSettings updates.

Official websites

Community

GitHub

Contributing

See contributing

Copyright and license

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

Other tools

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

Context menu plugin

Documentation

Examples

Input mask plugin

Documentation

Examples

JavaScript Modal

Documentation

Examples

Rich HTML Forms

Documentation

Examples

JavaScript rating plugin

Documentation

Examples

Events

Integrations

JavaScript toolbar

Documentation

Examples

Text editor plugin

Documentation

Examples

Picker plugin

Documentation

Examples

Integrations

Image slider plugin

Documentation

Examples

Basic

All Components

Core

Extensions

Components

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot