{"id":12667,"date":"2024-08-27T17:18:01","date_gmt":"2024-08-27T14:18:01","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12667"},"modified":"2025-05-06T20:10:46","modified_gmt":"2025-05-06T17:10:46","slug":"dhtmlx-pivot-2-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-pivot-2-0\/","title":{"rendered":"DHTMLX Pivot 2.0: Overhauled JS Pivot Table with Superior Performance, Frozen and Collapsible Columns, New Total Option, and Much More"},"content":{"rendered":"

Today we are thrilled to announce the release of DHTMLX Pivot 2.0. This major release is a turning point in the development of this product. Here we offer a renewed JavaScript Pivot table<\/a> with the codebase overhaul, enhanced performance, and numerous new features.<\/p>\n

Now, DHTMLX Pivot is much faster at rendering and generating extensive bulks of data. Our development team also prepared multiple configuration options for modifying the look and behavior of the main Pivot elements. For instance, Pivot columns can now be frozen and have a total column, collapsed and expanded states, and vertical headers. For pivot rows, we introduced adjustable heights and the ability to make all rows collapsible in tree mode. Additionally, v2.0 offers an opportunity to set limits for aggregated data and a range of new math methods to aggregate data more effectively and facilitate in-depth data analysis.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Pivot v2.0<\/div>\n\t\t
Estimate the updated functionality for delivering a multifunctional JavaScript Pivot table<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Let us tell you in more detail what to expect from DHTMLX Pivot 2.0.<\/p>\n

Faster JavaScript Pivot for Immense Data Sets<\/h5>\n

Tools like a Pivot table are commonly used in data-driven web applications, where performance plays a crucial role. That is why the new iteration of our JavaScript Pivot comes with a significant speed improvement when working with huge data sets. Using this sample<\/a>, you can test how fast our Pivot can generate and render datasets with up to 1 million rows. This measure guarantees that our JS Pivot handles and processes large volumes of data without lagging or any other performance issues.<\/p>\n

New Configuration Options for Columns<\/h5>\n

Columns are a key structural element of any Pivot table. They play a vital role in organizing, categorizing, and presenting data. In DHTMLX Pivot 2.0, this element becomes more configurable thanks to several new features. Let us take a closer look at these novelties.<\/p>\n

Frozen Columns<\/h6>\n

Starting from v2.0, it is possible to freeze the leftmost columns of the Pivot table, thereby maintaining their visibility during scrolling. This feature can be helpful when end-users need to keep columns with some essential benchmark data visible while scrolling numerous data. This way you maintain context for analyzing and comparing data without the need to constantly scroll back and forth.<\/p>\n

To enable this feature, you need to use the split<\/strong> parameter of the tableShape<\/a><\/strong> property. In this parameter, you have to set the value of the left<\/strong> property to true<\/em>.<\/p>\n

const<\/span> pivotWidget =<\/span> new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\ntableShape:<\/span> {<\/span>
\nsplit:<\/span> {<\/span>
\nleft:<\/span> true<\/span> \/\/freezes all fields from rows on the left side<\/span>
\n}<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The number of split columns corresponds to the number of rows specified in the config property. You can also freeze an arbitrary number of columns from the left. Find more details on configuring frozen columns in this section<\/a> of the documentation.<\/p>\n

Collapsing and Expanding Columns<\/h6>\n

Large Pivot tables often contain so many columns that it may be hard to find necessary pieces of information at once. That is why we came up with the idea to enable end-users to expand and collapse a specific column with just a click on its header. This makes it easier to focus on relevant metrics or categories without being distracted by too much data. Also, end-users don\u2019t have to scroll through extensive data to perform an effective side-by-side comparison of particular data segments.<\/p>\n

To make columns collapsible, you have to change the value of the collapsible<\/strong> parameter in the headerShape<\/a><\/strong> property from false<\/em> (default value) to true<\/em>.<\/p>\n

const<\/span> widget =<\/span> new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\nfields,<\/span>
\ndata:<\/span> dataset,<\/span>
\nheaderShape:<\/span> {<\/span>
\ncollapsible:<\/span> true<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Total Column<\/h6>\n

The updated DHTMLX Pivot allows adding an extra column with total values in the Pivot table. It nicely complements the already available total values option for rows in the footer (totalRow<\/strong> property in new API).<\/p>\n

Programmatically, this feature is implemented via the new totalColumn<\/strong> parameter with the value set to true<\/em> (false<\/em> by default) in the tableShape<\/a><\/strong> object.<\/p>\n

const<\/span> widget =<\/span> new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\ntableShape:<\/span> {<\/span>
\ntotalRow:<\/span> true<\/span>,<\/span>
\ntotalColumn:<\/span> true<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"JSCheck the sample ><\/a><\/p>\n

Thus, end-users get an additional layer of detail and convenience when working with tabular data. For instance, it allows quickly comparing individual row totals against column totals and get a more comprehensive data summary.<\/p>\n

Vertical Headers<\/h6>\n

It is common to display text in headers of Pivot tables horizontally, but what if your text label is too long? Of course, it can be truncated or wrapped, but there is a better solution. In v2.0, we added the possibility of switching the text orientation in all headers from horizontal to vertical. Vertical headers help maintain a compact design in tables with many columns and ensure better readability.<\/p>\n

You can do it in the code by changing the value of the vertical<\/strong> parameter in the headerShape<\/a><\/strong> property from false<\/em> (default value) to true<\/em>.<\/p>\n

const<\/span> widget =<\/span> new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\nfields,<\/span>
\ndata:<\/span> dataset,<\/span>
\nheaderShape:<\/span> {<\/span>
\nvertical:<\/span> true<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

With these three new features, Pivot tables created with DHTMLX become more visually appealing and easier to interpret.<\/p>\n

New Ways to Modify Pivot Rows<\/h5>\n

In general, a Pivot table is a more sophisticated tool for data analysis than a grid or a spreadsheet structurally. So, if you decide to add a JavaScript Pivot table to your web project, you\u2019ll certainly want to make it as convenient as possible for end-users. Therefore, this release also includes several features designed to enhance the overall experience with Pivot tables built with DHTMLX.<\/p>\n

Adjustable Size for Table Rows<\/h6>\n

The new version of our Pivot component is also notable for a more flexible approach to configuring the dimensions of your Pivot table. In addition to the already available option for manipulating the width of columns (colWidth<\/strong> in new API), it has become possible to adjust the height for rows, headers, and footers to specific requirements.<\/p>\n

For this purpose, you should use the tableShape<\/a><\/strong> property with the sizes<\/strong> parameter, where you can specify such optional size attributes as rowHeight<\/strong>, headerHeight<\/strong>, footerHeight<\/strong>, and colWidth<\/strong>.<\/p>\n

Here is how it works in practice:<\/p>\n

new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\nfields,<\/span>
\ndata:<\/span> dataset,<\/span>
\ntableShape:<\/span> {<\/span>
\nsizes:<\/span> {<\/span>
\nrowHeight:<\/span> 24<\/span>,<\/span>
\nheaderHeight:<\/span> 24<\/span>,<\/span>
\nfooterHeight:<\/span> 24<\/span>,<\/span>
\ncolWidth:<\/span> 220<\/span>,<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

As a result, end-users can expect optimized data presentation and improved usability.<\/p>\n

Collapsing and Expanding All Rows in Tree Mode<\/h6>\n

DHTMLX Pivot allows presenting data in a hierarchical format (tree mode) with expandable rows. Taking into account that Pivot tables usually include a large number of rows, it can be great to be able to expand and collapse all rows at once. And we added this feature in v2.0.<\/p>\n

Now, we highlight how it works under the hood.<\/p>\n

First, you enable the tree mode<\/a> using the corresponding parameter in the tableShape<\/a><\/strong> property:<\/p>\n

const<\/span> widget =<\/span> new<\/span> pivot.Pivot<\/span>(<\/span>"#pivot"<\/span>,<\/span> {<\/span>
\ntableShape:<\/span> {<\/span>
\ntree:<\/span> true<\/span>
\n}<\/span>,<\/span>
\n...
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

To make all tree branches expand or collapse by default, you can iterate all the rows in the resulting data before it renders and open or close them by setting the open<\/strong> parameter to true<\/em> or false<\/em> respectively.<\/p>\n

const<\/span> api =<\/span> widget.api<\/span>;<\/span>
\nconst<\/span> table =<\/span> api.getTable<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

api.intercept(“render-table”, ev => {
\nev.config.data.forEach(r => (r.open = false));
\n});<\/p>\n

You can also change the state of the branches dynamically like in the example below, where all rows get expanded or collapsed with the button click.<\/p>\n

function<\/span> openAll(<\/span>)<\/span> {<\/span>
\ntable.exec<\/span>(<\/span>"open-row"<\/span>,<\/span> {<\/span> id:<\/span> 0<\/span>,<\/span> nested:<\/span> true<\/span> }<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

function closeAll() {
\ntable.exec(“close-row”, { id: 0, nested: true });
\n}<\/p>\n

Check the sample ><\/a><\/p>\n

This feature contributes to faster interaction and analysis of large datasets.<\/p>\n

As you can see, your JS pivot tables can be complemented with new features that make the work with data more convenient and productive.<\/p>\n

New Data Aggregation Capabilities<\/h5>\n

Data aggregation is a core functionality of DHTMLX Pivot. In practice, it is the process of transforming complex data into concise and summarized formats, making it easier to analyze and derive meaningful insights. In version 2.0, you can benefit from some new features focused on data aggregation.<\/p>\n

New Default Math Methods<\/h6>\n

Previously, DHTMLX Pivot provided a set of predefined methods for performing basic math operations on raw data and transforming it into meaningful insights. In v2.0, we expanded the list of default math methods with 9 new options to perform more complex calculations.<\/p>\n

Some of these methods are well-suited for working with both text and numeric values. For instance, now you can count the number of unique values in a certain list (countunique) or the number of non-empty cells regardless of their content (counta).<\/p>\n

There are plenty of new statistical methods that allow you to calculate the average, median, product, standard deviation, and variance of numeric values.<\/p>\n

You can get acquainted with all the new default math methods of DHTMLX Pivot 2.0 in this section<\/a> of the documentation.<\/p>\n

Limiting Aggregated Data in Pivot Table<\/h6>\n

Besides the overall performance improvement mentioned above, our team implemented one more feature aimed at making DHTMLX Pivot even faster. From now on, it is possible to limit the dataset to be processed by the Pivot table.<\/p>\n

How will it affect the Pivot\u2019s performance? Aggregating only a part of the data will help reduce memory consumption on the devices of end-users and you can be sure that your app won’t shut down because of huge datasets.<\/p>\n

To do that in your JS Pivot table, you\u2019ll need to apply the limits<\/strong> property. It takes three optional parameters that specify when data rendering should stop:<\/p>\n

Check the sample ><\/a><\/p>\n

\"PivotCheck the sample ><\/a><\/p>\n

\"PivotCheck the sample ><\/a><\/p>\n

\"PivotCheck the sample ><\/a><\/p>\n