jspreadsheet

v13.0.1

Published

2 days ago

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

Jspreadsheet – JavaScript Spreadsheet Component

Note: This is the PRO/Commercial version. For the open-source MIT version, see jspreadsheet-ce

🚀 Try Live Demo | 📖 Documentation | 💬 Community

📑 Table of Contents

🌟 What is Jspreadsheet?

Jspreadsheet is a lightweight, high-performance data grid and spreadsheet engine that enables developers to deliver rich, Excel-style editing experiences in modern web applications without any framework dependencies.

Whether you're building a SaaS dashboard, financial modeller, admin portal, or collaborative web app, Jspreadsheet gives you everything you need to create fast, professional, and user-friendly spreadsheet solutions.

🏢 Trusted by Leading Companies

Virgin Media • Samsung • Deloitte • Nissan • Johnson & Johnson • General Electric • Kawasaki • BP • Comcast • Asahikasei • Denso Wave • Moody's • Verizon • Kyocera • Mizuho • Noritz • Lexisnexis

⚡ Quick Start

System Requirements

Node.js: 14.x or higher
Browsers: Chrome 70+, Firefox 65+, Safari 12+, Edge 79+
Dependencies: jsuites v6.x

Installation

Via npm

npm install jspreadsheet@13

Via CDN

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

Basic Usage

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

// Set your license (required for PRO version)
// Get a free trial license at: https://jspreadsheet.com
jspreadsheet.setLicense('YOUR-LICENSE-KEY');

// Create a spreadsheet
const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Product', 'Price', 'Quantity', 'Total'],
            ['Laptop', 999.99, 5, '=B2*C2'],
            ['Mouse', 29.99, 10, '=B3*C3'],
            ['Keyboard', 79.99, 3, '=B4*C4']
        ],
        columns: [
            { type: 'text', title: 'Product', width: 120 },
            { type: 'number', title: 'Price', width: 100, mask: '#,##0.00' },
            { type: 'number', title: 'Quantity', width: 80 },
            { type: 'number', title: 'Total', width: 100, mask: '#,##0.00' }
        ]
    }]
});

🔗 See More Examples

🎬 Live Demo

Experience Jspreadsheet in action with interactive examples:

Live Demo

Jspreadsheet Demo

🎯 Try These Features:

✏️ Edit cells • 🧮 Use formulas • 📋 Copy/paste • ➕ Add rows/columns • 🎨 Format cells • 📊 Sort data

🚀 More Examples:

📈 Charts • 👥 Collaboration • ⚡ Performance

📚 View All Examples →

🎯 Why Choose Jspreadsheet?

⚡ Pure JavaScript Implementation

Built with vanilla JavaScript, Jspreadsheet has zero dependencies and works with any build system or no build system at all. Integrate seamlessly into existing applications without worrying about framework conflicts or version compatibility issues.

🚀 Unmatched Performance & Scalability

Handle massive datasets confidently. A sparse storage engine creates cell records only where there is data, so memory and processing scale with the content, not with the size of the grid, and the virtual rendering engine draws only the visible cells. A million-row worksheet scrolls, sorts and edits smoothly.

👥 Excel Compatible User Experience

Your users already know how to use spreadsheets. Jspreadsheet provides the exact keyboard shortcuts, mouse interactions, copy/paste behavior, and visual feedback that users expect from Excel and Google Sheets.

🏢 Enterprise Ready Architecture

Jspreadsheet adapts to organizations of all sizes, from startups to Fortune 500 firms. It offers robust security features, detailed audit trails, real-time collaboration, and enterprise-level support.

🆕 What's New in Version 13

Version 13 is a ground-up re-architecture of how Jspreadsheet stores, renders and synchronizes spreadsheet data:

🚀 Major Enhancements

| Feature | Description | | :---- | :---- | | 🗂️ Sparse Storage | Cell records are created on demand and organized in pages; memory and processing scale with the data, not with the grid | | 🧩 Modular Architecture | The core is split into ES modules; require() keeps returning the jspreadsheet object | | ↩️ Collaboration-Aware Undo | History follows rows, columns and worksheets by identity, so undo lands on the right cells after changes made by other users | | 🧰 Properties API | setCellProperties, setColumnProperties and setRowProperties: one batch-first API for cells, columns and rows | | 📋 Clipboard API | pasteArea, getClipboard, isClipboardText and paste options such as values, transpose and formatOnly | | 🎨 Conditional Formatting | Duplicate, unique, above and below average, top and bottom rules, data bars, colour scales and stop-if-true | | 🪢 Nested Header Editing | Split, merge, rename and drag groups, from the API or the interface | | 🖱️ Select Then Grab | Click a header to select, then drag the selection to move columns and rows, as in Google Sheets | | 🧮 Dynamic Arrays | The spilled range operator B2# and the Excel intersection operator | | 🔢 Multi-Column Sorting | orderBy([{ column, direction }, ...]) and Shift + double click | | ⌨️ Accessibility | The ARIA grid model, Excel block navigation and Ctrl+D / Ctrl+R fill | | ⚡ Performance | Sorting up to 270x faster, structural changes at a million rows up to 7x faster, sub-millisecond scroll events |

🤖 AI Integration

Integrate your data grid with AI to enable intelligent data processing, natural language queries, and automated insights.

AI Integration

📖 See All v13 Features and the Migration Guide →

🔥 Key Features

📊 Core Spreadsheet Functionality

500+ Excel-Compatible Formulas Every formula your users know and love, implemented with complete Excel compatibility. From basic arithmetic to advanced statistical functions, financial calculations, and text manipulation – if it works in Excel, it works in Jspreadsheet.

Advanced Cell Selection & Editing Multi-cell selection with Ctrl+click, range selection with Shift+click, and full keyboard navigation. Support for cell references, formula auto-completion, and intelligent cell addressing that adapts as you insert or delete rows and columns.

Professional Data Entry Auto-fill sequences, drag-and-drop cell ranges, smart formatting detection, and automatic data type recognition. Your users can work as efficiently as they do in desktop spreadsheet applications.

Undo/Redo System Comprehensive action history with unlimited undo/redo capabilities. Every cell edit, formula change, formatting adjustment, and structural modification is tracked and reversible, and the history follows rows and columns by identity, so undo stays correct while other users edit the same document.

Copy/Paste Full clipboard integration supporting rich formatting, formulas, and cross-application data transfer. Paste from Excel, Google Sheets, or any other spreadsheet application with formatting preservation, paste a part of each cell with the paste options, or move an area with pasteArea without touching the clipboard.

🎨 Advanced Cell Types & Editors

Rich Input Controls Transform static cells into interactive and user-friendly elements:

Dropdown lists with search and custom validation
Checkbox and radio button groups
Date and time pickers with localization
Color pickers with custom palettes
Numeric steppers and sliders
Rich text editors with formatting
File upload cells with preview
Rating controls and progress bars

Custom Editor Framework Build your own cell editors using our comprehensive API. Create specialized input controls for your domain-specific data types, integrate with external services, or build complex multi-field editors for structured data.

Data Validation Engine Enforce specific business rules and input constraints directly within your spreadsheet:

Numeric ranges and precision validation
Date range constraints
Text pattern matching with regex
Custom validation functions
Dropdown value restrictions
Cross-cell validation rules

🎯 Visual Formatting & Styling

Themes & Customization Personalize the appearance of your spreadsheet to fit your exact needs or your brand's identity, with built-in light and dark themes and complete CSS customization capabilities.

Complete Formatting Control Customize your spreadsheet's appearance and behavior:

Font families, sizes, and weights
Text color and background colors
Borders and cell alignment
Number formatting (currency, percentage, scientific)
Date and time formatting with localization
Conditional formatting with custom rules, data bars and colour scales
Cell merging and text wrapping

Charts & Visualization Turn your spreadsheet data into different types of graphical charts:

Line, bar, column, and area charts
Pie and doughnut charts with customizable segments
Scatter plots and bubble charts
Combo charts mixing multiple chart types
Sparklines for in-cell visualizations
Real-time chart updates as data changes

📊 Pivot Tables

Transform raw data into meaningful insights with powerful pivot table functionality:

Drag-and-drop field configuration for rows, columns, values, and filters
Multiple aggregation functions (sum, count, average, min, max, etc.)
Dynamic filtering and sorting capabilities
Expandable/collapsible row and column groups
Custom calculated fields and items
Export pivot table results to various formats

⚡ Performance & Scalability Features

Performance Demo

Sparse Storage Engine Cell records exist only where there is data, organized in pages, so a mostly empty million-row grid costs almost nothing. The same engine runs headless on a server and produces byte-identical documents.

Virtual Rendering Engine Only visible cells are rendered in the DOM, and selection borders are materialized only inside the viewport, enabling smooth performance with unlimited data sizes. Scroll through millions of rows without lag or memory issues.

Intelligent Caching Smart caching algorithms ensure frequently accessed data remains instantly available while optimizing memory usage for large datasets.

Lazy Loading Support Load data on demand as users scroll or navigate, ideal for server-side data sources and real-time feeds.

Mobile Optimization Jspreadsheet is designed to work comfortably on mobile devices:

Pinch-to-zoom for detailed viewing
Touch scrolling with momentum
Long-press context menus
Responsive layout adaptation

📁 Data Import & Export

Excel File Support Powerful Excel file support for .XLS and .XLSX formats with:

All formulas and calculations
Cell formatting and styles
Charts and embedded objects
Multiple worksheets
Named ranges and defined names
Data validation rules

CSV Handling Advanced CSV processing with:

Custom delimiter detection
Encoding handling (UTF-8, Latin-1, etc.)
Quote and escape character processing
Header row detection
Data type inference

JSON Integration Native JSON import/export for seamless integration with REST APIs and modern data sources.

👥 Collaboration Features (Enterprise Edition)

Real-Time Multi-User Editing Multiple users can edit the same spreadsheet simultaneously with:

Conflict resolution algorithms
User presence indicators
Live cursor tracking
Automatic change synchronization
Offline editing with sync on reconnect

Advanced Comments & Annotations Threaded commenting system with:

Rich text comments
@mentions and notifications
Comment resolution tracking
Audit trail maintenance

Version Control Every change is automatically recorded:

Point-in-time restoration
Change highlighting
User attribution
Branching and merging capabilities

Permissions & Security Advanced features to protect your data:

Cell-level permissions
Sheet protection
User role management
Field-level encryption
Audit logging

📖 Complete Feature Documentation →

🛠️ Framework Integration

Jspreadsheet works seamlessly with all major frameworks:

React

npm install @jspreadsheet/react

import React, { useRef } from "react";
import { Spreadsheet } from '@jspreadsheet/react';
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YOUR-LICENSE-KEY';

function App() {
    const spreadsheet = useRef();
    const worksheets = { data: [[1, 2, 3]] };

    return <Spreadsheet ref={spreadsheet} worksheets={worksheets} license={license} />;
}

📖 Docs • 🎮 Examples

Vue.js

npm install @jspreadsheet/vue

<template>
    <Spreadsheet :worksheets="worksheets" :license="license" />
</template>

<script>
import { Spreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YOUR-LICENSE-KEY';

export default {
    components: { Spreadsheet },
    data() {
        return {
            license: license,
            worksheets: { data: [[1, 2, 3]] },
        };
    }
}
</script>

📖 Docs • 🎮 Examples

Angular

npm install jspreadsheet

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

jspreadsheet.setLicense('YOUR-LICENSE-KEY');

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<div #spreadsheet></div>`,
})
export class AppComponent {
  @ViewChild('spreadsheet') spreadsheet!: ElementRef;
  worksheets: jspreadsheet.worksheetInstance[] = [];

  ngAfterViewInit() {
    this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
        worksheets: [{ data: [[1, 2, 3]] }]
    });
  }
}

📖 Docs • 🎮 Examples

All Frameworks

🎮 Live Examples

Explore interactive examples organized by category:

🚀 View All Examples

🎯 Use Cases

💬 What Our Customers Say

"At SplitC we struggled sometimes when users wanted to bulk insert/edit things (sometimes over 100k rows) and we needed performance. Jspreadsheet is probably the fastest spreadsheet component you'll find out there, and with a small bundle size. By the way, support is awesome."
— Lucas Segers, SplitC

"We vetted 10 JavaScript components and we must say that Jspreadsheet comes out as the best."
— Lode Cools, Bizz Control

"The latest version of Jspreadsheet is a powerful data grid tool, providing an excellent front end for our spreadsheet interface. The Jspreadsheet team is helpful and quick to respond."
— Dana Stoesz, PharmacyWire

📚 Documentation & Resources

📖 Getting Started

🔧 Advanced Topics

🎨 Customization

❓ Frequently Asked Questions

Yes, Jspreadsheet is built with vanilla JavaScript and has zero dependencies, making it compatible with any build system including Webpack, Rollup, Parcel, Vite, or no build system at all.

Jspreadsheet supports all modern browsers including Chrome 70+, Firefox 65+, Safari 12+, and Edge 79+. Mobile browsers (iOS Safari, Android Chrome) are fully supported with touch-optimized interactions.

Version 13 handles over 1 million rows with real DOM elements while maintaining smooth scrolling and editing performance. The sparse storage engine stores only the cells that hold data, and the virtual rendering engine ensures only visible cells impact performance.

Yes, Jspreadsheet includes comprehensive TypeScript definitions with full type safety for all APIs, events, and configuration options.

Yes, Excel import (.XLS and .XLSX) is available in Standard, Enterprise, and Ultimate editions with support for formulas, formatting, charts, multiple worksheets, and data validation rules.

Real-time collaboration is available in the Enterprise Edition with features including simultaneous multi-user editing, live cursor tracking, conflict resolution, and offline editing with sync.

View Full FAQ →

📋 Changelog

v13.0.0 🎉

Major Release Highlights:

✨ Sparse Storage - Cell records created on demand; memory and processing scale with the data, not the grid
✨ Collaboration-Aware Undo - History follows rows, columns and worksheets by identity across connected users
✨ Properties API - setCellProperties, setColumnProperties, setRowProperties and their getters, batch first
✨ Clipboard API - pasteArea, getClipboard, isClipboardText and paste options, with the Excel move contract for formulas
✨ Conditional Formatting - Rank and range rules, data bars, colour scales and stop-if-true
✨ Nested Header Editing - Split, merge, rename and drag groups
✨ Select Then Grab - Google Sheets style column and row dragging
✨ Dynamic Arrays - Spilled range operator and intersection operator
✨ Multi-Column Sorting - orderBy levels and Shift + double click
✨ Accessibility - ARIA grid model and Excel block navigation
✨ TypeScript - Definitions updated for every new API

Removed: setProperty, getProperty, getOptions, setColumnOptions, getColumnOptions, the onchangeproperty event, the array form of setPlugins and the worksheet-level toolbar methods. See the migration guide.

v12.0.0 - September 2024

Major Release Highlights:

✨ 1M+ Rows - Support for over 1 million rows with real DOM elements
✨ Pivot Tables - Dynamic data summarization with drag-and-drop configuration
✨ Worksheet Tables - New table feature for structured data management
✨ Style Preservation - Copy/paste from Excel/Google Sheets with formatting
✨ Web Components - Modern web-components-based editors
✨ Multi-Selection - Drag & drop for multiple columns/rows
✨ Mobile Navigation - Completely redesigned touch experience
✨ Accessibility - Enhanced keyboard navigation with IME support

New Extensions:

@jspreadsheet/extensions - Complete collection of extensions
@jspreadsheet/format - Advanced custom editors and cell masking

📖 Full Changelog

📦 Package Information

NPM Package

Package Name: jspreadsheet
Current Version: 13.x
Bundle Size: ~400KB minified, ~140KB gzipped
Dependencies: jsuites v6.x, @jspreadsheet/formula-pro v6.x
TypeScript: Full type definitions included
Module Formats: UMD (browser global, CommonJS and AMD), consumable from ESM through any bundler

Repository

Homepage: https://jspreadsheet.com
Documentation: https://jspreadsheet.com/docs
Issues: https://github.com/jspreadsheet/pro/issues
Community Edition: https://github.com/jspreadsheet/ce

Keywords

spreadsheet, datagrid, data-grid, excel, table, data-table, vanilla-js, javascript, typescript, react, vue, angular, pivot-table, formulas, charts, data-visualization, collaboration, real-time

💬 Community & Support

👋 Join Our Community

GitHub Discussions - Ask questions and share ideas
Stack Overflow - Technical Q&A

📞 Get Support

Standard Edition: Priority email support with 48-hour response time
Enterprise Edition: Dedicated support team and phone support
Ultimate Edition: SLA guarantees with 4-hour response for critical issues

Contact Support

📄 License

Jspreadsheet PRO is available under commercial license options:

Standard Edition: Commercial license for small teams
Enterprise Edition: Full commercial license with premium features
Ultimate Edition: Complete solution with collaboration and advanced features

Looking for the open-source version? Check out jspreadsheet-ce (Community Edition) under MIT License.

View License Details | Compare Editions

🌍 Join Thousands of Developers

Jspreadsheet powers spreadsheet applications across industries — from fintech startups to Fortune 500 enterprises. Join our growing community of developers who are building the future of data manipulation on the web.

Transform your data, empower your users, and accelerate your development with Jspreadsheet.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Jspreadsheet – JavaScript Spreadsheet Component

📑 Table of Contents

🌟 What is Jspreadsheet?

🏢 Trusted by Leading Companies

⚡ Quick Start

System Requirements

Installation

Via npm

Via CDN

Basic Usage

🎬 Live Demo

🎯 Try These Features:

🚀 More Examples:

🎯 Why Choose Jspreadsheet?

⚡ Pure JavaScript Implementation

🚀 Unmatched Performance & Scalability

👥 Excel Compatible User Experience

🏢 Enterprise Ready Architecture

🆕 What's New in Version 13

🚀 Major Enhancements

🤖 AI Integration

🔥 Key Features

📊 Core Spreadsheet Functionality

🎨 Advanced Cell Types & Editors

🎯 Visual Formatting & Styling

📊 Pivot Tables

⚡ Performance & Scalability Features

📁 Data Import & Export

👥 Collaboration Features (Enterprise Edition)

🛠️ Framework Integration

React

Vue.js

Angular

All Frameworks

🎮 Live Examples

🎯 Use Cases

💬 What Our Customers Say

📚 Documentation & Resources

📖 Getting Started

🔧 Advanced Topics

🎨 Customization

❓ Frequently Asked Questions

📋 Changelog

v13.0.0 🎉

v12.0.0 - September 2024

📦 Package Information

NPM Package

Repository

Keywords

💬 Community & Support

👋 Join Our Community

📞 Get Support

📄 License

🌍 Join Thousands of Developers