react-pivottable

The library is organized into a hierarchy of components, where each layer delegates specific responsibilities. This allows you to use the full interactive UI or just render static snapshots of data.

1. PivotTableUI: The top-level interactive component providing the drag-and-drop interface. It is a "dumb" component and requires an onChange handler to manage state.
2. PivotTable: A non-interactive component used for outputting saved snapshots of a configuration. It delegates rendering to a specific renderer.
3. Renderer: A component (like TableRenderer) that handles the visual output. Renderers can accept additional custom properties.
4. PivotData: The bottom layer that performs the actual mathematical computations and data summarization. It is a non-React object used by most renderers.

<PivotTableUI {...props} />
  <PivotTable {...props} />
    <Renderer {...props} />
      PivotData(props)

To include Plotly charts as renderers, use createPlotlyRenderers to inject the react-plotly.js component. You then merge these new renderers with the standard TableRenderers and pass them to the renderers prop of PivotTableUI.

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 (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

If you prefer to load plotly.js via a <script> tag (e.g., from a CDN) instead of bundling it with Webpack, you can use react-plotly.js/factory to create a Plotly component from the global window.Plotly object, and then inject that into createPlotlyRenderers.

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import createPlotlyComponent from 'react-plotly.js/factory';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// create Plotly React component via dependency injection
const Plot = createPlotlyComponent(window.Plotly);

// 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 (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

The PivotTableUI component is a stateless (dumb) component. To maintain the pivot table's state (such as selected rows, columns, and aggregations), you must manage the state in a parent component and pass it back into PivotTableUI via the onChange callback and spread props.

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 (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

The following table lists the properties accepted across the component stack. Note that properties are consumed by specific layers (from the bottom up).

The data property (required by PivotData) accepts three distinct formats:

1. Arrays of Objects

One object per record. Keys are attribute names. Missing or null attributes are treated as the string "null".

2. Arrays of Arrays

Compatible with CSV parsing (e.g., PapaParse). The first sub-array contains attribute names. Subsequent sub-arrays are records. Shorter sub-arrays result in "null" values; longer sub-arrays have excess values ignored.

3. Callback Functions

A function that accepts a callback. The callback is invoked with an object representing a record. Missing or null attributes are treated as "null".

// Array of Objects
const data = [
    { attr1: 'val1', attr2: 'val2' },
    { attr1: 'val3', attr2: 'val4' }
];

// Array of Arrays
const data = [
    ['attr1', 'attr2'],
    ['val1', 'val2'],
    ['val3', 'val4']
];

// Callback Function
const data = function(callback) {
    callback({ "attr1": "val1", "attr2": "val2" });
    callback({ "attr1": "val3", "attr2": "val4" });
};