This guide will give you detailed instructions on how to create dhtmlxSpreadSheet on a page to enrich your application with features of a mighty worksheet. Follow the steps below to get a ready-to-use component:

  1. Include the dhtmlxSpreadSheet source files on a page.
  2. Create a container for dhtmlxSpreadSheet.
  3. Initialize dhtmlxSpreadSheet with the object constructor.


<!DOCTYPE html>
        <title>How to Start with dhtmlxSpreadSheet</title>
        <script type="text/javascript" src="/codebase/spreadsheet.js"></script>
        <link rel="stylesheet" type="text/css" href="/codebase/spreadsheet.css">
        <div id="spreadsheet"></div>
            // creating dhtmlxSpreadSheet
            var spreadsheet = new dhx.SpreadSheet("spreadsheet",{document.body});
</script> </body> </html>

Including source files

Download the package and unpack it into a folder of your project.

To create dhtmlxSpreadSheet, you need to include 2 source files on your page:

  • spreadsheet.js
  • spreadsheet.css

Make sure that you set correct relative paths to these files:


<script type="text/javascript" src="codebase/spreadsheet.js"></script>  
<link rel="stylesheet" href="codebase/spreadsheet.css">

The structure of the SpreadSheet pack is the following:

  • sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
  • codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
  • samples - the code samples;
  • docs - the full documentation of the component.

Creating container

Add a container for SpreadSheet and give it an id, for example "ssheet":


<div id="ssheet"></div>

Initializing dhtmlxSpreadSheet

Initialize dhtmlxSpreadSheet with the dhx.Spreadsheet object constructor. The constructor has two parameters:


// creating dhtmlxSpreadSheet
var ssheet = new dhx.Spreadsheet("ssheet", {// config options});

Configuration properties

This is a list of properties that you can specify in the SpreadSheet configuration object:

  • toolbarBlocks - (array) specifies blocks of buttons that will be shown in the toolbar of spreadsheet
  • editLine - (boolean) hides/shows the editing bar
  • menu - (boolean) hides/shows the menu
  • multiSheets - (boolean) enables/disables the ability to work with multiple sheets in the spreadsheet
  • colsCount - (number) sets the number of columns a spreadsheet will have on initialization
  • rowsCount - (number) sets the number of rows a spreadsheet will have on initialization
  • readonly - (boolean) enables/disables the readonly mode
  • exportModulePath - (string) sets the path to the export module
  • importModulePath - (string) sets the path to the import module
  • autoFormat - (boolean) defines whether the format of a cell content is detected automatically
  • formats - (array) defines the list of number formats

You can set configuration options during initialization as the second parameter of the constructor:

var ssheet = new dhx.Spreadsheet("ssheet", { 

Related sample:  Custom cells count - DHTMLX Spreadsheet

Back to top