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. With a simple button click, developers can add more functionality to their workbooks, such as opening details about an entry in a store database. 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. The new drop-down celltypes give 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.
Cell States
Cell States allow you to set the style of a cell range based on the current state of the cell. Cell states allow 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 entering data into forms or letting users know when cell data is incorrect.
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. 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 option that a user might need to select. There are many different options that can be customized, including the direction, text alignment, and spacing.
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:
The Range Template cell type provides the developer with template-based cell rendering. This allows you to define a template of cell ranges that can then be displayed as a card view within a cell.
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.
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.
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.
Pixel Scrolling
In previous iterations of Spread, the worksheet could only be scrolled row-by-row. This could 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. This operator allows 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.
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.
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.
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.
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.
In addition, merged data will stay on the screen when scrolling, as long as part of the merged data is still visible:
For more information about these and other features for SpreadJS v13, check out our other blogs about these specific features. Visit our demos to try them out for yourself!
Kevin Ashley