SpreadJS's Spread.Sheets component is so complete that it can be implemented with very little code and in just a few minutes. You only need the Spread.Sheets core JavaScript library and style sheet; there are no external dependencies.

This tutorial uses hosted versions of Spread.Sheets files to show you how to implement and instance of Spread.Sheets in a web page. You can use the same or download SpreadJS and use the files locally. The result will look similar to the screen shot below.

It only takes a few minutes to create a page like this.


Note that even though this tutorial doesn't use it, jQuery can be used to implement Spread.Sheets.

When you are finished, check out the Spread.Sheets tutorial site for over 100 more feature tutorials and examples.

Start by adding these references to the Spread.Sheets core JavaScript and CSS files to you HTML's HEAD section:


<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2016colorful.9.40.20161.0.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20161.0.min.js"></script>


Use the window.onload function to initialize the Spread.Sheets component and get the Spread object.

 
window.onload = function () {
var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
};


Use a div and the object's ID (ss) place the sheet in the page's body section.


<body>
<div id='ss' style='width:100%; height:500px;'></div>
</body>


That's it. Your first spreadsheet has been created. For your convenience, the complete page source is below. Remember to visit the tutorial site to learn how to implement and customize features.


<!DOCTYPE html>
<html>
<head>
<title>My First Spreadsheet</title>
<link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2016colorful.9.40.20161.0.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20161.0.min.js"></script>
<script>
window.onload = function () {
var spread = new GcSpread.Sheets.Spread(document.getElementById('ss'), { sheetCount: 1 });
};
</script>

</head>
<body>
<div id='ss' style='width:100%; height:800px;'></div>
</body>
</html>