We take a look at some interesting tools that allow web developers to quickly make pivot grids so their team can ingest and comb through data easier.
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
The number of supported data formats won’t disappoint you either. You can work with CSV, JSON, SQL databases (Oracle, MySQL, etc.), XMLA providers (MS Analysis Services, Mondrian, and icCube). This component is fully customizable due to its rich API. There’s the possibility to define what features will be enabled or disabled. As well, you can build your custom scenarios around the component. API covers every aspect of data presentation. All settings can be stored in a report object which can be saved and restored if needed.
Flexmonster provides users with dozens of handy features. For example, there are three ways of filtering:
Filtering by members’ names, users can choose which exact members will be shown for a particular field.
Filter by value returns top X results.
Report filter can be used for convenient data representation in reports. It allows you to focus on important data subsets and avoid overloading with large amounts of unnecessary info.
The sorting feature allows placing rows and columns in alphabetical or numeric order. The grouping feature allows saving some screen space which is especially helpful in the case of mobile devices. The built-in exporting feature allows exporting your table to the following formats: HTML, CSV, Excel, PDF, and PNG.
This component supports different types of formatting:
Conditional formatting allows highlighting cells depending on particular values.
Number formatting is convenient for changing the appearance of numbers, without actual changing of value. You can add currency symbols or decimal separators.
The demo page contains a lot of examples each of which is explained in detail. The source code for each demo is available on JSFiddle. The documentation page is pretty detailed and contains a lot of step-by-step guides, code examples, and some screenshots. Looks like a great component indeed! But unfortunately, it’s not a free tool. The annual subscription will cost you $799. Perpetual license, in its turn, costs $1999.
In addition to the built-in table, heat map, and table-bar chart renderers, PivotTable.js allows creating different types of charts. You can use either C3 Charts, D3 Visualizations, or Google Charts for such tasks. Unfortunately, currently, there’s no feature that allows you to export to an Excel file. But you can generate TSV output similar to the Table Renderer, which, in turn, can be copy-pasted to Excel. This component was initially designed to be a client-side component. It requires all the data to be supplied up front in the browser. Thus, you can integrate this library with any server-side technology which is able to provide data in a compatible format, but there is no ‘deep’ integration beyond the original data load.
The main page of the project contains a bunch of demos, each of which has the basic description and source code. The documentation wiki describes the use of the main parameters and features. In general, I can say that the documentation is rather modest. But since PivotTable.js is a pretty simple and minimalistic component, it’s unlikely that you will face any difficulties. This pivot grid is a free-to-use tool and distributed under the MIT license.
Using aliases, you can make a data set more compact by reducing the number of duplicate data values. Conditional cell formatting allows for the highlighting those cells that have particular values. You can filter the content of cells in accordance with the type of data they contain. There are three different filters:
By default, dhtmlxPivot supports four basic operations (sum, max, min, and count), but if needed, you can add custom ones. When you click on the header of the row, a sorting icon will appear on the screen in order to help you to sort the listed data according to your needs. The exporting feature allows exporting your tables to the Excel files. It’s worth noting that all custom styles that were added during the work with the table will be exported as well.
Orb.js is a React-based library for creating pivot grid apps. It provides users with all the required features. The drag-and-drop oriented interface allows for the moving of fields between the axes using the cursor. You can sort the content of a column, use filtering, and drill down into the pivot grid data. Orb.js can evaluate grand totals and subtotals. You can enable fixed headers. The exporting feature allows you to export your table to Excel. This component is fully customizable.
As you can see, there’s nothing fancy here. Only the basic features required for developing a neat, minimalistic, and fast pivot grid. The documentation is not very extensive and does not contain any demos or screenshots that demonstrate what result you’ll get following the instructions. As you might have guessed, this component is a free-to-use tool and distributed under the MIT license.
The WebPivotTable component is a pivot table for data analysis and report creation that mimics the behavior of Microsoft Excel. It works in all modern browsers such as Firefox, Chrome, Opera, Safari, and Internet Explorer. Among the supported operating systems, there are Windows, iOS, and Android. The drag-and-drop interface, along with the familiar user interface, makes it pretty easy to use for those who have some experience with Excel. It can run independently, or you can integrate it with your website or web application. This component supports different types of data such as CSV/XLS/XLSX data and Google spreadsheet. As well, you can load CSV data from a local drive, the Internet, or cloud drives. WebPivotTable allows you to create visualizations in the form of charts and it has great basic features such as filtering, sorting, formatting, and layout changes. The exporting feature supports a wide variety of file formats: PDF, Excel HTML, JPEG, and PNG. You can drill through the data by just clicking.
To be honest, I can’t say that the documentation page is able to answer all the questions that may appear during the work with this component. It includes a Quick Start Guide, important info on customization and other aspects, but it’s not as detailed as one can expect. WebPivotTable is distributed under two licenses. You can choose a free edition with limited functionality or go for the Component Edition which will cost you $1,499.
jbPivot is a simple jQuery pivot table widget. This one is, probably, the most minimalistic pivot table component among the other examples. You can install it using the npm package manager, and it doesn’t require much effort to get started. The drag-and-drop oriented user interface allows dragging the fields to any axis. There’s the possibility to add records to the table dynamically if needed. The sorting feature allows you to specify whether you want to sort the table items in ascending or descending order. There’s also the possibility to define the custom grouping criteria.
The documentation page does not contain any deep explanations. You’ll only learn how to initialize the component on the page. If you don’t have any previous experience with the pivot tables, it’ll be hard to understand how everything works. However, it’s a pretty good choice if you’re looking for a fast jQuery plugin for creating a pivot table on the page. There’s no exporting or any other complex feature of such kind. But if you’re dealing with small amounts of data, jbPivot will work just fine for you. This component is a free-to-use tool. It’s distributed under the GPLv3 license.
Opinions expressed by DZone contributors are their own.