Introducing react-pivottable
Pivot tables are interactive data exploration and summarization tools which have been a critical part of data analysts’ toolkits for the past 25 years, especially in spreadsheets like Excel. Five years ago I built PivotTable.js, which has since become one of the most popular Javascript pivot table implementations. I initially wrote it in CoffeeScript and packaged it up as a jQuery plugin, but the front-end world has evolved a lot since then so today I’m excited to announce a new-and-improved version of PivotTable.js for the modern web: react-pivottable.
You can try react-pivottable right now on a sample dataset or on one of your own, or if you just want to get to the code, it’s up on Github under an MIT license with detailed documentation.
Roll up, Unroll, Pivot, Chart
When you load a long/tidy multi-dimensional dataset into react-pivottable, you see your data all rolled up and summarized in the most basic way, by counting the number of rows. By dragging and dropping attributes around, you can unroll your data along various dimensions to create more complex summary tables and charts.
Summarize
You can, of course, summarize your data in other ways than just counting rows, by taking averages, medians, or building ratios of columns using the Sum over Sum operator. You can even code your own aggregators to build customized reporting tools.
Slice and Dice
You can slice and dice your data by excluding rows with certain attribute values. If the filter menu is in the way, you can tear it off and drag it aside, to quickly assemble a useful analysis environment for any given task.
Scatter
You can analyze relationships between columns using scatter plots, with either continuous or discrete axes. Support for bubble charts, box plots and violin plots is forthcoming.
Upgrades over PivotTable.js
Over the past few years, React has emerged as a leading front-end framework, and for good reason: its declarative one-way data-flow architecture makes it easy to build complex apps, and is a good fit for data visualization systems such as the Dash Python framework. PivotTable.js development had slowed down over time as the jQuery-based DOM operations became more complex as I added functionality, but I was able to port the whole thing to React in just a couple of weeks, and then easily add some new features I’d been planning for years, like more reactive menus. While I was at it, I also ported the code from my beloved Coffeescript to ES2015, which is more commonly used in the React community and should make it easier for others to contribute.
When coupled with a data visualization engine, pivot tables transform into pivot charts. Whereas PivotTable.js currently relies on C3.js for charting, react-pivottable uses Plotly.js and its shiny new react-plotly.js binding. Plotly.js will allow react-pivottable to support exciting new visualization types like box plots, sankey diagrams and faceting, and it has built-in PNG exporting capabilities, as well as the ability to customize and publish charts with the Plotly Chart Studio.
What’s next?
I expect that react-pivottable will be as useful to developers as PivotTable.js has been for analyzing data, building dashboards and adding self-serve analytics features to apps, and I look forward to lots of Github issues and pull-requests in the coming weeks. I’m personally excited about continuing to add new features and using this new component to bring pivot table and pivot chart capabilities to all sorts of React-based projects like Dash or Plotly’s new open-source Falcon SQL client. I will also be continuing to maintain PivotTable.js, and even back-porting the occasional innovation, so fear not if you haven’t made the leap to React just yet!
You can try react-pivottable right now on a sample dataset or on one of your own, or if you just want to get to the code, it’s up on Github under an MIT license with detailed documentation.
