Skip to main content Skip to footer

What's New in SpreadJS v12

SpreadJS v12.2 - July 22, 2019

Printing Enhancements

Printing in SpreadJS has been enhanced with a new event, print preview lines, printing info for the page, and background watermark images. With the new BeforePrint event, printing can be cancelled after it is initiated. With print preview lines, dotted lines are drawn in the workbook to show where pages end when printed out.

The print info now includes API to show the printing range of cells for each page, and the background watermark image can now be added when printing a page.

Read the Print Enhancement Blog

SpreadJS V12 - Printing Enhancements

Drag-Fill Enhancements

Drag-filling in SpreadJS has been enhanced with support for days of a month, strings with numbers, and custom lists. Drag-filling dates will fill in the rest of the month where appropriate. Strings that have numbers at the beginning or end can be filled correctly in sequence. With custom lists, a developer can create a specific set of data to drag fill a range of cells with.

Read about Drag-Fill Enhancements

SpreadJS V12 - Drag-Fill Enhancements

Wrap-Text Hyphenation

When text in a cell is hyphenated and it is set to wrap, changing the column width will ensure that the text is wrapped with the hyphens:

SpreadJS V12 - Wrap-Text Hyphenation

Language Packages

18 new language packages have been added to the calculation engine in SpreadJS. This includes localized function names and syntax for structured references for spreadsheets for specific languages. These languages include Chinese, Portuguese, and German, just to name a few.

Read about Language Packages

Custom Localization

With custom localization, displayed properties and words in the SpreadJS instance can be customized with specific languages. By default, the only languages in SpreadJS were English, Japanese, Chinese, and Korean, but this features gives developers control over what languages are shown.

Read our Custom Localization Blog

Chart Symbol Enhancements

Support for chart symbols has been added with SpreadJS v12 Service Pack 2. This allows developers to choose the types of symbols that are displayed in place of the markers for charts like Line, Scatter, and Radar. The markers can be changed to things like Circles, Diamonds, Squares and Triangles:

SpreadJS v12 - Chart Symbol Enhancements

3rd Party Library Support Enhancements

Spread can be used with Angular, Vue, and React.

See Maintenance Releases Following This Release

SpreadJS v12.1 - August 30, 2019

Runtime Features

Double-Click Auto-Fill

Filling data was already a part of SpreadJS, but now we have added the ability for users to double-click on fill indicators in order to auto-fill data.

SpreadJS v12 - Double-Click Auto-Fill

Data Validation

Different cell highlighting types have been added to the data validation in SpreadJS. This includes circle, dogear, and icon.

 SpreadJS v12 - Data ValidationSpreadJS v12 - Data ValidationSpreadJS v12 - Data Validation

Read more about data validation enhancements.

Number and Date Display Enhancement

The way that numbers and dates are displayed in SpreadJS has been enhanced. When numbers are too big to fit in a cell, they will be changed to fit properly.

SpreadJS v12 - Number and Date Display Enhancement

Clipboard Paste

Two types of clipboard pasting have been added, allowing users to copy and paste only values and formatting, or only formula and formatting.

Designer Features

Subtotal Function

The Excel-like Subtotal functionality has been added to the Designer, allowing users to insert subtotals into their sheets.

SpreadJS v12 - Subtotal Function

Data Validation Highlight Style

With the runtime data validation highlight style we have also added a menu in the designer to support it.

SpreadJS v12 - Data Validation Highlight Style

Clipboard Option Enhancement

New clipboard pasting options have been added to the designer in both the ribbon menu and the context menu.

SpreadJS v12 - Clipboard Option Enhancement SpreadJS v12 - Clipboard Option Enhancement

Blank Table Style

A blank table style has been added to the list of table styles that can be applied.

SpreadJS v12 - Blank Table Style

Status Bar

A status bar has been added to both the runtime and designer implementations. In addition to displaying information about the selected cells, a context menu has also been added. The status bar can be customized to fit specific needs.

SpreadJS v12 - Status Bar SpreadJS v12 - Status Bar

Read more about the status bar.

Angular 7

SpreadJS has now been tested with the latest version of Angular 7. This release includes support for all SpreadJS properties and events, as well as the Angular CLI.

For a detailed listing of fixed issues, please see the Release Notes.

See Maintenance Releases Following This Release

SpreadJS v12 - November 1, 2018

Add Custom and Built-in Shapes to Your JavaScript App

The biggest news from SpreadJS v12 is the arrival of shapes. Draw shapes, create interactions, and change them with data—it's up to you.

Like Excel, we've implemented dozens of built-in shapes to add more detail and visual appeal to your workbooks, as well as the ability to seamlessly import and export Excel workbooks that contain shapes. These 60+ shapes include basic rectangles, arrows, balloons, and action buttons.

We've added custom and data-driven shapes. These can be used to make different kinds of interactive diagrams, including:

  • Create a visual, interactive floor plan that allows users to see who sits at a desk, or add information about amenities
  • Create a production floor plan for a manufacturing facility, and highlight areas experiencing slowdowns or problems
  • Create an interactive, touch-based map of a car so users can highlight damage for insurance claims
  • Create Gantt charts and org charts

See the demo here:

Custom JavaScript shapes in SpreadJS

Shapes, like those in the car example, can be free-form, and 60+ built-in shapes are also included in the feature. Built-in shapes include everything from basic rectangles to arrows, balloons, and action buttons:

SpreadJS v12 - Built-in Shapes

Read the JavaScript shapes blog | Try the Demo | Documentation

Include Different Formatting in a Single Cell with Rich Text Formatting

With rich text formatting, users can now add bold, italics, font, and all basic formatting to a single cell! It's a popular request from customers and a valuable feature for new users.

SpreadJS v12 - Rich Text Formatting

The Spread Web Designer also includes a rich text editor.

In addition to offering more flexibility in visual styles, the rich text editor allows you to more clearly display mathematic, chemistry, and scientific formulas that require superscripts, subscripts, or symbols.

For instance:

SpreadJS v12 - Rich Text Formatting

Try the Demo | Documentation

Animated Charts

SpreadJS column, bar, line, and pie chart now include seamless loading and updating animation. When the data for a chart is changed or the chart is first loaded, the chart will animate up to the values for the chart:

SpreadJS v12 - Animated Charts


New Charts: Radar, Sunburst, and Treemap Charts

These new charts (also available in Excel) have full Spread Web Designer support, and you'll be able to seamlessly import and export Excel files that include these charts.

Radar charts displays multivariate observations with an arbitrary number of variables; it's often used to show personality traits. Try the Demo | Documentation

SpreadJS v12 - Radar, Sunburst, and Treemap Charts

A sunburst chart visualizes hierarchical data from a root node (center) outward to lower hierarchies. A segment of the inner circle is a parent to the segments of the outer circle which lie within the angular sweep of the parent. Try the Demo | Documentation

SpreadJS v12 - Sunburst Charts

A treemap chart displays hierarchical information combined with relative quantity. Try the Demo | Documentation 

SpreadJS v12 - Treemap Charts

Excel-like Precision Selection

Excel's new feature allows users to select a large range, and then deselect specific cells. SpreadJS has added this as a feature:

SpreadJS v12 - Excel-like Precision Selection

Try the Demo | Documentation

Additional enhancements

Barcode sparklines are implemented as a rendered formula, and can be used in order forms, for tracking purposes, and as website links (QR Codes). Try the Demo | Documentation

See Maintenance Releases Following This Release