A React-based pivot table
npm install react-pivottable-msmreact-pivottable is a React-based pivot table library with drag'n'drop
react-pivottable is part of Plotly's React Component Suite for building data visualization Web apps and products.
react-pivottable's function is to enable data exploration and analysis by
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 (
data={data}
onChange={s => this.setState(s)}
{...this.state}
/>
);
}
}
ReactDOM.render( , document.body);
`
$3
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
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 (
data={data}
onChange={s => 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