Skip to main content Skip to footer

JavaScript Spreadsheet Designers

Quickly Design JavaScript Spreadsheets Using the SpreadJS Designers

JavaScript developers can use the Desktop Spreadsheet Designer Application to easily design workbooks and templates with a simple interface that uses all of the SpreadJS features. Users can design a spreadsheet, including cell types and formats, shapes, tables, add data, create charts, add sparklines, and then save the spreadsheet to the Spread (.sjs) file format, or Excel (.xlsx) format, to load into the SpreadJS widget in a JavaScript application.

Developers can offer the same spreadsheet designer components, including the UI toolbar ribbon, formula bar, status bar, side panel, and context menu, functionality to users with the SpreadJS Designer Ribbon Component Add-on. Allowing end-users to create and design beautiful and complex spreadsheets specific to their needs. The SpreadJS Designer Ribbon Component is also fully customizable to fit any applications needs.

JavaScript Spreadsheet Designer Ribbon Component

The SpreadJS Designer Ribbon Component is a separate optional, deployment add-on package that provides JavaScript Developers the ability to embed the same UI components and capabilities of the Desktop Spreadsheet Designer in their JS applications. This allows their end-users to easily customize spreadsheets using a familiar UI ribbon, formula bar, status bar, side panel, and context menus directly from their apps interface.

The SpreadJS Designer Ribbon Component is also fully customizable, so developers can add, remove, and re-arrange buttons, tabs, and designer sections by adding, removing, or moving corresponding entries in the configuration file.

To interact with and customize the Designer Ribbon Component, open the downloaded SpreadJS zip file and navigate to the “Designer\Designer Component” folder, for example "\Designer\Designer Component\samples\purejs\index.html”.

Learn More View Demo
Offer familiar spreadsheet UI to JS apps with a JavaScript Spreadsheet Designer

Offer Familiar Spreadsheet UI In JavaScript Apps

The SpreadJS Designer Ribbon Component provides users the flexibility to customize a spreadsheet easily in a few clicks. The designer component includes the ribbon, formula bar, status bar, side panel, and context menu. The built-in dialogs and options in the SpreadJS Designer Ribbon Component can be used to define minute details like hyperlink's link color, cell padding, spreadsheet settings, etc.

Learn More
Full Framework Support - JavaScript Spreadsheet Designer Ribbon Component

Full Framework Support

The SpreadJS Designer Ribbon Component includes Angular, React, and Vue wrappers, to embed the designer into your projects easily. Using the Designer in these frameworks is as simple as referencing the required node packages, importing the required modules, and implementing the required framework script code to initialize the designer.

 

Learn More
Customize the JavaScript Spreadsheet Designer Ribbon Component

Customize The JavaScript Designer Ribbon

The Designer Ribbon Component provides the DefaultConfig field which contains the default configuration of designer components in a command tree structure. Using this, developers can make desired customizations in the config structure and then, pass the new config structure when initiating the designer component.

 

Learn More View Demo
JavaScript Pivot Tables

Optional License Upgrade for PivotTable Support

SpreadJS offers an optional license add on to include support for PivotTables. A PivotTable Enabled Designer Ribbon Component will show the user the Pivot Area, Pivot Panel, and a PivotTable Analyze Tab on the UI ribbon to easily create the PivotTable and analyze data.

Learn more
Bind File Import Events

Bind File Import Events

Developers can add functions in the SpreadJS Designer Ribbon Component during file import operations. This allows them to perform complex calculations, data transformations, and validations on the imported spreadsheet data. All-in-all creating more robust, efficient, and tailored solutions for data processing and analysis.

Learn more
Add a Custom Component to the JS Designer

Add a Custom Component

The Designer Ribbon Component supports adding custom components, such as a specialized chart or a custom data input control, to enhance the functionality of the designer. By adding this custom component, you can provide users with advanced data visualization capabilities or enable them to input data in a more intuitive and tailored manner.

Learn More

Desktop Spreadsheet Designer Application

SpreadJS Designer Application

Easily design JavaScript spreadsheets with SpreadJS’s Desktop Spreadsheet Designer WYSIWYG spreadsheet designer. Quickly design complex spreadsheet layouts using a familiar UI. You can also load existing Excel .xlsx template files and start being productive immediately. Supports creating templates that can populate data at run-time. Export your finished spreadsheet to .ssjson, or .xlsx to load into your SpreadJS application.

To install the Spreadsheet Designer App, open the downloaded SpreadJS zip file, navigate to the “Designer\Designer Runtime” folder, and select “SpreadJS-Designer-x-x-x” application.

Learn More View Demo
Design Spreadsheets with Familiar UI

Design Spreadsheets with Familiar UI

SpreadJS’s Desktop Designer Application provides users with the flexibility to customize a spreadsheet easily in a few clicks. The designer includes ribbon, formula bar, status bar, side panel, and context menu. The built-in dialogs and options can be used to define minute details like hyperlink's link color, cell padding, spreadsheet settings, etc.

Learn More
Open and Save Files - JavaScript Excel-like Ribbon

Open and Save Files

The Designer supports opening and saving existing Excel-formatted (.xlsx), comma-delimited (.csv), and Spread files (.ssjson) files. While saving files, SpreadJS remembers the sheet view position whenever a workbook is saved. Just like in Excel, the next time you open the same workbook, it will automatically scroll to the position where you left off previously before saving it.

Learn More
Printing JavaScript Spreadsheets

Printing JavaScript Spreadsheets

SpreadJS Designer provides a print menu that lets you preview and print all or part of a worksheet or workbook with the information you need. The print menu is accessed in the same "File" window as the New, Import, and Export options.

 

 

Learn More
Create Range Template Cells

Create Range Template Cells

The Range Template cell type allows custom rendering of cell data based on a cell range template. Data is bound to the template and rendered into the cell. Create custom rendering, such as card view, multi-row, and custom KPI blocks all without extra code.

Learn more
Excel-like Context Menus

Excel-Like Context Menus

SpreadJS Designer includes an Excel-like context pop up menu for interacting with the sheet when the mouse is right-clicked on the control.

 

 

Learn more
Easily Create Table Slicers

Easily Create Table Slicers

Similar to filters, Excel-like slicers offer an intuitive visual way to filter your spreadsheet data. You can create a slicer for a table using the SpreadJS Designer.

 

 

Learn More

Award-Winning Products and First-Class Support

Five Star Rating

"I have been using a various form of Spread back to the COM days. Spread is the most reliable spreadsheet that retrieves and stores data, whether interacting with a database or simply an Excel file. Try it out, and you will not go back to any other control"

TRUSTED CUSTOMER

Five Star Rating

"Great support through evaluation process, Spread is my favorite development add-in, adds great, high value capabilities to applications!"

TRUSTED CUSTOMER

Five Star Rating

"Excellent Products. I have been using their products for around 15 years. Always there to help."

TRUSTED CUSTOMER

Component Source Awards - 2023 #2 Publisher ComponentSource TOP 50 Product 2023 Award

MESCIUS Spread is Trusted by the World's Leading Companies

Customer Logos

"Thanks for providing the best [JavaScript] spreadsheet widget in the world, we're very happy customers. Your product has saved us a TON of time relative to other solutions we used in the past."

Jan Domanski, Labstep

"We have been using Spread in our desk and web products (PerpetualBudget) for over a decade. Not only are the Spread grids great controls but the support at GrapeCity [now known as MESCIUS] is the best. When you need them, they're there!"

Jim Spicer, Spicer-Baer Associates

"I haven't come across such a feature-rich solid Spread before. Thanks for giving such a nice component."

Adavesh Managaon, MVP, Visual C#

"Spread benefits my company because our clients can now see the immediate benefit the websites we create for them provide."

Michael Stark, Owner, StarkNetwork.com