SpreadJS v13

We are pleased to announce our new v13 release of SpreadJS. We have added many features that will make SpreadJS an essential general-purpose control in your toolbox. The blog will detail the following features:

  • In-cell images and buttons with a variety of useful drop-down menus
  • Cell State styles for visual feedback based on user activity
  • New cell types:
    • Radio List
    • Checkbox List
    • Button List
    • Range Template
  • Excel parity features:
    • Chart Enhancements
    • Table Behavior Enhancements
    • Text Rotation
    • Pixel Scrolling
    • Dynamic Arrays and new Array functions
  • Formula Tracing for enhanced spreadsheet audit and debugging
  • Dynamic Column Width
  • Split Resizing
  • Auto Merging

Cell Buttons and Drop-Downs

Button capabilities have been added to cell styles in SpreadJS. These predefined buttons can be defined within cell styles. Developers can add more functionality to their workbooks, such as opening details about an entry in a store database with a simple button click. Different buttons include checkmarks, drop-downs, undo/redo, and spin buttons. In addition to a few predefined commands, developers can code specific behavior for those buttons using the new API.

In addition to buttons, new drop-down celltypes have been added to SpreadJS giving you the ability to add different types of drop-down menus with specific properties. These menus include: calculator, date picker, month picker, time picker, color picker, list, slider, and workflow list. These menus don't require extra code other than specifying the drop down type.

In conjunction with this feature, we have created cell buttons, which are built-in button features that allow you to add interactive buttons to Spread. These buttons can be bound to different functionality, such as opening a drop-down menu. The most common use of the dropdown is the list, which simply provides a list of options for the user to pick from. These different types of drop-down cells can be used in many different applications, such as creating inventory management forms or bug/issue reports.

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

Cell States

Cell States allow you to set the style of a cell range based on current state of the cell, which allows you to provide visual feedback to users based on their actions. These actions can include hovering over cells, selecting cells, and editing cells. Specifying styles for these states can change the style in the cell when it is actively in one of those states. This can be particularly useful for applications that require real-time feedback, such as when entering data into forms or letting users know when cell data is incorrect.

SpreadJS v13 What's New

New Cell Types

We have added a few new cell types to SpreadJS, including Radio List, Checkbox List, Button List, and Range Template.

Radio and checkboxes have been in Spread for a while, and, with this enhancement, we have added the ability to create lists of these selection cell types within a single cell. This can be useful for consolidating information in data forms without requiring different cells for each options that a user might need to select. There are many different options that can be customized, including the direction, text alignment, and spacing.

SpreadJS v13 What's New

SpreadJS v13 What's New

We have also applied this new list cell type to our new buttons as well, giving developers the ability to put buttons in a list and customize them:

SpreadJS v13 What's New

The Range Template cell type provides the developer with template-based cell rendering allowing them to define a template of cell ranges that can then be displayed as a card view within a cell.

SpreadJS v13 What's New

SpreadJS v13 What's New

Chart Enhancements

With SpreadJS V13, we have enhanced the charting capabilities. These enhancements include font and position support for legends, axis display unit selection, custom area borders, hover styles, logarithmic axes, and trendlines. Most of these enhancements can help customize the way that charts look to match the look and feel of other components in an application, such as a dashboard. For more information on these features, see our in-depth Chart Enhancements blog.

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

Table Enhancements

The table functionality in SpreadJS V13 has also been enhanced, with changes including: resize handlers, scrolling headers, changes to context menus, table selection, tab navigation, and total row. These changes help make tables in SpreadJS easier to use providing further customization of your application. For more information on the specifics of these changes, check out the Table Enhancements blog.

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

Text Rotation

We have added Excel-like text rotation, which gives developers the ability to customize how users can rotate text in their workbooks. Text can be rotated to any degree between -90 and 90 allowing for more data presentation customization. Borders and background are also rotated with the text to add a seamless and professional look to your data.

SpreadJS v13 What's New

Pixel Scrolling

In previous iterations of Spread, the worksheet could only be scrolled row-by-row, which could sometimes make scrolling rows that had multiple lines of data cumbersome. With SpreadJS V13, we have added pixel scrolling, which allows the developer to specify a specific pixel amount to scroll with each increment.

Dynamic Arrays

Excel recently introduced an enhancement for Array formulas known as Dynamic Arrays. This allows for automatic expansion of array results and introduces a set of new array manipulation functions. Using Array functions can be a huge performance boost, especially when they replace a large number of formulas with a single array formula. These functions include:

FILTER - filters an array based on a boolean array RANDARRAY - returns an array of random numbers SEQUENCE - generates a list of sequential numbers SORT - sorts the contents of a range or array SORTBY - sorts the contents of a range or array based on values in a corresponding range or array UNIQUE - returns a list of unique values in a list or range

We have also added an "@" operator, which represents an implicit intersection, allowing the expression to evaluate at the intersection of the specified row and column. This feature is useful in cases where only one value is needed from the result of an array formula. This can help simplify some complex formulas by making them easier to use and understand.

SpreadJS v13 What's New

SpreadJS v13 What's New

SpreadJS v13 What's New

Formula Tracing

Formula tracing is a new feature in SpreadJS that gives you the ability to inspect the dependent and precedent cells of a formula. This feature can help you provide a visual walk-through of formulas to see how they relate to one another. Tracing formulas in a workbook can be especially useful when auditing and debugging complex workbooks such as revenue projections or other types of financial applications.

SpreadJS v13 What's New

Dynamic Column Width

Dynamic column width (also known as proportional sizing) is a feature we have added that ensures columns fill the viewport exactly. This means that when the viewport size is changed, or the user adds/deletes/resizes any column, the columns that have dynamic width applied to them will automatically resize to fill the viewport. This type of sizing can be used in conjunction with numbers to define a weighted proportion. For example, a column with a star size of "3" would fill 3 times that of a standard "" sized column in the viewport. This feature can help with dynamic workbooks. It also means that developers won't have to worry about how changes in data and columns will effect the overall look of the Spread instance.

SpreadJS v13 What's New

Split Resizing

Similar to dynamic column width, split resizing gives developers control over dynamic sizes in their workbooks. The difference with split resizing is this also applies to rows as well, and only resizes adjacent rows/columns. Compared to dynamic column resizing, this can be useful for instances where specific column widths or row heights need to stay unchanged.

SpreadJS v13 What's New

SpreadJS v13 What's New

Auto Merging

Auto merging is a new feature in SpreadJS V13 that helps developers consolidate data in a workbook. When this feature is used, a developer can automatically merge adjacent rows/columns that have the same data. The developer can specify the policy for how the auto merge happens.

SpreadJS v13 What's New

SpreadJS v13 What's New

In addition, merged data will stay on the screen when scrolling, as long as part of the merged data is still visible:

SpreadJS v13 What's New

SpreadJS v13 What's New


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