It’s been less than a year since we took Wijmo5 out of beta and released it to the world. Wijmo5, a new generation of JavaScript controls, focuses on lightweight and flexible controls for developers targeting the latest web browsers. Thanks to customer feedback, our library has matured in recent months, and in this blog, I'll be talking about FlexSheet. 
FlexSheet is available in our v2 release as a sample, but it's built so you can use it as a control, which I'll demo below. Before we officially release it as a control, we want to get some feedback from our customers to minimize breaking changes down the road. FlexSheet is a fast and lightweight spreadsheet control. Grids have always been a strong point of focus for Wijmo and ComponentOne Studio, so it was only natural that we took our experience in grids and created an Excel-like alternative for working with and analyzing data in the web stack. FlexSheet offers some of the most important spreadsheet features from Microsoft Excel, including:
- a formula/calculation engine;
- cell formatting;
- freezing;
- filtering;
- undo/redo;
- and more.
In addition, FlexSheet supports importing and exporting Microsoft Excel files, giving your end users a clear migration path.
Add Excel-like spreadsheets to your web applications and give your users a powerful and familiar tool for analyzing data.
FlexSheet's Top Features
Fast and Flexible: The HTML5 Ribbon Menu
FlexSheet is small, fast, and designed to maximize flexibility. In our Excel-like spreadsheet sample, you'll see that we added our own customized HTML5 Ribbon menu. 
The Ribbon menu's command and setting inputs events were bound to extensibility hooks in the FlexSheet control, providing instantaneous updates to the sheet. The functionality that the ribbon menu provides is something that Excel users have become very accustomed to.
Customize Cell Styles on Drop Down Lists
All of the events that occur in our FlexSheet are available to you as a developer, via the API, to customize your app's behavior. For example, in our angular directive, we can apply the following $watch on a dropdown list change event (font name) in the ribbon above:
$scope.$watch('ctx.cboFontName', function () { });
Once we have a listener to handle an external event, such as a drop down list change from the ribbon, we can apply cell the styles to the cell(s). Take a look at the image below—you can see I highlighted some different cells and applied some different font styles to them. 
So in this case, we're taking a look at Font-Style so we can ensure that we have a valid font name. This input validation reduces bugs and secures the application a bit. After validating that our command is legal, we apply that cell style to our selected cells. In the code shown below, we grab our instance of the FlexSheet, which exposes the applyCellsStyle event, and apply a new font style to this instance of the FlexSheet based on the selectedItem value from the drop down list.
$scope.ctx.flexSheet.applyCellsStyle({
fontFamily: $scope.ctx.cboFontName.selectedItem.value
});
FlexSheet's Context Menu: Insert or Remove Rows or Columns
FlexSheet is focused on the key features from Excel and offers extensibility for you to add more. One of these features is a context menu, triggered by the right click, that allows you to insert or remove rows or columns. 
Maintain a Small Core and Extend the Control
You can freeze rows or columns for analyzing large data sets, sort and filter data, add dropdown or combo lists into cells for user selection, and more features that we'll get to later. This philosophy allows us to maintain a small core and still offers the possibility to extend the control in limitless ways. We're very excited to see how you push the boundaries in ways we haven’t thought of yet.
Familiar Excel-Like Spreadsheet Experience: Work Across Sheets, Undo, and Redo
FlexSheet offers a familiar experience that you'd typically find working in a native installation of Microsoft Excel. From keyboard navigation to data entry, you users will feel at home using FlexSheet. We tried to make this experience as close to native Excel as possible, even down to the styling and layout, to make sure your end users adopt your application quickly. We included the ability to switch between sheets using the tab at the bottom of the sheets and allows users to add additional sheets if they need to. We included undo and redo ( ctrl+z ctrl+y ) operations to help streamline your user's workflow. Included in the keyboard commands are the following two undo/redo buttons in the ribbon. 
Formula Support with Autocompletion
Data entry fans will be excited about the familiar formula bar at the top. Of course, due to the flexibility of the control, you can lock down all of these features according to the product requirements. By offering Excel-like features to your users, they'll adopt and become productive very quickly. FlexSheet includes a calculation engine for built-in formula support, including about 100 formulas and cell autocompletion. All formulas contain a short description: 
If you want to check out all of the formulas in the ExcelBook sample, they're demoed under the Formulas tab in the FlexSheet. Formula operations include aggregation, mathematics, logic, and text. FlexSheet currently offers a subset of the very common formulas in Microsoft Excel, but the number of formulas supported is growing weekly!
Import and Export Excel Files
I've mentioned Excel-like a few times already, but the truth is, you can never truly be "Excel-like" without the ability to covert Excel documents into something your application can understand and vice versa. Fortunately, FlexSheet supports importing from and exporting to Excel files. If your end users have years' worth of Excel files saved on their local disk, they can easily convert them to FlexSheet and move them to the web. More importantly, they can take their work from FlexSheet and port it back over to Excel at any point, depending on the scenario. They can also modify spreadsheets in FlexSheet, via web browser on any device, and then export them to an Excel file for sharing purposes or simply share them via a web link. In our sample, we've provided some buttons for importing and exporting: 
Clicking the Load button opens a file dialog box where you can browse to your local Excel file. This fires a new FileReader instance, and you can load that file into your application. The Save button allows you to convert it to an Excel file and save it on the local machine. New will simply clear the sheet and give you a blank canvas.
Data Binding
FlexSheet supports databinding like a grid, as well as being unbound. In bound mode, columns can be defined and data bound just like our FlexGrid—in fact FlexSheet uses and extends FlexGrid. We can take a look at some code and see our data being bound. In unbound mode, you can start with a blank sheet and programmatically set cell values. Read more about FlexSheet >>
Resources
MESCIUS inc.