{"id":6579,"date":"2019-09-12T12:17:44","date_gmt":"2019-09-12T09:17:44","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6579"},"modified":"2025-09-01T11:42:12","modified_gmt":"2025-09-01T08:42:12","slug":"dhtmlxpivot-1-4-minor-update-flat-mode-export-csv-dropdown-field-selectors","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxpivot-1-4-minor-update-flat-mode-export-csv-dropdown-field-selectors\/","title":{"rendered":"dhtmlxPivot 1.4 Minor Update: Flat Mode, Export to CSV, and Dropdown Field Selectors"},"content":{"rendered":"

A long-awaited v1.4 of our JavaScript pivot table<\/a>, a smart component for data analysis, is finally out!<\/p>\n

The highlight of the release is the ability to display data in a flattened pivot table with repeated row labels. Besides, now dhtmlxPivot is able to export data not only to Excel but also to the CSV format, which is lightweight and simple to use with any programming language. We also supplied the component with a wide range of events firing on various user actions in the grid and updated the UX of field selectors.<\/p>\n

So, let’s make a long story short…and invite you to download the latest v1.4 for 30-day evaluation<\/a>!<\/p>\n

Tree vs Flat Mode of the Grid<\/h5>\n

The update introduces different modes for visualizing pivot data. You can set up the desired mode according to the preferences of your end users. The tree-like structure of the grid has been used in dhtmlxPivot by default so far. V1.4 brings out the gridMode<\/strong> attribute<\/a> of the layout object, which helps to redefine the mode of displaying data and present it as a flattened table as shown in the picture below:
\n\"FlatCheck the sample ><\/a><\/p>\n

Apart from that, it’s possible to avoid duplicating row headers in the cells of the first column by specifying the repeatRowsHeaders:false<\/strong> property in the layout configuration:<\/p>\n

var<\/span> pivot =<\/span> new<\/span> dhx.Pivot<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    data:<\/span> dataset,<\/span>
\n    fields:<\/span> {<\/span>
\n        rows:<\/span> [<\/span>"form"<\/span>,<\/span> "name"<\/span>]<\/span>,<\/span>
\n        columns:<\/span> [<\/span>"year"<\/span>]<\/span>,<\/span>
\n        values:<\/span> [<\/span>{<\/span> id:<\/span> "oil"<\/span>,<\/span> method:<\/span> "max"<\/span> }<\/span>,<\/span> {<\/span> id:<\/span> "oil"<\/span>,<\/span> method:<\/span> "sum"<\/span> }<\/span>]<\/span>,<\/span>
\n    }<\/span>,<\/span>
\n    fieldList:<\/span> [<\/span>
\n        {<\/span> id:<\/span> "name"<\/span>,<\/span> label:<\/span> "name"<\/span> }<\/span>,<\/span>
\n        \/\/ the full list of fields<\/span>
\n    ]<\/span>,<\/span>
\n    layout:<\/span> {<\/span>                      
\n            gridMode:<\/span>"flat"<\/span>,<\/span>          
\n            repeatRowsHeaders:<\/span>false<\/span>  
\n    }<\/span>                              
\n  }<\/span>
\n)<\/span>;<\/span><\/div><\/div>\n
Export to CSV<\/h5>\n

The newly introduced pivot.export.csv()<\/strong> method of the Export module enables you to export pivot data to the CSV format<\/a>. The export settings are quite flexible and allow for the necessary adjustments. By default, you’ll get a CSV file as a result of export. However, you can choose to export data only as a CSV string by specifying the asFile:false<\/strong> configuration property. Other settings permit converting pivot into a flat table and defining custom separators between rows and columns.<\/p>\n

In the example below we’ll get a CSV file named “pivot_data” with a flat structure, tabs as row separators and semicolons as column separators:<\/p>\n

pivot.export<\/span>.csv<\/span>(<\/span>{<\/span>
\nname:<\/span>"pivot_data"<\/span>,<\/span>
\nasFile:<\/span>true<\/span>,<\/span>
\nflat:<\/span>true<\/span>,<\/span>
\nrowDelimiter:<\/span> "\\t<\/span>"<\/span>,<\/span>
\ncolumnDelimiter:<\/span> ";"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Please note that since v1.4 we recommend using the pivot.export.xlsx()<\/strong> method of the Export module instead of the pivot.export()<\/strong> method. Read the migration article<\/a> for more details.<\/p>\n

New Dropdown Field Selectors<\/h5>\n

In v1.4 we added a new type of field selectors. Now with the help of the fieldSelectorType<\/strong> attribute<\/a> you can define the look and feel of selectors and configure them either as loop selectors or dropdown lists:<\/p>\n

var<\/span> pivot =<\/span> new<\/span> dhx.Pivot<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    data:<\/span> dataset,<\/span>
\n    fields:<\/span> {<\/span>
\n        \/\/ fields structure<\/span>
\n    }<\/span>,<\/span>
\n    fieldList:<\/span> [<\/span>
\n        \/\/ full list of fields<\/span>
\n    ]<\/span>,<\/span>
\n    layout:<\/span> {<\/span>
\n    fieldSelectorType:<\/span>"dropdown"<\/span>    
\n    }<\/span>
\n  }<\/span>
\n)<\/span>;<\/span><\/div><\/div>\n
TreeGrid Events in the Pivot API<\/h5>\n

On top of all, starting with v1.4 dhtmlxPivot is able to listen to the grid events triggered by user actions such as clicks on cells, moving the mouse pointer, typing text in an input field, etc. The entire list of the newly added events is available in the documentation<\/a>.<\/p>\n

We hope the update will come in useful in your projects! We’re looking forward to hearing your feedback and comments. Feel free to evaluate the latest version<\/a> with the help of our technical support team for free for 30 days.<\/p>\n

We invite our current clients to download v1.4 of dhtmlxPivot in their Client’s Area<\/a>.<\/p>\n

Stay tuned!<\/p>\n

Related Materials:<\/h5>\n

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

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

\"FlatCheck the sample ><\/a>
\nThe new flat mode is a convenient and easy-to-read way of visualizing pivot data. It may be familiar to end users due to a similar tabular form with repeated item labels of the Excel layout.<\/p>\n