react-pivottable

0.11.1 verified Mon Apr 27 auth: no javascript

A React-based pivot table library with drag-and-drop UI for data exploration and analysis. Current stable version is 0.11.1, released October 2024. It summarizes data into table or Plotly.js charts with an Excel-like interface. Key differentiators: full drag-and-drop reordering, Plotly chart integration via dependency injection, and maintained by Plotly. Peer dependencies include React (>=15) and react-dom. It is a React port of the jQuery-based PivotTable.js and supports table and chart renderers. The library is class-component-based and uses CSS for styling.

Common errors

error Cannot find module 'react-pivottable/PivotTableUI' ↓

cause The subpath import is not recognized in certain bundler configurations.

fix

Ensure webpack or bundler supports package exports; use full path: 'react-pivottable/lib/PivotTableUI' as fallback.

error Module not found: Can't resolve 'react-pivottable/pivottable.css' ↓

cause CSS file is not copied or resolved in some setups.

fix

Check that the CSS file exists in node_modules/react-pivottable; use a css-loader or copy the file manually.

error Uncaught TypeError: renderers[UIRenderer] is not a function ↓

cause Missing required renderers (e.g., TableRenderers, PlotlyRenderers) when using PivotTableUI.

fix

Provide the renderers prop with at least TableRenderers and any custom renderers.

error Invalid hook call. Hooks can only be called inside of the body of a function component. ↓

cause Using a React hook within a class component that uses react-pivottable (which uses class components).

fix

Ensure hooks are only used in functional components; consider using a wrapper functional component.

Warnings

breaking Version 0.11.0 introduced aggregator outlets feature that changes internal component API. ↓

fix Ensure custom aggregators are compatible with the new outlet context.

breaking Version 0.10.0 stopped using deprecated React lifecycle methods; requires React >= 16.3 for new lifecycle methods. ↓

fix Update React to >= 16.3 if not already.

gotcha PivotTableUI is a 'dumb component' that does not maintain internal state; all state must be managed externally via onChange. ↓

fix Always pass state from parent component and update via onChange callback.

gotcha CSS import is mandatory for proper rendering; missing import leads to unstyled components. ↓

fix Add import 'react-pivottable/pivottable.css' in your entry file.

deprecated React.createClass and older lifecycle methods were used in versions <0.10.0; deprecated in React 16+. ↓

fix Upgrade to 0.10.0 or later or use React-compat shims.

gotcha When using Plotly renderers, react-plotly.js must be injected via createPlotlyRenderers; direct import will fail. ↓

fix Follow the pattern: import Plot from 'react-plotly.js'; const PlotlyRenderers = createPlotlyRenderers(Plot);

Install

npm install react-pivottable

yarn add react-pivottable

pnpm add react-pivottable

Imports

PivotTableUI
wrong
```
import { PivotTableUI } from 'react-pivottable';
```
correct
```
import PivotTableUI from 'react-pivottable/PivotTableUI';
```
PivotTableUI is a default export, not a named export, and is located in a subpath import.

TableRenderers

wrong

import { TableRenderers } from 'react-pivottable';

correct

import TableRenderers from 'react-pivottable/TableRenderers';

TableRenderers is a default export from its own module.

createPlotlyRenderers

wrong

import { createPlotlyRenderers } from 'react-pivottable';

correct

import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

createPlotlyRenderers is a default-exported function; it injects a Plot component dependency.

Quickstart

Minimal setup: import PivotTableUI, CSS, provide array data, and render with state management.

import React from 'react';
import ReactDOM from 'react-dom';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';

const data = [
  ['attribute', 'attribute2'],
  ['value1', 'value2']
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data };
  }

  render() {
    return (
      <PivotTableUI
        data={this.state.data}
        onChange={s => this.setState(s)}
        {...this.state}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));