\n
![\"javascript](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/03\/javascript-spreadsheet.png\")
<\/p>\nWe continue to gradually enhance our JavaScript components – and now it’s the turn of dhtmlxSpreadsheet to receive new powers and abilities.
\n<\/p>\n
The JavaScript spreadsheet<\/a> was completely updated 4 months ago. The recent minor v3.1 brings out several features, which are essential for conveniently working with data:<\/p>\n Before we go over the release details – download the latest trial version of JavaScript spreadsheet<\/a> 3.1 to test it on the fly.<\/p>\n The current update enables end users to import Excel data into a web spreadsheet component as well as export data from Spreadsheet to Excel. The export and import operations became possible due to our two new WebAssembly-based libraries Excel2Json<\/a> and Json2Excel<\/a>. These libraries were developed by our team as open-source tools for converting Excel files into the JSON format and vice versa. They make use of the Rust programming language and WebAssembly.<\/p>\n In order to use the export and import of Excel files into your JavaScript spreadsheet, you only need to take 3 steps: Read a detailed instruction on the import of data to Excel<\/a> and export of data to Excel<\/a> in the documentation.<\/p>\n V3.1 comes out with an ability to set different formats for numeric values in cells. Spreadsheet default number formats<\/a> are common (“”), currency (“$#,##0.00”), number (“#,##0.00”), and percent (“#,##0.00%”). <\/p>\n Applying a number format to a value is easy with the setFormat<\/strong> method:<\/p>\n Besides, there is the getFormat<\/strong> method, which allows you to define what number format is applied for a particular cell:<\/p>\n On top of all, you can modify the default number formats or even create custom formats via the formats<\/strong> configuration option. For example, you can change the name of the predefined currency format for “U.S. dollar” and add two new formats with ids – “euro” and “franc”:<\/p>\n By the way, our Spreadsheet component automatically detects the format of content in cells due to the autoFormat<\/strong> configuration option enabled by default. However, you are free to disable it if you want.<\/p>\n From now on, there is no more need for tediously typing in data by hand, as our JavaScript Spreadsheet is able to fill cells with data automatically. The autofill is based on a range of widespread patterns. For instance, in order to get a sequence of consecutive numbers from 1 to n, you just need to enter 1 and 2 into the first two cells and drag the fill handle to grab and autofill as many cells as you need. The spreadsheet can also automatically create sequences of odd and even numbers. Moreover, there is a pattern for making a series of numbers with letters.<\/p>\n We’ve improved hotkeys behavior for easier spreadsheet navigation inside a range of cells:<\/p>\n So the next step is to download dhtmlxSpreadsheet 3.1 free trial version<\/a> and test all the new features yourself!<\/p>\n We’re looking forward to your feedback about the release – share your thoughts in the comments below or write to us: info@dhtmlx.com<\/a><\/p>\n Current clients are invited to download the latest version in their Client’s Area<\/a>. <\/p>\n We continue to gradually enhance our JavaScript components – and now it’s the turn of dhtmlxSpreadsheet to receive new powers and abilities. The JavaScript spreadsheet was completely updated 4 …<\/p>\n","protected":false},"author":101012,"featured_media":6060,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,1,38],"tags":[33,34,4],"class_list":["post-6009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-spreadsheet","tag-dhtmlx-updates"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6009","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=6009"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6009\/revisions"}],"predecessor-version":[{"id":12714,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6009\/revisions\/12714"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/6060"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=6009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Import and Export to Excel<\/h5>\n
\n![\"Export](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/03\/bandicam-2019-03-21-12-58-07-001.png\")
Check the samples with import of Excel data into Spreadsheet <\/a>and export of Spreadsheet data to Excel ><\/a><\/strong><\/p>\n
\n1) Install the corresponding library for export and import
\n2) Specify the necessary options in the Spreadsheet configuration and link the component to the installed libraries
\n3) Apply the related API methods<\/p>\nNumber Formatting<\/h5>\n
\/\/ applies the currency format to the cell A1<\/span>
\nspreadsheet.setFormat<\/span>(<\/span>"A1"<\/span>,<\/span>"currency"<\/span>)<\/span>;<\/span><\/div><\/div>\nvar<\/span> format =<\/span> spreadsheet.getFormat<\/span>(<\/span>"A1"<\/span>)<\/span>;<\/span>
\n\/\/ ->"currency"<\/span><\/div><\/div>\nvar<\/span> spreadsheet =<\/span> new<\/span> dhx.Spreadsheet<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n formats:<\/span> [<\/span>
\n {<\/span>
\n name:<\/span> "U.S. Dollar"<\/span>,<\/span>
\n id:<\/span> "currency"<\/span>,<\/span>
\n mask:<\/span> "$#,##0.00"<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n name:<\/span> "Euro"<\/span>,<\/span>
\n id:<\/span> "euro"<\/span>,<\/span>
\n mask:<\/span> "[$\u20ac]#.##0,00"<\/span>,<\/span>
\n example:<\/span> "1000.50"<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n name:<\/span> "Swiss franc"<\/span>,<\/span>
\n id:<\/span> "franc"<\/span>,<\/span>
\n mask:<\/span> "[$CHF ]#.##0,00"<\/span>
\n }<\/span>
\n ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n![\"Custom](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/03\/Custom-number-formatting.png\")
Check the sample ><\/a><\/strong><\/p>\nAutomatic Filling of Cells with Content<\/h5>\n
![\"Auto](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/03\/Auto-filling-of-cells-1.gif\")
Check the user guide ><\/a><\/strong><\/p>\nEnhanced Hotkeys Navigation<\/h5>\n
\n
![\"Hotkeys](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/03\/hotkeys-behavior.gif\")
Check the user guide ><\/a><\/strong><\/p>\nRelated Materials:<\/h5>\n
\n