{"id":7778,"date":"2020-10-19T16:12:43","date_gmt":"2020-10-19T13:12:43","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7778"},"modified":"2024-08-10T13:51:39","modified_gmt":"2024-08-10T10:51:39","slug":"dhtmlx-spreadsheet-math-formulas-frozen-columns-typescript","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-spreadsheet-math-formulas-frozen-columns-typescript\/","title":{"rendered":"DHTMLX Spreadsheet 4.0 with Math Formulas, Frozen Columns, and TypeScript Support"},"content":{"rendered":"<p>The autumn season of 2020 is rich in updates of the DHTMLX JavaScript libraries. Here comes the major release of the Spreadsheet component intended for the convenient processing of large amounts of data. DHTMLX Spreadsheet 4.0 delivers much-anticipated math and string functions compatible with Excel and Google Sheets, frozen columns, a new text format, and TypeScript support.<\/p>\n<p><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSpreadsheet\/download.shtml\" target=\"_blank\" rel=\"noopener\"><strong>Download a free 30-day evaluation version of Spreadsheet 4.0 &gt;<\/strong><\/a><\/p>\n<h5>Math Formulas<\/h5>\n<p>The highlight of the release is the introduction of <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/functions\/\" target=\"_blank\" rel=\"noopener\">math functions<\/a> for defining relationships between values in the Spreadsheet. Starting with 4.0, DHTMLX Spreadsheet includes 25 math formulas and 9 string functions. They are predefined and do not require any coding. The built-in functions correspond with the ones used in Excel and Google Sheets.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7781\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Spreadsheet.gif\" alt=\"Math functions in DHTMLX JavaScript Spreadsheet\" width=\"880\" height=\"528\" \/><\/p>\n<p>Let\u2019s get acquainted with some of the functions available in DHTMLX Spreadsheet. Apart from the commonly used SUM, AVERAGE, COUNT, MIN, and MAX functions, there is a range of more complicated formulas. For example, the POWER function is equivalent to an exponent in math. The SQRT function calculates the positive square root of a number. The SUMSQ function returns the sum of the squares of arguments.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7783\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/POWER_Formula.gif\" alt=\"POWER Formula in DHTMLX Spreadsheet\" width=\"877\" height=\"428\" \/><\/p>\n<p>The string functions serve to manipulate text and present information in the desired way. Thus, you can convert lowercase letters to uppercase ones, shorten the text to a specified number of letters, join separate text strings into one string, and much more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7785\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/String.gif\" alt=\"String functions in DHTMLX Spreadsheet\" width=\"873\" height=\"428\" \/><\/p>\n<p>We have prepared a special <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/samples\/01_init\/06_formulas.html\" target=\"_blank\" rel=\"noopener\">cheatsheet<\/a> with all the 34 functions available in DHTMLX Spreadsheet to help you choose and apply the necessary formulas for your project.<\/p>\n<h5>Frozen Columns<\/h5>\n<p>Another important feature for a truly Excel-like experience is the ability to <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/configuration\/#frozen-columns\" target=\"_blank\" rel=\"noopener\">freeze columns<\/a> on the left side of the Spreadsheet. V4.0 enables you to freeze as many columns as you need using the <strong>leftSplit<\/strong> property:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> spreadsheet <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Spreadsheet<\/span><span class=\"br0\">&#40;<\/span>document.<span class=\"me1\">body<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br \/>\n&nbsp; &nbsp; leftSplit<span class=\"sy0\">:<\/span><span class=\"nu0\">2<\/span> <br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Freeze-columns.gif\" alt=\"Freeze columns in DHTMLX Spreadsheet\" width=\"884\" height=\"452\" class=\"aligncenter size-full wp-image-7824\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/samples\/03_configuration\/08_frozen_columns.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<h5>TypeScript Support<\/h5>\n<p>As we are dedicated to supporting TypeScript in all DHTMLX components, we have provided built-in type definitions in DHTMLX Spreadsheet 4.0. No more struggling with methods and properties. Type suggestions, autocompletion, and type checking will prevent code errors and speed up your work.<\/p>\n<h5>Text Format<\/h5>\n<p>Previously, DHTMLX Spreadsheet offered four default types of formats: number, percent, and currency formats and a common format for unformatted values. In v4.0 we have added the <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/number_formatting\/\" target=\"_blank\" rel=\"noopener\">text format<\/a> as the fifth default format type.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7789\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Text-format.png\" alt=\"Text format in DHTMLX Spreadsheet\" width=\"882\" height=\"494\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Text-format.png 882w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Text-format-300x168.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Text-format-768x430.png 768w\" sizes=\"auto, (max-width: 882px) 100vw, 882px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/samples\/01_init\/01_basic.html\" target=\"_blank\" rel=\"noopener\">Check the sample &gt;<\/a><\/p>\n<h5>Other Improvements<\/h5>\n<p>In addition to new functionality, we have worked on the improvement of existing Spreadsheet features. For instance, we have added a new keyboard shortcut &#8220;Ctrl+Shift+Left Click&#8221; for selecting several scattered data ranges at once. You can check the list of all fixes and updates <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/whats_new\/\" target=\"_blank\" rel=\"noopener\">in the documentation<\/a>.<\/p>\n<p>We do hope that the newly released update will help you accomplish your web development projects and complement your JavaScript toolkit. Feel free to send us your comments via the comment section below.<\/p>\n<p>As always, current clients may find the latest version in their <a href=\"https:\/\/dhtmlx.com\/clients\/\" target=\"_blank\" rel=\"noopener\">Client&#8217;s Area<\/a>.<\/p>\n<p>If you are new to DHTMLX Spreadsheet, we invite you to <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSpreadsheet\/download.shtml\" target=\"_blank\" rel=\"noopener\">download and test the latest version 4.0<\/a> free of charge for 30 days.<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li>Full list <a href=\"https:\/\/docs.dhtmlx.com\/spreadsheet\/whats_new\/\" target=\"_blank\" rel=\"noopener\">&#8220;What&#8217;s new in v4.0&#8221;<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/wux2b35b?tag=spreadsheet\" target=\"_blank\" rel=\"noopener\">Spreadsheet samples<\/a><\/li>\n<li>More about <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSpreadsheet\/\" target=\"_blank\" rel=\"noopener\">JavaScript spreadsheet<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSpreadsheet\/download.shtml\" target=\"_blank\" rel=\"noopener\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n<p><meta name=\"twitter:card\" content=\"summary_large_image\"><br \/>\n<meta name=\"twitter:image\" content=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/10\/Spreadsheet-4.0-blog-small-294x235.png><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The autumn season of 2020 is rich in updates of the DHTMLX JavaScript libraries. Here comes the major release of the Spreadsheet component intended for the convenient processing of &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":7802,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,1,38],"tags":[33,34,41,4],"class_list":["post-7778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-spreadsheet","tag-typescript","tag-dhtmlx-updates"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=7778"}],"version-history":[{"count":29,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7778\/revisions"}],"predecessor-version":[{"id":12716,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7778\/revisions\/12716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7802"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}