{"id":5380,"date":"2018-08-24T15:34:04","date_gmt":"2018-08-24T12:34:04","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5380"},"modified":"2025-03-10T17:46:00","modified_gmt":"2025-03-10T14:46:00","slug":"frequent-questions-developers-ask-javascript-pivot-table","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/frequent-questions-developers-ask-javascript-pivot-table\/","title":{"rendered":"Most Frequent Questions from Developers about Our JavaScript Pivot Table"},"content":{"rendered":"

dhtmlxPivot was introduced in August 2017. Over the last year our technical support team has faced various questions from the users of our JavaScript pivot table<\/a> about its configuration and customization options.<\/p>\n

As JavaScript pivot tables are widely applied in BI apps used by companies of any size, they need to be fine-tuned to meet the requirements of a particular business or country. Pivot tables help end users to analyze different types of data such as financial data, flows of capital, products, human resources, and what not. Pivot tables are supposed to process values in different formats what raises technical questions on behalf of developers, as they need to manipulate content in pivot grid cells and adjust it to the needs of the project they work on.<\/p>\n

We’ve gathered together some of the most common issues developers deal with customizing JavaScript pivot tables. So here’s a wrap-up of frequent questions and our answers.<\/p>\n

Is it possible to add currency symbols to the values of cells?<\/h6>\n

Yes, just like any other symbols currency symbols can be added to cell values with the help of the customFormat<\/a> configuration property. You can define which values require custom symbols depending on the operation applied to data in a column as shown in the example below:<\/p>\n

\"Currency<\/p>\n

customFormat:<\/span> function<\/span> (<\/span>cellValue,<\/span> method)<\/span> {<\/span>
\nif<\/span> (<\/span>method ===<\/span> "count"<\/span>)<\/span> {<\/span>
\nreturn<\/span> cellValue.toLocaleString<\/span>(<\/span>"de"<\/span>)<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> "\u20ac "<\/span> +<\/span> cellValue.toLocaleString<\/span>(<\/span>"de"<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Besides, as you see from the example, you can also apply specific localization rules that dictate how to round numbers in cells according to the locale you need (German locale in our case).<\/p>\n

Check custom formats sample ><\/a><\/p>\n

Can we change values of cells for other custom elements?<\/h6>\n

Yes, you can change values of cells for any custom content you need to be shown in your JavaScript pivot table. For this purpose you can add a custom element to the cell like an icon, link, checkbox, button etc, and even create an event handler for it, for example, to show a popup after a click on the cell content.<\/p>\n

In our case we added checkboxes to the cells in columns with the Count operation when the cell value is greater than 3.
\nRead more in docs ><\/a><\/p>\n

\"custom<\/p>\n

cellTemplate:<\/span> function<\/span> (<\/span>text,<\/span> row,<\/span> col)<\/span> {<\/span>
\nif<\/span> (<\/span>col.method<\/span> ===<\/span> "sum"<\/span>)<\/span> {<\/span>
\nreturn<\/span> '<\/span><\/div><\/div>\n
‘ + (text||””) + ‘<\/div>\n

‘
\n} else {
\nreturn ‘ 3 ? “checked” : “”) + ‘ ><\/p>\n

‘
\n}
\n}<\/p>\n

Check cell templates sample ><\/a><\/p>\n

Does JavaScript pivot table allow adding custom operations for values?<\/h6>\n

You can add any mathematical operations you need by means of the addMathMethod<\/a> method.<\/p>\n

myPivot.addMathMethod<\/span>(<\/span>"avr"<\/span>,<\/span> "Avr"<\/span>,<\/span> (<\/span>cellData)<\/span> =&<\/span>gt;<\/span> {<\/span>
\nconst<\/span> sum =<\/span> cellData.reduce<\/span>(<\/span>(<\/span>el,<\/span> all)<\/span> =&<\/span>gt;<\/span> all +=<\/span> el)<\/span>;<\/span>
\nreturn<\/span> (<\/span>sum \/<\/span> cellData.length<\/span>)<\/span>.toFixed<\/span>(<\/span>3<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

You can redefine the existing methods and add your own custom ones, with which you can specify formats of cell values the way you need. For example, you can apply particular localization rules:<\/p>\n

\"custom<\/p>\n

pivot.addMathMethod<\/span>(<\/span>"sum"<\/span>,<\/span> 'SUM'<\/span>,<\/span> function<\/span> (<\/span>cellData)<\/span> {<\/span>
\nvar<\/span> sum =<\/span> cellData.reduce<\/span>(<\/span>function<\/span> (<\/span>el,<\/span> all)<\/span> {<\/span> return<\/span> all +=<\/span> el }<\/span>)<\/span>;<\/span>
\nreturn<\/span> sum.toLocaleString<\/span>(<\/span>"en"<\/span>)<\/span>
\n}<\/span>)<\/span>;<\/span>
\npivot.addMathMethod<\/span>(<\/span>"min"<\/span>,<\/span> 'MIN'<\/span>,<\/span> function<\/span> (<\/span>cellData)<\/span> {<\/span>
\nreturn<\/span> (<\/span>Math<\/span>.min<\/span>.apply<\/span>(<\/span>null<\/span>,<\/span>cellData)<\/span>)<\/span>.toLocaleString<\/span>(<\/span>"en"<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Check custom methods sample ><\/a><\/p>\n

These were some of the most frequent questions from developers about our JavaScript pivot table component that our technical support team has encountered so far. Hope our answers turned out to be useful for you too!<\/p>\n

Currently we\u2019re working on the new functionality for dhtmlxPivot for the next updates. Vote for the features you require and check our roadmap here<\/a>.<\/p>\n

Download dhtmlxPivot 1.3 trial version<\/a>
\n<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

dhtmlxPivot was introduced in August 2017. Over the last year our technical support team has faced various questions from the users of our JavaScript pivot table about its configuration …<\/p>\n","protected":false},"author":101012,"featured_media":5392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,1],"tags":[33,57],"class_list":["post-5380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-uncategorized","tag-all-posts","tag-pivot"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5380","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=5380"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5380\/revisions"}],"predecessor-version":[{"id":13475,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5380\/revisions\/13475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5392"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}