# react-pivottable `react-pivottable` is a React-based pivot table library with drag'n'drop functionality. It is a React port of the jQuery-based [PivotTable.js](https://pivottable.js.org/) by the same author. `react-pivottable` is part of Plotly's [React Component Suite](https://plot.ly/products/react/) for building data visualization Web apps and products. ## What does it do & where is the demo? `react-pivottable`'s function is to enable data exploration and analysis by summarizing a data set into table or [Plotly.js](https://plot.ly/javascript/) chart with a true 2-d drag'n'drop UI, very similar to the one found in older versions of Microsoft Excel. A [live demo can be found here](https://react-pivottable.js.org/). ![screencap](examples/basic.gif) ## How can I use it in my project? ### Drag'n'drop UI with Table output only Installation is via NPM and has a peer dependency on React: ``` npm install --save react-pivottable react react-dom ``` Basic usage is as follows. Note that `PivotTableUI` is a "dumb component" that maintains essentially no state of its own. ```js import React from 'react'; import ReactDOM from 'react-dom'; import PivotTableUI from 'react-pivottable/PivotTableUI'; import 'react-pivottable/pivottable.css'; // see documentation for supported input formats const data = [['attribute', 'attribute2'], ['value1', 'value2']]; class App extends React.Component { constructor(props) { super(props); this.state = props; } render() { return ( this.setState(s)} {...this.state} /> ); } } ReactDOM.render(, document.body); ``` ### Drag'n'drop UI with Plotly charts as well as Table output The Plotly `react-plotly.js` component can be passed in via dependency injection. It has a peer dependency on `plotly.js`. **Important:** If you build your project using webpack, you'll have to follow [these instructions](https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack) in order to successfully bundle `plotly.js`. See below for how to avoid having to bundle `plotly.js`. ``` npm install --save react-pivottable react-plotly.js plotly.js react react-dom ``` To add the Plotly renderers to your app, you can use the following pattern: ```js import React from 'react'; import PivotTableUI from 'react-pivottable/PivotTableUI'; import 'react-pivottable/pivottable.css'; import TableRenderers from 'react-pivottable/TableRenderers'; import Plot from 'react-plotly.js'; import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers'; // create Plotly renderers via dependency injection const PlotlyRenderers = createPlotlyRenderers(Plot); // see documentation for supported input formats const data = [['attribute', 'attribute2'], ['value1', 'value2']]; class App extends React.Component { constructor(props) { super(props); this.state = props; } render() { return ( this.setState(s)} renderers={Object.assign({}, TableRenderers, PlotlyRenderers)} {...this.state} /> ); } } ReactDOM.render(, document.body); ``` #### With external `plotly.js` If you would rather not install and bundle `plotly.js` but rather get it into your app via something like `

	Stars	Issues	Version	Updated	Created
flexmonster	9	0	2.9.76-1	6 days ago	6 years ago
react-data-grid	6,702	173	7.0.0-beta.43	2 months ago	9 years ago
react-pivot			4.4.0	4 years ago	9 years ago
react-pivottable	965	101	0.11.0	3 years ago	7 years ago

flexmonster vs react-data-grid vs react-pivot vs react-pivottable

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past