The World's #1 Selling JavaScript Spreadsheet With Over 500 Excel Functions

SpreadJS delivers a robust JavaScript spreadsheet experience, featuring support for worksheets, row and column headers, a status bar, and more. It includes comprehensive features to provide a complete Microsoft Excel-like experience - even for your Excel power users - including charts, tables, shapes, sparklines, conditional formatting, functions and filtering and so much more. With support for seamless Excel import and export, you can easily integrate your existing spreadsheet data and create and share reports without any dependency on Microsoft Excel.

• View Demos and Code
• Learn More About the Familiar JavaScript Spreadsheet Experience

SpreadJS has been designed and optimized from the ground up for fast performance that can handle your most demanding spreadsheet files and datasets. The powerful Calc Engine offers 500+ functions in 19 Languages that includes statistical and financial functions, dynamic arrays and custom user defined functions that are optimized for big data, complex calculations, and advanced Excel models.

• View Demo
• See the Best Practices Documentation

SpreadJS offers comprehensive control over your JavaScript spreadsheets, allowing developers to have precise control over what areas of the spreadsheet data - such as cells, rows, columns, sheets and formulas - can be accessed or edited by the user. With the extensive API, you can secure, manage and help eliminate risk such as for Regulatory compliance while keeping the same Excel spreadsheet functionality your users love online but in your controlled and secure environment.

• View Demos and Code
• See the SpreadJS Major Features Documentation

Create and customize spreadsheets without writing a single line of code using the SpreadJS Desktop Designer and optional Designer Ribbon Component add-on. The Desktop Designer provides developers a user-friendly interface for building templates, while the Designer Ribbon Component allows developers to embed a full-featured designer ribbon UI into their applications, complete with a customizable ribbon, formula bar, and status bar. Enable your end-users to easily design, format, and manage complex spreadsheets directly within your web apps.

• View Demo
• Learn More About the JavaScript Spreadsheet Designers

Import and Export .xlsx files from JavaScript Apps

Import & Export Excel Files

Comprehensive support for importing and exporting Excel files in JavaScript. Easily load complex .xlsx files into your application using the import method, modify the data or structure, and export it back to Excel or save it to a database using the export method. This process allows for seamless integration of Excel-based data handling in your web applications.

• View Demo and Code
• Import/Export .xlsx Excel Documentation

Interactive JavaScript Spreadsheet Form

Interactive Forms

Build complex, interactive data entry forms for JavaScript applications. Utilize advanced features like cell formatting, formulas, and a range of form controls—such as buttons, listboxes, combo boxes, and much more—to create dynamic and fully customized input forms. These forms can handle intricate data collection needs, making them ideal for various business applications.

• View Demo and Code
• Form Controls Documentation

Financial JavaScript Spreadsheet Reports

Financial Reports & Analysis

Create powerful JavaScript spreadsheets for financial reporting, budgeting, forecasting, and other business applications. Easily build solutions for Aging Reports, Expense Budgets, Income Statements, Profit and Loss Projections, and more. These spreadsheets are tailor-made for real-time data analysis and decision-making, enabling businesses to gain insights quickly and accurately.

• View Demo and Code
• Learn More About Fintech and Financial Apps

Interactive Spreadsheet Business Dashboard

Interactive Dashboards

Create interactive dashboards for your JavaScript applications with built-in charts, sparklines, tables, images, and more. These dashboards are perfect for tracking financial KPIs, project management, gradebooks, medical data, and various other business applications. Easily visualize key metrics and insights, making them ideal for real-time decision-making and performance monitoring.

• View Demo and Code

Loan Amount Calculator in JS Spreadsheet Component

Advanced Data Analysis

SpreadJS provides advanced data analysis capabilities, enabling dynamic data manipulation, extensive formula support, interactive visualizations, and optional pivot tables for generating powerful insights. It allows users to perform complex calculations, analyze large datasets, and create visually engaging reports—all within a JavaScript environment. Perfect for applications that demand high-performance data processing and analysis.

• View Demo and Code

Spreadsheet Diagram Creation

Interactive Diagram Creation

Enable interactive flowcharts, spatial layout visualization, and mind mapping in your JavaScript applications with SpreadJS’s robust shapes support. Use built-in shapes and connectors to visualize complex relationships and enhance data presentation. These features allow you to easily create workflows, organizational charts, or intricate data connections, improving communication and understanding of complex concepts. Ideal for business processes, project management, and educational tools.

• View Demo and Code
• Shape Documentation

Performance Benchmark Demo

Performance Benchmark

SpreadJS delivers exceptional performance, effortlessly handling large datasets. It can populate 2 million cells in under a second while allowing quick adjustments to properties, ensuring smooth user interactions even with extensive data. With SpreadJS, your applications can efficiently manage high-volume data, making it ideal for enterprise-level reporting, analysis, and data-driven decision-making.

• View Live Demo

Import and Export .xlsx files from JavaScript Apps

Import & Export Excel Files

Comprehensive support for importing and exporting Excel files in JavaScript. Easily load complex .xlsx files into your application using the import method, modify the data or structure, and export it back to Excel or save it to a database using the export method. This process allows for seamless integration of Excel-based data handling in your web applications.

• View Demo and Code
• Import/Export .xlsx Excel Documentation

Optimized .sjs File Type

Import & Export Optimized SJS Files

SpreadJS uses its proprietary optimized .sjs file format to save and load spreadsheets, ensuring that all features, styles, and data are fully preserved for seamless sharing within applications. Using the workbooks openand save methods, users can easily import and export .sjs files, retaining complex formatting, formulas, and interactive elements. This enables consistent, fully functional file sharing, ideal for collaborative and data-driven JavaScript applications.

• View Demo and Code
• SpreadJS File Format Documentation

Import & Export XLSM Files in JavaScript Spreadsheet Apps

Import & Export XLSM Files

SpreadJS supports lossless import and export of Excel Macro-Enabled Workbook (.xlsm) files, keeping all embedded VBA macros intact for use in Microsoft Excel. While macros remain in the file, SpreadJS does not support, execute, or display macro code. Users can open, edit, and save .xlsm files without breaking macro functionality in Excel. Exporting to non-macro formats like .xlsx or .ssjson will remove macros. Due to Excel’s security model, users may be prompted to enable macros when opening these files in Excel.

• View Demo and Code
• Import & Export with Macros Documentation

Import & Export XLTM Files using JavaScript

Import & Export XLTM Files

SpreadJS enables seamless import and export of Excel Macro-Enabled Template (.xltm) files, retaining all embedded VBA macros for use in Microsoft Excel. However, macros are not supported, executed, or editable in SpreadJS. This ensures that Excel can still run the macros after saving from SpreadJS. Exporting to other formats such as .xlsx or .sjs will remove all macro content. When reopening these files in Excel, users may need to manually enable macros due to Excel’s security settings.

• View Demo and Code
• Import & Export with Macros Documentation

Export Spreadsheets to PDFs in JS Apps

Exporting to PDF

SpreadJS enables direct PDF export from JavaScript spreadsheet applications with the savePDF method, allowing users to convert imported Excel (.xlsx) files into high-quality PDFs. Customize your PDF exports using the printInfo object to adjust settings like margins, headers, footers, and orientation, providing precise control over the final output. This feature is perfect for generating professional, print-ready reports and documents directly from your JavaScript applications.

• View Demo and Code
• Export to PDF Documentation

Import and Export .csv files from JavaScript apps.

Import & Export CSV Files

SpreadJS makes it easy to import and export of .csv files, streamlining data exchange between your spreadsheet and other applications. Use the setCsv method to load data from a comma-separated file directly into your spreadsheet, and the getCsv method to export it back. This efficient handling makes it simple to integrate, manipulate, and share data, ideal for applications requiring flexible data management.

• View Demo and Code
• Import & Export .csv Files Documentation

Export Spreadsheet Charts to PNGs using JavaScript

Export Charts to Images

Export JavaScript charts as images in popular formats like PNG or JPEG, making it easy to share or embed high-quality visuals in reports, presentations, or websites. Use the chart classes toImageSrc method to convert your charts into image files, ensuring crisp, clear visuals that enhance data presentation and provide flexibility for sharing insights across various platforms.

• Export Charts as Images Documentation

Export Spreadsheet Range to HTML using JavaScript

Export Spreadsheet Range to HTML

Create business reports for your JavaScript applications, such as Accounts Receivable reports, Expense Budgets, Income Statements, and Inventory trackers. You can then use the toHTML method of the CellRange class to export relevant data ranges to HTML, enabling easy integration into other web applications for seamless viewing and sharing of report data.

• View Demo and Code
• Export Range to HTML Documentation

Advanced JavaScript Calculations

Advanced Calculations

SpreadJS supports over 500 built-in functions, providing a comprehensive engine for data analysis and complex calculations in JavaScript applications. Easily input functions like SUM or leverage the setFormula method to apply formulas directly to cells, enabling powerful data processing and precise analysis. This flexibility, combined with SpreadJS’s extensive function library, makes it ideal for handling intricate data requirements.

• View Demo and Code
• Formulas Documentation
• Learn More About Advanced Spreadsheet Calculations & Formulas

Create Formula Text Boxes in JavaScript Apps

Create Formula Text Boxes

Enhance your application by allowing users to view, edit, and create formulas directly in a formula text box. With SpreadJS, users can easily input formulas and use the range selector button to select cell ranges for referencing, streamlining formula creation and editing. This feature provides a user-friendly interface for managing calculations, making it easier to interact with complex formulas within workbooks.

• View Demo and Code
• Formula Text Box Documentation

JavaScript Formula Editor Panel

Formula Editor Panel

Streamline the creation and editing of complex formulas with SpreadJS's Formula Editor Panel. This feature provides a user-friendly interface with collapsible views, syntax highlighting, and tooltip support, making it easy to edit, debug, and understand intricate formulas. Designed for efficiency, the panel simplifies formula management for users at all experience levels.

• View Demo and Code
• Formula Editor Panel Documentation

Custom JavaScript Spreadsheet Functions

Custom Functions

Easily create and integrate custom functions, tailoring calculations to meet your specific application needs. Define unique formulas and implement them seamlessly alongside built-in functions, giving you the flexibility to handle specialized data analysis and processing. Custom functions can be added directly to your spreadsheet, enhancing its capability to address complex business requirements.

• View Demo and Code
• Create Custom Formulas Documentation

Dynamic Arrays

Dynamic & Spilled Arrays

SpreadJS offers dynamic array support as an enhancement over traditional array formulas. Dynamic array formulas can return multiple results, automatically adjusting to accommodate these values without requiring manual adjustments. Formulas that yield multiple results are termed "spilled array formulas," enabling a more flexible, responsive calculation experience in your applications. This functionality is ideal for scenarios involving extensive data sets or complex calculations requiring real-time updates.

• View Demo and Code
• Dynamic Array Formulas Documentation

Iterative Calculations

Iterative Calculations

Incremental calculations allow users to reuse previous results and refine outcomes through repeated recalculations. To enable this functionality in SpreadJS, set the iterativeCalculation property to true, allowing adjustments to continue until a specific target is met—ideal for complex financial models and forecasting scenarios. You can also perform what-if analysis with the CalcEngine.goalSeek function, which uses iterative calculations in SpreadJS to determine the necessary input for achieving desired results.

• View Demo and Code
• Iterative Calculations Documentation

Formula Auditing in JS Spreadsheets

Formula Auditing

SpreadJS provides extensive support for formula auditing, enabling users to analyze relationships between formulas and cells within a worksheet. Using the getDependents and getPrecedents methods, you can trace dependent and precedent cells, visually displaying connections to help troubleshoot and understand complex calculations. This functionality is invaluable for auditing large or intricate spreadsheets, ensuring accuracy and transparency in data handling.

• View Demo and Code
• Formula Auditing Documentation

Array Formulas

Array Formulas

Array formulas, commonly known as CSE (Ctrl+Shift+Enter) formulas, allow you to work with multiple values simultaneously by accepting array arguments and returning array results. In SpreadJS, you can apply array formulas using the setArrayFormula method, which enables complex, multi-cell calculations that update dynamically across specified ranges. This feature is ideal for handling advanced data analysis and manipulation within spreadsheets.

• View Demo and Code
• Array Formulas Documentation

JavaScript Excel-Like Table Formulas

Table Formulas

SpreadJS supports total row formulas in tables, allowing users to quickly add summary functions to their data. With an intuitive dropdown list, users can select and insert the desired calculation—such as SUM, AVERAGE, or COUNT—directly into the total row. Additionally, the setColumnDataFormulaand setColumnFormula methods enable users to apply formulas across entire table columns, simplifying column-wide calculations and enhancing data analysis capabilities.

• View Demo and Code
• Structured Reference Formulas in Tables Documentation

JavaScript Pivot Table Calculated Items

Pivot Calculated Items

The optional Pivot Table Add-on enables users to add custom calculated items within row or column fields, enhancing data analysis capabilities. Using the addCalcItem method in the PivotTable class, users can create formulas that include constants or references to other pivot table items, allowing for tailored calculations directly within the JavaScript pivot table. This feature is ideal for creating more dynamic and customized data summaries.

• View Demo and Code

JavaScript Spreadsheet Cell Types

Cell Types

SpreadJS offers various cell types, allowing you to control the information entered and displayed in any cell. With the cellTypes namespace, you can define custom cell types or use predefined options like combo box, check box, buttons and more for easier data selection and validation. These versatile cell types help streamline data entry and ensure accuracy, making them ideal for applications that require structured data input.

• View Demo and Code
• Cell Types Documentation
• Learn More About Cell Types

JavaScript Spreadsheet Drop-Downs

Cell Drop-Downs

Effortlessly enhance data selection with SpreadJS cell drop-downs. Using the DropDownType enumeration, you can create interactive forms featuring lists, date pickers, sliders, calculators, color pickers and more, all tailored for precise data entry and streamlined user experiences. These customizable drop-downs make it easy to guide users through selecting and entering accurate information.

• View Demo and Code
• Cell Drop-Down Documentation
• Learn More About Cell Drop-Downs

Data Bound Range Template Cell Type

Range Templates

The Range cell type allows for custom data rendering by defining a template of cell ranges as a single CellType that can then load data into that cell template, enabling you to create views like card layouts, multi-row displays, or KPI blocks without extra coding. You can programmatically create Range template cells or design them visually using the SpreadJS Designer, streamlining the setup of dynamic and visually engaging layouts. This feature makes it easy to present complex data in an accessible, customized format.

• View Demo and Code
• Range Template Cell Documentation

Drag Fill Options for SpreadJS

Drag Fill

Simplify data entry with Drag Fill in SpreadJS, which allows users to automatically populate cells with similar or incremental values by simply dragging. Custom fill options enable programmatic data loading at runtime, making it easy to handle complex data population needs within your applications.

• View Demo and Code
• Drag Fill Documentation

JavaScript Data Validation

Data Validation

Data validation in SpreadJS allows developers to set restrictions on the data that can be entered in each cell, ensuring consistency and accuracy. Using the DataValidation namespace, you can define specific rules, such as numeric ranges or text length limits, and provide visual indicators to flag invalid entries. This helps users correct data entry to align with database requirements, maintaining data integrity throughout your application.

• View Demo and Code
• Data Validation Documentation

Auto Merging

Auto Merging

SpreadJS enables AutoMerge for cell ranges, columns, and row/column headers, automatically merging neighboring cells when their text matches. Using the autoMerge method, you can easily configure this feature to streamline data presentation and improve readability by reducing repetitive content. Auto Merging is especially useful for organizing data in reports, tables, and summaries, helping users quickly interpret information.

• View Demo and Code
• Auto Merge Cells Documentation

Cell State in JS Spreadsheet

Cell States

Define custom cell styles to visually indicate different state changes, such as edit mode, hover, invalid, active, selected, read-only, and changed states. Using the CellStatesType enumeration, you can easily configure these styles to enhance user interactions and create responsive, interactive input forms. This feature ensures that users can quickly identify the status of each cell, improving the overall user experience.

• View Demo and Code
• Cell States Documentation

JavaScript Spreadsheet Hyperlinks

Hyperlinks

SpreadJS enables Excel-like hyperlinks in worksheet cells, allowing users to quickly navigate to specific sheet locations, open URLs, draft emails, or trigger custom commands that function as interactive buttons. Using the HyperLink class from the CellTypes namespace, you can easily configure and customize hyperlinks to enhance navigation and interactivity within your JavaScript applications, making it easier to connect and access related data.

• View Demo and Code
• Hyperlink Cell Type Documentation

mask input in JavaScript apps

Input Mask Style

The Input Mask Style in SpreadJS enforces specific data formats to ensure accuracy and consistency. With the InputMask namespace, you can create customizable input masks using user-defined patterns, placeholders, and masking characters, allowing precise control over how data is entered. This feature is ideal for scenarios that require structured data input, such as phone numbers, dates, and identification codes.

• View Demo and Code
• Mask Input Documentation

JS Spreadsheet Barcodes

Barcodes

SpreadJS supports eleven types of barcode sparklines, including popular formats like QR code, EAN-13, EAN-8, and more, which can be easily embedded into any cell. Users can add a barcode to a JavaScript worksheet using a simple barcode formula, making it straightforward to generate scannable codes for various applications directly within the spreadsheet. This feature is ideal for inventory management, product labeling, and data encoding.

• View Demo and Code
• Barcodes Documentation

Rich Text Cell Editing

Rich Text In Cells

The Rich Text feature in SpreadJS allows users to apply multiple text styles within a single cell, letting you combine bold, italic, different fonts, and colors to highlight key information. This flexibility makes it easy to create visually appealing and well-organized spreadsheets. Using the ValueType enumeration, you can specify a cell's value type as richText to enable these enhanced formatting options, ensuring your data is both informative and aesthetically engaging.

• View Demo and Code
• Rich Text Documentation

Cell Formatting

Cell Formatting

SpreadJS offers extensive cell-level formatting options, including type, font, size, borders, colors, alignment, word wrap, indentation, padding, labels, orientation, validation, tags, and comments. You can easily apply and manage these formats using the setFormatter and getFormatter methods. Additionally, the formatter method allows you to get or set the formatter for specific cells, columns, or rows, providing flexibility and control over how data is displayed. These features help create well-organized, visually appealing spreadsheets that enhance data readability.

• View Demo and Code
• Cell Format Documentation

JavaScript Charts

Charts

SpreadJS provides a wide variety of chart types—such as line, bar, waterfall, combo, and more—offering effective data visualization for JavaScript applications. Users can customize chart layouts and elements, making it easy to analyze financial data, stock performance, sales revenue, and other key metrics. You can create charts using the ChartCollection's add method, specifying parameters like chart type, dimensions, and data range. For example, adding a clustered column chart can be done with a simple command, setting its position, size, and data source, allowing for flexible and dynamic visual representations.

• View Demo and Code
• Charts Documentation
• Learn More About Charts

Create JavaScript Spreadsheet Sparklines

Sparklines

SpreadJS offers sparklines, which provide a compact visual representation of data trends, such as increases, decreases, minimums, maximums, stock levels, and costs. These mini-charts can be embedded directly in any cell, offering a quick overview of data patterns. You can set the sparkline type to column, line, or win/loss using the setSparkline method, or use type-specific formulas to create various sparklines available in SpreadJS. Additionally, you can implement custom logic to define a unique sparkline formula based on your dataset and settings, and add it using the addSparklineEx method for more tailored visualizations.

• View Demo and Code
• Sparkline Documentation
• Learn More About Sparklines

Conditional Formatting in JavaScript apps

Conditional Formatting

Use conditional formatting to automatically highlight key information and identify trends based on specified values. This feature helps you quickly spot patterns and outliers in your JavaScript spreadsheet data. Conditional formatting can be applied to worksheets through flexible conditional formatting rules, and SpreadJS supports importing and exporting many of Excel's rules for seamless integration. You can utilize the ConditionalFormatting namespace and ConditionalFormats class to access a variety of methods and enumeration options, enabling precise control over how your data is visually represented.

• View Demo and Code
• Conditional Formatting Documentation

Row Filtering

Filtering

SpreadJS offers an Excel-like filter dialog that lets users easily filter data or create custom filters to display relevant information. Conditional filters (number, text, date, color, and custom) can be set programmatically using the rowFilter method, with specific conditions added via addFilterItem method. Users can interact with filter options through a simple button in the column header, and customize dialog visibility to control sort and color filters. The dialog supports hierarchical lists and keyboard navigation, streamlining data management.

• View Demo and Code
• Filter Rows Documentation

JavaScript Slicers

Slicers

SpreadJS offers Excel-like slicers, providing a visual and intuitive way to filter spreadsheet data. Users can easily apply filters to tables, Pivot Tables, items, charts, and aggregations, similar to the custom slicers often found on consumer websites. Slicers enhance data analysis by enabling quick, clear adjustments, making it easy to refine views and highlight relevant information directly within the spreadsheet.

• View Demo and Code
• Slicer Documentation

Globalization in JS Applications | calculation engine offers 18+ language packages

Globalization

SpreadJS provides robust globalization support with the included 450 different culture infos which can be used through the SpreadJS globalization JavaScript library. Its calculation engine includes 18+ language packages, enabling users to localize custom functions and adapt their applications to different regions. Developers can use the CultureInfo class to manage culture-specific settings, ensuring seamless language integration and a localized experience for users worldwide.

• View Demo and Code
• Globalization Documentation

Programmatically Search Spreadsheet Data

Search

SpreadJS offers advanced search functionality, enabling users to easily locate content within spreadsheets. Use options like case sensitivity, exact matches, wildcards, and specific cell ranges to refine your search. You can search through text, tags, or formulas, making it simple to find relevant data. Developers can also use the search method with SearchCondition to implement custom search logic, providing precise control over how and where searches are performed within the workbook.

• View Demo and Code
• Search Data Documentation

Spreadsheet Input Form Controls

Form Controls

SpreadJS enables the creation of complex, interactive data entry forms for JavaScript applications, suitable for industries such as medical, legal, insurance, education, and finance. Using the Shapes namespace, developers can add new form controls to the shape collection with the addFormControl function. The FormControlType enumeration offers a variety of built-in controls, including buttons, spin buttons, list boxes, combo boxes, checkboxes, option buttons, and more. These form controls can be added to a worksheet or imported from existing Excel files, making it easy for users to interact with cell data.

• View Demo and Code
• Form Controls Documentation

JavaScript Customizable Context Menu UI

Context Menu

SpreadJS provides an Excel-like context menu that enables right-click interactions for a seamless user experience. The context menu offers a range of standard options, such as cut, copy, paste, insert, delete, and formatting, allowing users to quickly perform common tasks. Developers can easily customize the menu by adding, removing, or rearranging menu items to suit specific application needs. Additionally, custom commands and options can be integrated, giving full control over the context menu functionality to enhance interactivity within spreadsheets.

• View Demo and Code
• Context Menu Documentation

Data Bound Table Sheet

TableSheet

SpreadJS's TableSheet enables efficient data management via a fast, data-bound DataTable view with grid-like behavior and a spreadsheet user interface, including support for structured formulas. It provides features such as sorting, filtering, and styling, making it easy to create interactive data grids for seamless data handling.

Using the TableSheet namespace, developers can integrate TableSheet functionality into their applications. A TableSheet can be created with the GC.Spread.Sheets.TableSheet.TableSheet and GC.Data.DataManager classes. The included relational Data Manager acts as a powerful local data engine, interacting with databases to fetch, manage, and sync real-time data, which is then bound to the TableSheet for smooth data manipulation and display.

• View Demo and Code
• TableSheet Documentation
• Learn More About the TableSheet and Data Manager

Data Manager - simplifies connecting to remote sources like REST, OData, GraphQL, and local JSON, CSV, or XML.

Data Manager

The SpreadJS Data Manager is a high-performance data engine API that simplifies and accelerates connecting to and managing data within TableSheet. It serves as the data core of the application, allowing seamless interaction with data, including sorting, filtering, grouping, and aggregating. Using the GC.Data.DataManager class, developers can easily map tables and relationships with methods like addTable and addRelationship, or remove them as needed. The Data Manager synchronizes real-time data back to the database, supporting both remote sources (REST API, OData, GraphQL) and local sources (JSON arrays, CSV strings, XML), enabling flexible data management and integration for TableSheet.

• View Demo and Code
• Data Manager Documentation

Built-In JS API Shape Engine (includes 180+ customizable shapes)

Shapes

SpreadJS includes support for many Excel shapes and offers advanced functionality with data-driven shapes, enabling the dynamic generation of interactive elements. These shapes can be used to create complex visualizations, such as a manufacturing plant floor layout, that update based on real-time data. Developers can use the add method from the ShapeCollection class to easily insert custom shapes into worksheets, providing flexible and interactive design options for data presentation.

• View Demo and Code
• Shapes Documentation

Picture Shape

Picture Shape

The Picture Shape feature in SpreadJS allows you to insert, move, resize, and format images within spreadsheets, enhancing the visual appeal of documents and dashboards. SpreadJS supports adding pictures as shapes, making it easy to interact with and customize images. The picture object is created using the ShapeBase class, inheriting properties that allow for seamless formatting and interaction with other shapes. You can add a picture shape using the addPictureShape method, which accepts parameters such as name, source, location (x and y), and size (width and height), providing flexible control over image placement and appearance.

• View Demo and Code
• Picture Shape Documentation

Camera Shape

Camera Shape

The Camera Shape feature in SpreadJS provides an instantly updating snapshot view of a specified spreadsheet range, making it ideal for dynamic dashboards. Users can move, resize, rotate, group, and even interact with Excel I/O operations for the Camera Shape, ensuring seamless integration into various layouts. The addCameraShape method from the ShapeCollection class allows developers to easily insert Camera Shapes, while the CameraShape API enables customization of the style and behavior. This feature is perfect for creating real-time visual snapshots of data that automatically refresh as the source data changes.

• View Demo and Code
• Camera Shape Documentation

Programmatically add custom floating objects: pictures, logos, or custom HTML content

Floating Object

SpreadJS allows you to add custom floating objects, such as pictures, logos, or custom HTML content, that display on top of the cells within a sheet. These objects can be customized using various properties to control their appearance and interaction, making them versatile for adding visual elements like branding or interactive widgets. The add method of the FloatingObjectCollection class enables developers to easily insert floating objects, specifying parameters like name, position, and size for precise control over how they appear on the sheet.

• View Demo and Code
• Floating Objects Documentation

JavaScript Spreadsheet Ribbon Bar Control

Designer Ribbon Component

The SpreadJS Designer Ribbon Component is an optional add-on package that brings the familiar UI elements of the Desktop Spreadsheet Designer to JavaScript applications. It offers a fully customizable ribbon bar, formula bar, status bar, side panels, and context menus, enabling end-users to easily interact with and customize spreadsheets directly within their apps. Developers can modify, extend, or rearrange components by adjusting the configuration file, allowing complete control over the UI.

• View Designer Ribbon Demo
• View Customize Ribbon Bar Demo and Code
• Designer Component Documentation
• Learn More About the Designer Ribbon

JavaScript Pivot Tables

Pivot Table

SpreadJS offers the optional Pivot Table add-on, enabling users to efficiently group, calculate, and summarize large data sets within JavaScript applications. Users can import and export Excel Pivot Tables, making it easy to integrate existing reports or share data summaries. The Pivot Table add-on includes features like the Pivot Panel, Pivot Slicers, and context menus, allowing for intuitive data organization and dynamic, interactive analysis. With a familiar UI, users can quickly create reports, discover trends, and visualize complex data, improving business intelligence. Developers can fully customize the Pivot Table experience to suit their application's needs, leveraging built-in aggregations, field lists, and calculated fields.

• View Demo and Code
• Pivot Tables Documentation
• Learn More About the JavaScript Pivot Tables

JavaScript GanttSheet

Gantt Chart Sheet

SpreadJS offers an optional JavaScript Gantt Chart Sheet add-on that brings powerful Gantt chart functionality to your applications. This add-on uses the included fast, data-bound DataTable with a familiar spreadsheet user interface, making it easy to manage project timelines and tasks. It includes standard Gantt features such as timescales, taskbars, task dependencies, and calendar capabilities, enabling efficient project planning and tracking. The Gantt Chart Sheet is ideal for visualizing schedules, managing resources, and monitoring project progress within a JavaScript environment.

• View Demo and Code
• Gantt Chart Sheet Documentation
• Learn More About Gantt Chart Sheet

JavaScript Spreadsheet Report Templates

ReportSheet

SpreadJS offers the ReportSheet, an optional add-on for quick and easy report creation within JavaScript spreadsheet applications. This new sheet type allows users to design reports that include data entry, pagination, data filtering, sorting, and conditional formatting. The add-on consists of two components: ReportSheet and TemplateSheet, with TemplateSheet offering various report-related settings for customization. Connected to a DataManager implementation, ReportSheet provides data entry APIs for seamless interaction. Users can design reports directly in the optional SpreadJS Designer Ribbon Component, gaining full control over the report UI, which can then be exported and integrated into any SpreadJS instance.

• View Demo and Code
• ReportSheet Documentation
• Learn More About ReportSheet

JavaScript DataCharts Component

DataCharts

The DataCharts Add-On is a powerful tool for advanced data visualization within JavaScript spreadsheet applications. This add-on allows users to create charts bound directly to SpreadJS’ TableSheet and Data Manager, overcoming the limitations of traditional Excel-style charts in SpreadJS. Charts can be designed as floating objects or seamlessly integrated into worksheet templates.

The DataCharts Add-On includes a flexible API for managing chart instances, including adding, removing, and configuring charts. Users can define chart configurations using a subset of DV options, ensuring full customization and dynamic data binding. For ReportSheet Add-On users, the add-on integrates effortlessly, enabling template-based chart designs that adapt to data-driven layouts. With this tool, SpreadJS expands its capabilities, delivering unparalleled flexibility for interactive charting in modern applications.

• View Demo and Code
• DataCharts Documentation
• Learn More About DataCharts

JavaScript Spreadsheet AI Add-On Preview

AI (Developer Preview)

The SpreadJS JavaScript AI Add-On is currently released as a Developer Preview. It brings natural language assistance directly into your JavaScript spreadsheets. Built into both SpreadJS and the Designer, the AI Assistant helps users create formulas, explain complex logic, and generate PivotTables simply by describing their intent in plain language. From auto-generating a formula to analyzing sales trends by quarter, this preview feature is designed to accelerate productivity and simplify advanced spreadsheet tasks. Features and capabilities may evolve as we gather feedback during the preview/beta period.

• View Demo and Code
• AI Add-On Documentation

SpreadJS v18.2 is available! This release offers several great new enhancements and features to its JavaScript spreadsheet component and optional add-ons, including:

• NEW! Theme Support in the Designer Ribbon Component
• NEW! Funnel & Treemap Charts with the DataCharts Add-On
• Table & Data Binding Enhancements for DataTable conversion and code-based data access
• UI & UX Improvements including streamlined navigation, smarter checkboxes, and faster sheet/dropdown search
• LAMBDA Support for Transform Cells and Paste Special operations
• Async Formula Evaluation for off-sheet processing and async data integration
• Lossless XLSM & XLTM I/O File Format Support for macro-enabled Excel files (macros are not executed)
• Next.js 15 & React 19 Compatibility
• Real-Time Collaboration Enhancements (Developer Preview)
• And Much More!