Registry / data / react-pivottable

react-pivottable

library0.11.1jsnpmunverified

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.

data web-framework

npm install react-pivottable

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-PIVOTTABLE

react-pivottable

datajavascriptv0.11.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PivotTableUI

✓ import PivotTableUI from 'react-pivottable/PivotTableUI';

✗ import { PivotTableUI } from 'react-pivottable';

PivotTableUI is a default export, not a named export, and is located in a subpath import.

TableRenderers

✓ import TableRenderers from 'react-pivottable/TableRenderers';

✗ import { TableRenderers } from 'react-pivottable';

TableRenderers is a default export from its own module.

createPlotlyRenderers

✓ import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

✗ import { createPlotlyRenderers } from 'react-pivottable';

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

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'));

Debug

Known issues

breakingVersion 0.11.0 introduced aggregator outlets feature that changes internal component API.

fix

Ensure custom aggregators are compatible with the new outlet context.

affects: >=0.11.0

breakingVersion 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.

affects: >=0.10.0

gotchaPivotTableUI 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.

affects: >=0.1.0

gotchaCSS import is mandatory for proper rendering; missing import leads to unstyled components.

fix

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

affects: >=0.1.0

deprecatedReact.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.

affects: <0.10.0

gotchaWhen 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);

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'react-pivottable/PivotTableUI'

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.

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

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.

Uncaught TypeError: renderers[UIRenderer] is not a function

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

fix

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

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

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.

Upgrade

Version history

0.11.1latest on npm

Audit

Dependencies

reactrequiredpeer dependency: React >=15.0.0 required

react-domrequiredpeer dependency: react-dom >=15.0.0 required

react-draggablerequiredruntime dependency for drag-and-drop functionality

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/plotly/react-pivottable ↗

packagehttps://www.npmjs.com/package/react-pivottable ↗

homepagehttps://nicolaskruchten.github.io/react-pivottable ↗