It is common to need user controls, such as a toolbar, to allow end-users to manipulate SpreadJS sheets and their data. This tutorial will give step-by-step instructions for adding an open source Ribbon toolbar to an instance of SpreadJS. The toolbar we are using is an open source JQuery ribbon that can be found here: https://www.openhub.net/p/jquery-ui-ribbon. Other ribbons can be used, but this is a simple example to show how we can go about connecting a ribbon to SpreadJS. Download the source code for this tutorial: SpreadJS Ribbon
Set Up the Project
Set up your project by placing the SpreadJS scripts and the source code for the Ribbon control linked above in the directory where you will create the SpreadJS web page. Start by creating a web page with a SpreadJS widget. Find instructions here: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#addcontrol.html Your spreadsheet should look like the one in the screen shot below. 
Example HTML page with SpreadJS
Add the Ribbon to Your Page
Add the links to the scripts found in the open source Ribbon you downloaded.
Now, set the page to display the ribbon by adding this html code to the body above the SpreadJS widget:
The ribbon is now displayed on the page with Spread and it looks similar to a ribbon you would see in a Microsoft Office program: 
HTML page with SpreadJS and a ribbon
Make the Buttons Work with SpreadJS
To add the functionality for these buttons in the script for SpreadJS on the page, find the id for each button and use that id to write a function for clicking on that button. This can be done using:
The code that is defined within the function will be called whenever that particular button is clicked. The following is an example that adds functionality to the New Sheet button in the Insert tab:
Once the code for each button has been written, the page with the SpreadJS component and ribbon will be displayed correctly, and the user can interact with the SpreadJS component using the buttons in the ribbon.
MESCIUS inc.