{"id":8335,"date":"2021-03-22T13:34:22","date_gmt":"2021-03-22T10:34:22","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=8335"},"modified":"2026-06-30T17:11:21","modified_gmt":"2026-06-30T14:11:21","slug":"dhtmlx-spreadsheet-4-1-multiple-sheets","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-spreadsheet-4-1-multiple-sheets\/","title":{"rendered":"DHTMLX Spreadsheet 4.1 with Multiple Sheets"},"content":{"rendered":"

The spring release of the DHTMLX JavaScript spreadsheet<\/a> library brings out new features essential for data analysis and reporting in web applications. The update enables you to create and use multiple sheets and cross-reference between them. New methods, configuration options, and events delivered in v4.1 make it easy to fine-tune DHTMLX Spreadsheet and incorporate it into any web app. <\/p>\n

Working with Multiple Sheets<\/h5>\n

Starting with v4.1, users can create and manage<\/a> as many worksheets as they need. It is possible to add, rename, and remove sheets, switch between them and benefit from cross-referencing. Cross-referencing<\/a> allows you to combine data from different sheets and apply formulas referencing cells across an entire spreadsheet.
\n\"DHTMLXCheck the sample ><\/a><\/p>\n

Working with several sheets is simple and intuitive due to a new context menu. If you right-click any worksheet tab, you will see the menu with the available options. Thus, you can quickly remove and rename sheets.
\n\"DHTMLX<\/p>\n

Managing Sheets via API<\/h5>\n

Setting up multiple sheets in DHTMLX Spreadsheet is easy as pie. The multiSheets<\/strong><\/a> configuration property is set to true<\/em> by default. If you would like to disable it, you just need to specify its value to false<\/em>.<\/p>\n

var<\/span> spreadsheet =<\/span> new<\/span> dhx.Spreadsheet<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>          
\n    multiSheets:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
var<\/span> styledData =<\/span> {<\/span>
\n    styles:<\/span> {<\/span>
\n        someclass:<\/span> {<\/span>
\n            background:<\/span> "#F2F2F2"<\/span>,<\/span>
\n            color:<\/span> "#F57C00"<\/span>
\n        }<\/span>
\n    }<\/span>,<\/span>
\n    sheets :<\/span> [<\/span>
\n        \/\/ create sheets with custom configurations (names and ids)<\/span>
\n        {<\/span>
\n            name:<\/span> "sheet 1"<\/span>,<\/span>
\n            id:<\/span> "sheet_1"<\/span>,<\/span>
\n            data:<\/span> [<\/span>
\n                {<\/span> cell:<\/span> "a1"<\/span>,<\/span> value:<\/span> "Country"<\/span> }<\/span>,<\/span>
\n                {<\/span> cell:<\/span> "b1"<\/span>,<\/span> value:<\/span> "Product"<\/span> }<\/span>,<\/span>
\n            ]<\/span>
\n        }<\/span>,<\/span>
\n        {<\/span>
\n            name:<\/span> "sheet 2"<\/span>,<\/span>
\n            id:<\/span> "sheet_2"<\/span>,<\/span>
\n            data:<\/span> [<\/span>
\n                {<\/span> cell:<\/span> "a1"<\/span>,<\/span> value:<\/span> "Country"<\/span> }<\/span>,<\/span>
\n                {<\/span> cell:<\/span> "b1"<\/span>,<\/span> value:<\/span> "Product"<\/span> }<\/span>,<\/span>
\n            ]<\/span>
\n        }<\/span>,<\/span>
\n        \/\/ create a sheet with the default configuration<\/span>
\n        {<\/span>
\n            data:<\/span> [<\/span>
\n                {<\/span> cell:<\/span> "a1"<\/span>,<\/span> value:<\/span> "Country"<\/span> }<\/span>,<\/span>
\n                {<\/span> cell:<\/span> "b1"<\/span>,<\/span> value:<\/span> "Product"<\/span> }<\/span>,<\/span>
\n            ]<\/span>
\n        }<\/span>
\n    ]<\/span>
\n}<\/span>;<\/span>
\n 
\nspreadsheet.parse<\/span>(<\/span>styledData)<\/span>;<\/span><\/div><\/div>\n

A range of new API methods allows manipulating sheets programmatically. For example, the getActiveSheet<\/strong> method returns the active sheet, while the getSheets<\/strong> method returns all the sheets in the spreadsheet. The names of the addSheet<\/strong> and removeSheet<\/strong> methods speak for themselves. <\/p>\n

Please note that using these methods to manage multiple sheets is possible only if the multiSheets<\/strong> configuration option is enabled.<\/p>\n

Listening to User Actions<\/h5>\n

New events<\/a> introduced in v4.1 ensure the interactivity of DHTMLX Spreadsheet, hence enhanced user experience. They allow tracking such user actions as adding and removing sheets, renaming a sheet, and switching between sheets. There is a separate event for firing before and after a certain action occurs.<\/p>\n

Other Updates<\/h5>\n

Another new feature delivered in v4.1 is the ability to get the formula of a cell via the getFormula<\/strong><\/a> method. This method can return the formula from the active sheet as well as from any sheet specified as a parameter together with the id of the cell:<\/p>\n

var<\/span> formula =<\/span> spreadsheet.getFormula<\/span>(<\/span>"sheet1!B2"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Existing methods for getting and setting cell values, styles, and format, locking and unlocking cells, and checking their state are also updated. From now on, you can apply any of these methods to a cell from a particular sheet by adding the name of the required sheet before the cell id to the parameter of the method as the cell parameter.<\/p>\n

Current clients can download the minor update from their Client’s Area<\/a>.<\/p>\n

Meanwhile, we are looking forward to your feedback. Feel free to leave your comments in the discussion below or address your questions to our technical support team via email.<\/p>\n

Related Materials:<\/h5>\n

We invite you to test the new v4.1 of DHTMLX Spreadsheet<\/a> free of charge during a 30-day trial period. <\/p>\n

To populate<\/a> your spreadsheet with data for multiple sheets, all you have to do is to pass the prepared data via the parse<\/strong> method. The data should contain an array with sheets objects and an object with styles applied to particular cells:<\/p>\n