Initialization

This guide describes how to create DHTMLX Spreadsheet on a page and add a full-featured worksheet to your application. Follow the steps below to get a ready-to-use component:

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

Including source files

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

To create DHTMLX Spreadsheet, 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:

index.html

<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 "spreadsheet":

index.html

<div id="spreadsheet"></div>

Initializing DHTMLX Spreadsheet

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

• the HTML container for Spreadsheet,
• an object with configuration properties. See the full list below.

index.js

// creating DHTMLX Spreadsheet
const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    // config options
});

Configuration properties

See the full list of properties that you can specify in the Spreadsheet configuration object.

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