{"id":13741,"date":"2025-05-07T08:08:14","date_gmt":"2025-05-07T05:08:14","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13741"},"modified":"2025-05-23T14:14:46","modified_gmt":"2025-05-23T11:14:46","slug":"dhtmlx-pivot-2-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-pivot-2-1\/","title":{"rendered":"DHTMLX Pivot 2.1 with Custom Field Formatting, HTML Templates, Enhanced Styling, Fixed Right-Side Columns, and More"},"content":{"rendered":"<p>We hope you had enough time to explore the fully overhauled DHTMLX JavaScript Pivot table 2.0 and apply it efficiently for data analysis in your projects. Now, it is time to move forward and present a new version of this JavaScript component. The DHTMLX Pivot 2.1 expands developers\u2019 capabilities in modifying the table\u2019s appearance via newly added CSS styling options, HTML templates, and custom formatting for numbers and dates. Apart from that, the release includes the ability to freeze columns on the right, expanded export settings to Excel and CSV, and some minor improvements. As a bonus, our team also prepared integration demos that will make it much easier for you to use our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxPivot\/\" rel=\"noopener\" target=\"_blank\">JavaScript Pivot table<\/a> with React, Angular, Vue, and Svelte.<\/p>\n\n\t\t<div class='post-banner'>\n\t\t    <div class='post-banner__inside'>\n\t\t        <div>\n\t\t            <div class=\"post-banner__title\">Download DHTMLX Pivot v2.1<\/div>\n\t\t            <div class=\"post-banner__text\">Estimate the updated functionality for delivering a multifunctional JavaScript Pivot table<\/div>\n                <\/div>\n\t\t            \n                \n            <div class='post-banner__btn'>\n                <a href='https:\/\/dhtmlx.com\/docs\/products\/dhtmlxPivot\/download.shtml' title='' class='button-secondary'>Get free trial<\/a>\n            <\/div>\n        \n            <\/div>\n\t\t<\/div>\n\t\n<p>In this release article, we provide a detailed overview of the Pivot 2.1 novelties.<\/p>\n<h5>Flexible Formatting for Number and Date Fields<\/h5>\n<p>When incorporating a pivot table into a web app with a strong emphasis on international business, it is important to bear in mind existing differences in number and date formatting in various countries. Overlooking this may lead to misinterpretation of data or a poor user experience for global teams. <\/p>\n<p>With the newly added support for <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/guides\/localization\/#number-formatting\" rel=\"noopener\" target=\"_blank\">locale-dependent formatting<\/a> in DHTMLX Pivot, you can be sure that date and number fields will be automatically adjusted according to the app\u2019s current locale. You can test how it works by switching between locales in this <a href=\"https:\/\/snippet.dhtmlx.com\/aj5zmxpv?tag=pivot&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">example<\/a> and paying attention to formatting changes in the Profit and Date columns.<\/p>\n<p>Date and number formats can be changed at the locale level, but if needed, you can also <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/guides\/working-with-data\/#applying-formats-to-fields\" rel=\"noopener\" target=\"_blank\">apply a custom format<\/a> to specific date and number fields using the <strong>format<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/fields-property\/\" rel=\"noopener\" target=\"_blank\">fields<\/a><\/strong> property:<\/p>\n<ul>\n<li>Custom number formatting<\/li>\n<\/ul>\n<p>The <strong>format<\/strong> parameter allows specifying the number of fraction digits and integer digits as well as symbols before (<strong>prefix<\/strong>) and after (<strong>suffix<\/strong>) numeric values:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">&nbsp;fields<span class=\"sy0\">:<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;marketing&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Marketing&quot;<\/span><span class=\"sy0\">,<\/span> type<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;number&quot;<\/span><span class=\"sy0\">,<\/span> formats<span class=\"sy0\">:<\/span><span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; prefix<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;$&quot;<\/span><span class=\"sy0\">,<\/span> minimumFractionDigits<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> maximumFractionDigits<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><\/div><\/div>\n<p>By default, the display of fraction digits in numeric values is limited to 3, and group separation is applied for the integer part. <\/p>\n<ul>\n<li>Custom date formatting<\/li>\n<\/ul>\n<p>The default date format (&#8220;%d.%m.%Y&#8221;) is set via the <strong>dateFormat<\/strong> parameter of the current locale, but you can redefine it via the <strong>format<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/fields-property\/\" rel=\"noopener\" target=\"_blank\">fields<\/a><\/strong> property:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">fields<span class=\"sy0\">:<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#123;<\/span>id<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;Date&quot;<\/span><span class=\"sy0\">,<\/span> type<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span> format<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;%M %d, %Y&quot;<\/span> <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/77nc4j8v?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nWhen formatting for specific fields is not required, you can disable it by changing the value of the <strong>format<\/strong> parameter to <em>false<\/em>.<\/p>\n<h5>New Styling Options for Cells and Headers<\/h5>\n<p>Styling may not be a factor that directly determines the efficiency of a pivot table in data analysis, but it certainly impacts the usability of such tools. DHTMLX Pivot 2.1 provides a couple of styling novelties to make this process more convenient.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image5.png\" alt=\"Custom cell styling\" width=\"932\" height=\"563\" class=\"aligncenter size-full wp-image-13744\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image5.png 932w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image5-300x181.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image5-768x464.png 768w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/nfdcs4i2?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>The new <strong>cellStyle<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/tableshape-property\/\" rel=\"noopener\" target=\"_blank\">tableShape<\/a><\/strong> property gives you full control over the visual appearance of individual table cells. It returns a string that serves as a CSS class name used to <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/guides\/stylization\/#cell-style\" rel=\"noopener\" target=\"_blank\">add a custom style to a cell<\/a>.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> widget <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> pivot.<span class=\"me1\">Pivot<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#pivot&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; tableShape<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; totalColumn<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; totalRow<span class=\"sy0\">:<\/span><span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; cellStyle<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>field<span class=\"sy0\">,<\/span> value<span class=\"sy0\">,<\/span> area<span class=\"sy0\">,<\/span> method<span class=\"sy0\">,<\/span> isTotal<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>field <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;status&quot;<\/span> <span class=\"sy0\">&amp;&amp;<\/span> area <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;rows&quot;<\/span> <span class=\"sy0\">&amp;&amp;<\/span> value<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>value <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;Down&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;status-down&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>value <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;Up&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;status-up&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>value <span class=\"sy0\">===<\/span> <span class=\"st0\">&quot;Idle&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;status-idle&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span> &nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n...<\/div><\/div>\n<p>Thus, you can dynamically assign a custom style to a cell based on the field name, cell value, part of the table a cell belongs to, and even aggregation operations. <\/p>\n<p>Similarly,  you can modify the appearance of headers via the <strong>cellStyle<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/headershape-property\/\" rel=\"noopener\" target=\"_blank\">headerShape<\/a><\/strong> property:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">headerShape<span class=\"sy0\">:<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; cellStyle<span class=\"sy0\">:<\/span><span class=\"br0\">&#40;<\/span>field<span class=\"sy0\">,<\/span> value<span class=\"sy0\">,<\/span> area<span class=\"sy0\">,<\/span> method<span class=\"sy0\">,<\/span> isTotal<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>field <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;streaming&quot;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> value <span class=\"sy0\">===<\/span><span class=\"st0\">&quot;no&quot;<\/span><span class=\"sy0\">?<\/span><span class=\"st0\">&quot;status-down&quot;<\/span><span class=\"sy0\">:<\/span><span class=\"st0\">&quot;status-up&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>One more styling novelty delivered in v2.1 is related to the <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/guides\/stylization\/#specific-css-classes\" rel=\"noopener\" target=\"_blank\">alignment of numbers<\/a>. From now on, numbers in cells will be aligned to the right (except for headers and tree mode) by default. If needed, you can change the alignment setting using the <strong>wx-number<\/strong> CSS class:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"re1\">.wx-number<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"kw1\">justify-content<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">start<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n&lt;\/style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>These styling enhancements will make your pivot table more readable and informative, which is essential for dashboards, financial reports, and any data-driven apps.<\/p>\n<h5>Custom HTML Templates for Pivot Cells<\/h5>\n<p>Continuing a series of visual enhancements delivered in v2.1, we are also happy to present a new way of applying custom HTML content in header and body cells with templates. Previously, you could add templates via the corresponding template parameter in the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/headershape-property\/\" rel=\"noopener\" target=\"_blank\">headerShape<\/a><\/strong> and <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/tableshape-property\/\" rel=\"noopener\" target=\"_blank\">tableShape<\/a><\/strong> properties. Now, you can go beyond plain text and enrich your JS pivot table with diverse content using the new <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/helpers\/template\/\" rel=\"noopener\" target=\"_blank\">pivot.template<\/a><\/strong> helper.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image7.png\" alt=\"custom ontent with HTML templates\" width=\"933\" height=\"824\" class=\"aligncenter size-full wp-image-13747\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image7.png 933w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image7-300x265.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image7-768x678.png 768w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/4viq7cft?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nIn the pivot table above, you can see several vivid examples of integrating HTML templates in cells. For clarity, here is how you can add flag and star icons depending on their field (id, user_score):<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> cellTemplate<span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> method<span class=\"sy0\">,<\/span> row<span class=\"sy0\">,<\/span> column<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> field <span class=\"sy0\">=<\/span> column.<span class=\"me1\">fields<\/span> <span class=\"sy0\">?<\/span> column.<span class=\"me1\">fields<\/span><span class=\"br0\">&#91;<\/span>row.$level<span class=\"br0\">&#93;<\/span> <span class=\"sy0\">:<\/span> column.<span class=\"me1\">field<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>field <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;id&quot;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> idTemplate<span class=\"br0\">&#40;<\/span>value<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>field <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;user_score&quot;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> scoreTemplate<span class=\"br0\">&#40;<\/span>value<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">else<\/span> <span class=\"kw1\">return<\/span> value<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>The <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/helpers\/template\/\" rel=\"noopener\" target=\"_blank\">pivot.template<\/a><\/strong> helper function should be applied right before the table rendering. For this purpose, it is necessary to intercept the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/events\/render-table-event\/\" rel=\"noopener\" target=\"_blank\">render-table<\/a><\/strong> event with the <strong>api.intercept()<\/strong> method:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">widget.<span class=\"me1\">api<\/span>.<span class=\"me1\">intercept<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;render-table&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> config<span class=\"sy0\">:<\/span> tableConfig <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; tableConfig.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> tableConfig.<span class=\"me1\">columns<\/span>.<span class=\"me1\">map<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span>c<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>c.<span class=\"me1\">area<\/span> <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;rows&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c.<span class=\"me1\">cell<\/span> <span class=\"sy0\">=<\/span> pivot.<span class=\"me1\">template<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span>value<span class=\"sy0\">,<\/span> method<span class=\"sy0\">,<\/span> row<span class=\"sy0\">,<\/span> column<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> cellTemplate<span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> method<span class=\"sy0\">,<\/span> row<span class=\"sy0\">,<\/span> column<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span> &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; ...<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> c<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Using HTML templates, you can tailor the data presentation in the pivot table to your needs, improving both usability and visual appeal in your app.<\/p>\n<h5>Freezing Right-Side Columns<\/h5>\n<p>In v2.1, our dev team also added an option to freeze the pivot table&#8217;s rightmost columns (totals or summary fields). While fixing columns on the left has been available since v2.0, the new &#8220;right&#8221; option extends this functionality for more effective data analysis and decision-making. This feature allows you to keep critical data in sight on both sides of the table when scrolling horizontally through large data sets.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image6.gif\" alt=\"freezing columns on both sides\" width=\"1328\" height=\"812\" class=\"aligncenter size-full wp-image-13749\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/lahf729o?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nProgrammatically, you can enable the new option in the <strong>split<\/strong> parameter of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/config\/tableshape-property\/\" rel=\"noopener\" target=\"_blank\">tableShape<\/a><\/strong> property. Just set the values of the <strong>right<\/strong> property to <em>true<\/em> like in the following code sample:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> widget <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> pivot.<span class=\"me1\">Pivot<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#pivot&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;fields<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;data<span class=\"sy0\">:<\/span> dataset<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp;tableShape<span class=\"sy0\">:<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;split<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span>right<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;totalColumn<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n...<span class=\"co1\">\/\/other settings<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>To freeze an arbitrary number of columns on the right side, you need to intercept the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/events\/render-table-event\/\" rel=\"noopener\" target=\"_blank\">render-table<\/a><\/strong> event and define the <strong>right<\/strong> property within the <strong>split<\/strong> setting of the <strong>tableConfig<\/strong> object:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">widget.<span class=\"me1\">api<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;render-table&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> config<span class=\"sy0\">:<\/span> tableConfig <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp;<span class=\"kw1\">const<\/span> <span class=\"br0\">&#123;<\/span> config <span class=\"br0\">&#125;<\/span> <span class=\"sy0\">=<\/span> widget.<span class=\"me1\">api<\/span>.<span class=\"me1\">getState<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp;tableConfig.<span class=\"me1\">split<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;right<span class=\"sy0\">:<\/span> config.<span class=\"me1\">values<\/span>.<span class=\"me1\">length<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image5.gif\" alt=\"Freezing artbitrary number of columns\" width=\"920\" height=\"848\" class=\"aligncenter size-full wp-image-13751\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/53erlmgp?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Overall, the ability to freeze pivot columns ensures greater control over data presentation and simplifies the analysis of large datasets.<\/p>\n<h5>Extended Export Settings to Excel and CSV Formats<\/h5>\n<p>Data export is another feature of the Pivot component empowered with new configuration options in v2.1. Now, you can deliver more meaningful data exports to Excel (XLSX) and CSV formats that match the specific needs of different users. Whether you want to add the file name, export data without a header or footer, specify styling for exported pivot elements, or exclude any styling &#8211; now it is all possible with the new export parameters provided in the <strong>options<\/strong> object of the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/table\/export\/\" rel=\"noopener\" target=\"_blank\">export<\/a><\/strong> event. Before new export parameters can be applied, it is necessary to access the Table widget API with the <strong><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/api\/methods\/gettable-method\/\" rel=\"noopener\" target=\"_blank\">getTable()<\/a><\/strong> method for triggering the exporting operation.<\/p>\n<p>Here is an example of expanded export settings to the Excel format:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">...<br \/>\n<span class=\"me1\">table<\/span>.<span class=\"me1\">exec<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;export&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; options<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; format<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;xlsx&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; fileName<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;results&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ a name of file, &quot;data&quot; by default<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; header<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ export header or not, true by default<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; footer<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span> <span class=\"co1\">\/\/ export footer or not, true by default<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n...<\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/zjuloqxd?tag=pivot\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Also, we have to mention a couple of enhancements related to exporting data to Excel with specified formats and templates:<\/p>\n<ul>\n<li>Date and number fields are exported as raw values with the default format or specified custom format.<\/li>\n<li>If a field has a specified template, the export will use the rendered value from that template instead of the raw data. Templates have a higher priority over the format even if format is defined for a given field.<\/li>\n<\/ul>\n<p>The documentation contains the <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/guides\/exporting-data\/\" rel=\"noopener\" target=\"_blank\">complete information<\/a> on the new Pivot exporting settings to Excel and CSV. <\/p>\n<h5>Other Improvements<\/h5>\n<p>Apart from the main features of this release, we also have to mention a couple of minor novelties aimed to improve user experience with DHTMLX Pivot. First, there is enhanced keyboard navigation with a visual indicator.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image3.gif\" alt=\"visual frame for cell navigation\" width=\"940\" height=\"740\" class=\"aligncenter size-full wp-image-13753\" \/><\/p>\n<p>One more useful addition is the ability to filter data via an external input like in the example below.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/05\/image2.gif\" alt=\"external input for data filtering\" width=\"1616\" height=\"824\" class=\"aligncenter size-full wp-image-13754\" \/><\/p>\n<p>In addition, we also expanded the collection of live samples dedicated to providing use-case scenarios of applying the capabilities of DHTMLX Pivot and facilitating your experience with the component:<\/p>\n<ul>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/0cm0uko2?tag=pivot\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with alternative row color<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/9lkdbzmm?tag=pivot\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with custom CSS styling for total column<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/rwwhgv2w?tag=pivot\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with clean rows<\/a><\/li>\n<\/ul>\n<h5>Ready-to-Use Integration Demos with Frameworks<\/h5>\n<p>The renewed DHTMLX Pivot becomes not only more customizable and functional but also easily adoptable for web projects based on popular front-end frameworks. For v2.1, our development team prepared live integration demos that vividly demonstrate how to integrate <a href=\"https:\/\/docs.dhtmlx.com\/pivot\/category\/integration-with-frameworks\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with highly demanded frameworks<\/a>:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/react-pivot-demo\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with React<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/angular-pivot-demo\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with Angular<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/vue-pivot-demo\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with Vue<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/DHTMLX\/svelte-pivot-demo\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot with Svelte<\/a><\/li>\n<\/ul>\n<p>That wraps up the overview of the new features introduced in version 2.1. You can go through the full list of Pivot updates one more time in the &#8220;<a href=\"https:\/\/docs.dhtmlx.com\/pivot\/news\/whats-new\/#version-21\" rel=\"noopener\" target=\"_blank\">What\u2019s new<\/a>&#8221; section of the documentation. <\/p>\n<p>If you\u2019d like to try out the Pivot novelties before using them in a live project, a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxPivot\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial of v2.1<\/a>  is available for download. Existing clients can access DHTMLX Pivot 2.1 in their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client\u2019s Area<\/a>.<\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/news\/whats-new\/#version-21\" rel=\"noopener\" target=\"_blank\">What\u2019s new in v2.1<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/pivot\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/4viq7cft?tag=pivot\" rel=\"noopener\" target=\"_blank\">DHTMLX Pivot code snippets<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxPivot\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We hope you had enough time to explore the fully overhauled DHTMLX JavaScript Pivot table 2.0 and apply it efficiently for data analysis in your projects. Now, it is &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":13743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70],"tags":[33,57],"class_list":["post-13741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","tag-all-posts","tag-pivot"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13741","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\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=13741"}],"version-history":[{"count":12,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13741\/revisions"}],"predecessor-version":[{"id":13767,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/13741\/revisions\/13767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/13743"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=13741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=13741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=13741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}