Convert Figma logo to code with AI

jspreadsheet logoce

Jspreadsheet is a lightweight JavaScript data grid component for creating interactive data grids with advanced spreadsheet controls.

6,808
833
6,808
136
View on GitHubView on NPM

Top Related Projects

handsontable's avatar

handsontable

20,732

JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

ag-grid's avatar

ag-grid

13,639

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

SheetJS's avatar

sheetjs

35,498

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

exceljs's avatar

exceljs

14,215

Excel Workbook Manager

mleibman's avatar

SlickGrid

6,814

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

  1. 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 }
    ]
});
  1. Adding a new row programmatically:
spreadsheet.insertRow(['New', 'User', 'new@example.com']);
  1. Applying a custom cell style:
spreadsheet.setStyle('A1', 'background-color', 'yellow');
  1. 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:

  1. 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>
  1. Create a container element in your HTML:
<div id="spreadsheet"></div>
  1. 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 logo

handsontable

20,732

JavaScript Data Grid / Data Table 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 logo

ag-grid

13,639

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 logo

sheetjs

35,498

📗 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 logo

exceljs

14,215

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.

mleibman logo

SlickGrid

6,814

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 Figma logo designs to code with AI

Visual Copilot

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

Try Visual Copilot

README

Jspreadsheet CE v5: The JavaScript spreadsheet

Jexcel CE has been renamed to Jspreadsheet CE

Jspreadsheet CE Use Cases

Jspreadsheet CE 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.

Jspreadsheet Pro - Enterprise Solution

Overview

Why Choose Jspreadsheet CE?

  • 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

Installation

NPM

npm install jspreadsheet-ce

CDN

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/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 CE 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

sampleTable


Development

Build your package

% npm run build

Start a web service

% npm run start

Data Grid Examples

Jspreadsheet Changelog

Jspreadsheet 5.0.0

  • 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;

More information

Jspreadsheet 4.6.0

  • Jexcel renamed to Jspreadsheet.
  • Integration with Jsuites v4.

Jspreadsheet 4.2.3

  • The spreadsheet plugin is now compatible with Jsuites v3.
  • New flags and security implementations.
  • New DOM element references in the toolbar.
  • Worksheet events are now tabbed.

Jspreadsheet 4.0.0

Special thanks to FDL - Fonds de Dotation du Libre for their support and sponsorship, which made the new version possible with many exciting features.

  • Workbook/tab support for spreadsheets.
  • Create dynamic spreadsheets from static HTML elements.
  • Highlight selected cells in the spreadsheet after CTRL+C.
  • Footer with formula support.
  • Multiple column resizing.
  • JSON update support (helpers to update a remote server).
  • Centralized event dispatch method for all spreadsheet events.
  • Custom helpers: =PROGRESS (progress bar), =RATING (5-star rating).
  • Custom formula helpers: =COLUMN, =ROW, =CELL, =TABLE, =VALUE.
  • Dynamic nested header updates.
  • New HTML editing column type.
  • New flags: includeHeadersOnCopy, persistence, filters, autoCasting, freezeColumns.
  • New events: onevent, onchangepage, onbeforesave, onsave.
  • More examples and documentation.

Jspreadsheet 3.9.0

  • New methods.
  • General fixes.

Jspreadsheet 3.6.0

  • Improved spreadsheet formula parsing.
  • New spreadsheet events.
  • New initialization options.
  • General fixes.

Jspreadsheet 3.2.3

  • getMeta, setMeta methods.
  • NPM package with jSuites.
  • General fixes.

Jspreadsheet 3.0.1

Jspreadsheet v3 is a complete rebuild of the JavaScript spreadsheet (previously a jQuery plugin). Due to the changes, full compatibility could not be ensured. If upgrading, your code may require some updates. For more information, refer to the article on upgrading from Jspreadsheet v2 or Handsontable.

New features in Jspreadsheet v3:

  • Drag and drop columns.
  • Resizable rows.
  • Merge columns.
  • Search functionality.
  • Pagination.
  • Lazy loading.
  • Full-screen mode.
  • Image upload.
  • Native color picker.
  • Better mobile compatibility.
  • Enhanced nested headers support.
  • Advanced keyboard navigation.
  • Better hidden column management.
  • Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons.
  • Import from XLSX (experimental).

Major improvements:

  • A new formula engine with faster results and no external dependencies.
  • No use of selectors, leading to faster performance.
  • New native column types.
  • No jQuery required.
  • Examples for React, Vue, and Angular.
  • XLSX support via a custom SheetJS integration (experimental).

Jspreadsheet 2.1.0

  • Mobile touch improvements.
  • Paste fixes and a new CSV parser.

Jspreadsheet 2.0.0

  • New radio column type.
  • New dropdown with autocomplete and multiple selection options.
  • Header/body separation for better scroll and column resize behavior.
  • Text-wrap improvements, including Excel-compatible alt+enter.
  • New set/get meta information.
  • New set/get configuration parameters.
  • Programmatic set/get cell styles.
  • set/get cell comments.
  • Custom toolbar for tables.
  • Responsive calendar picker.

Jspreadsheet 1.5.7

  • Improvements to checkbox column type.
  • Updates to table destruction in jQuery.

Jspreadsheet 1.5.1

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

Jspreadsheet 1.5.0

  • Relative insertRow, deleteRow, insertColumn, deleteColumn. See an example.
  • Redo and undo support for insertRow, deleteRow, insertColumn, deleteColumn, moveRow.
  • New formula column recursive chain.
  • New alternative design option (Bootstrap-like). See an example.
  • updateSettings improvements.

Official websites

Community

Contributing

See contributing

Copyright and license

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

Other tools

NPM DownloadsLast 30 Days