I am proud to announce the Alpha release of SpreadJS: the fastest and easiest way to deploy powerful spreadsheets in your web applications! SpreadJS is a new product derived from the Spread Product Family, which is a set of spreadsheet components for application development on a variety of platforms. SpreadJS is sure to bring value to your web applications with time-saving features. Based on HTML5, jQuery, and CSS3, SpreadJS brings all the data visualization and calculation features into your web applications. Create calculators, dynamic interactive dashboards, rich colorful reports, and much more! The rich JavaScript API for SpreadJS provides a complete object model for the spreadsheet document, and a rich set of user interface events which your application can handle to customize the user experience. SpreadJS is designed to provide an Excel-like user interface for spreadsheet navigation, editing, formula calculation, column/row resizing, range drag-drop and drag-fill, and other powerful spreadsheet UI elements such as table sorting and filtering. 
Highlight Features
Data Visualization and Analysis Support
Let your data tell a story through the enhanced data visualization support in SpreadJS! Recognize trends, isolate out-of-range values, and gain a picture clear understanding of your data. SpreadJS data visualization support includes: Sparklines,Conditional Formatting, Color Gradients, Excel-style Grouping, and more. 
Formula
Powerful Excel compatible formula and ability to data aggregation and analysis, 320+ functions, cross sheet reference, and custom name support.
Data Operation
Rich data interaction, flexible data editing, Excel-style Filter, Row/Column Freeze, Row/Column Resize, and Drag-Fill and Drag-Drop.
Sparklines
For even richer data analysis, add sparklines: tiny lightweight charts that are drawn in cells to provide a visual representation of data. SpreadJS supports the Column, Line, and Win/Loss sparkline types. 
Filtering
View only the data you are interested in by filtering using the familiar Excel-style filter dialog. 
Range Grouping
Use Excel-style range grouping to logically group ranges, and nested ranges of data. 
Rich Data Interaction & Display Support
Customize the look and feel of SpreadJS within your application. Data is integral to your application. The colors, borders, fonts, and table-layout elements used to layout your data should support a high level of customization. SpreadJS provides extensive customization at the row, column, and cell level. In addition, SpreadJS provides Excel-style theme support to allow you to create the presentation you desire. 
Multiple Header Styling
Define any number of rows and columns for the headers. You can also fully customize the appearance of header cells, including the text, styles, spans, and height/width. 
Row/Column Freezing
You can freeze (make non-scrolling) any number of rows, columns, or both in a sheet. 
Cell Borders
Customize the appearance of the cells by setting borders for a cell or range of cells. A border can be displayed on the left, right, top, or bottom, or around all four sides of a cell or cell range. You can specify more than one style and color for the same cell, column, row, or block of cells. Different border styles let you set different options. 
Get Started!
SpreadJS is powered by HTML5, jQuery, and CSS3. We provide a widget, which gives you an easy way to use the control. To use SpreadJS, follow these three simple steps:
1. Add References
First, we need to reference the necessary scripts.
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script> <!-- SpreadJS CSS and script --> <link href="http://cdn.wijmo.com/spreadjs/gcfilter-ui.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /> <link href="http://cdn.wijmo.com/themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" /> <link href="http://cdn.wijmo.com/themes/cobalt/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /> <script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.full.min.js" type="text/javascript"></script>
2. Create the Markup
Next, we add markup for the SpreadJS control to our document. We need to define this markup like so:
<div id="ss" style="width:100%;height:400px;"></div>
3. Initialize the Spreadsheet
Finally, we need to create a Model & Controller by adding a small piece of JavaScript code:
<script type="text/javascript"> $(document).ready(function(){ $("#ss").wijspread({sheetCount:1}); // create wijspread control var spread = $("#ss").wijspread("spread"); // get instance of wijspread control var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread control // initializing the active worksheet here... }); </script>
Go Get It!
Download SpreadJS Alpha and try the online sample. We have also published some documentation for the widgets to help you get started. The docs will be updated during the Alpha process so please be patient if something is missing momentarily. If you have any feedback or questions, please post them in the SpreadJS Alpha forum. Note that this is our first step: alpha of version 1.0 release. We'll continue to improve SpreadJS in the future. Your feedback is very important to us.
MESCIUS inc.