SpreadJS was introduced in early 2013. In that year, SpreadJS was updated three times and the version numbers coincided with the year and release: 2013 v1, v2, and v3. This list is arranged by release, starting with the most recent. V1 is left out since it was the initial release.
SpreadJS Designer Create your spreadsheet layout and formatting using the rich, familiar design environment of Spread Designer. Easily create forms, and add calculated cells to your spreadsheet templates without writing any code. Load Excel documents, set conditional formatting, and add sparklines – all within the designer. All settings will be saved as a JSON format file which can be loaded into SpreadJS. The Designer is a standalone application which has an Excel-like UI composed of a Ribbon, formula bar, design spreadsheet viewport, and status bar, also provides lot of dialogs context menus for cell formatting, conditional formatting, Table style, formula reference, and more. Users who know Excel will intuitively know how to use the Designer.
Provide ExcelIO service which can use to import Microsoft Excel documents and preserve complete formatting. Interact with the data in Spread from within your application, then export your spreadsheets to Microsoft Excel for portable distribution to your users. Spread supports the current versions of Excel as well as multiple Excel file formats, including Excel (2007 – current XLSX), Excel 97 (XLS), comma-delimited (CSV), and text (TXT). In addition, the ExcelIO service can also be used to export all content in a SpreadJS HTML format file.
Support for JS libraries
Tables Use tables to manage and analyze related data and sort, filter, and format data within a sheet. SpreadJS has built-in styles appears just like Excel. You can add multiple tables into one sheet, and each table can have its own filter and different style, and other settings for header row, total row, banded row or columns.
Enhanced Conditional Formatting
Conditional Formatting Add priority and stop if true, to make conditional formatting complete and flexible, and more compatible to Excel logic.
Now you can change the border color and background of the selection indicator and match the UI theme of your application.
Tooltip For UI Operations
UI Tooltips Show ToolTips to provide more information when the end-user drags, scrolls, and resizes in the control.
Freeze Trailing Rows and Columns
Freeze the last several rows or columns so they do not scroll. These rows or columns will appear at the bottom or right size of viewport and you can use them to display information which should be always visible.
Determine whether or not show vertical or horizontal scrollbars of SpreadJS.
- Allow end-user to adjust size of row or column by double-clicking the edge of the header cell, to show all content in cells, both text of cells and header cells will be measured.
- Now SpreadJS supports copy/cut/paste text between SpreadJS and other controls or applications, such as Excel, Notepad, etc.
- Provides some options (stretch, center, zoom) for layout of background image for cell. Allow setting the background color and image of cell area, and allow to setting the background color to gray area as well.
- End-user can now use IME to directly input text into cell without entering edit mode.
Icon Sets for Conditional Formatting
Conditional Formatting Show an icon in each cell that represents the value of the cell relative to the other cells in the selected range. Icon sets are a great way to create groups of similar data as a part of your data analysis. Use an icon set to annotate and classify data into three to five categories separated by a threshold value. Each icon represents a range of values. SpreadJS provides 20 built-in icon groups which gives you more options for data visualization. You can also display your own icon in a cell using custom icon sets.
Data Bar A data bar helps you see the value of a cell relative to other cells. The length of the data bar represents the value in the cell. A longer bar represents a higher value, and a shorter bar represents a lower value. Data bars are useful in spotting higher and lower numbers, especially with large amounts of data, such as top selling and bottom selling toys in a holiday sales report.
Data Validation UI Enhancement
You can make a list of the entries you will accept for a cell on a worksheet. You can then restrict the cell to accept only entries taken from the list by using the data validation feature. Show a drop-down button beside the active cell which has the list data validator. You can also show a red circle on cells which have invalid values to help the end-user find an invalid cell easily.
Cell Types You can specify the way a user interacts with a cell, including how data is entered, displayed, and validated by specifying the cell type. The cell type defines an editor control for the cell that handles data entry, a formatter control to handle how the data is interpreted, and a renderer control that handles how the data is displayed in the cell. Cell types can be set for individual cells, columns, rows, a range of cells, or an entire sheet. For any cell type there are properties of a cell that can be set.
Cell Level Binding
Cell Level Binding is a new binding mode which can bind fields of data records to specific cells. The data record is automatically loaded into the cell and updates the data source when the user enters a new value into the cell. You can easily change the layout and position of the binding cell without needing to change any binding and update logic.
Support for the latest version of Jquery and JqueryUI
Completely supports the latest version of Jquery and Jquery UI. If your application does not need to support an old version of IE, you can use Jquery 2.0 which is a smaller, faster lib for SpreadJS.
All settings and data can be serialized to JSON format data, and the data can be loaded into the widget. You can use this ability to serialize settings as template, reuse in another instance of SpreadJS. Or save all content as a document, share or pass to server or other clients.
Tab Strip Enhancement
Show different colors for each tab. You can use different tab colors to differentiate between sheets containing unrelated information. In addition you can decide which tab is the first visual tab in the tab strip.
Show a background image in a cell. The background image is part of the cell style which can be a composite of the row or column style and the sheet default style.
Rapid Input Mode
Provide Excel-like editing behavior, fast data entry, and easy to move active cell out of edit mode using an arrow key. Start editing without having to enter edit mode, and use arrow keys to move the active cell directly without needing to leave edit mode.
Selection Unit/Selection Policy
Selection unit is an option to allow the end-user to select a cell, row, or column. Selection policy is an option to allow the end-user to select single, range, or multiple ranges. Use these two options to provide many different selection behaviors for the end-user, such as only select a single cell, only select a range of rows, and so on
Frozen Line Color
Customize the color of the frozen line.
- Provide API to allow the end-user to input a formula in the cell
- Provide API indicate whether to display row/column range group panel
- Provide API to get or set a 2D array data into a range of cells.