{"id":21862,"library":"react-pivottable","title":"react-pivottable","description":"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.","status":"active","version":"0.11.1","language":"javascript","source_language":"en","source_url":"https://github.com/plotly/react-pivottable","tags":["javascript","react","pivottable"],"install":[{"cmd":"npm install react-pivottable","lang":"bash","label":"npm"},{"cmd":"yarn add react-pivottable","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-pivottable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: React >=15.0.0 required","package":"react","optional":false},{"reason":"peer dependency: react-dom >=15.0.0 required","package":"react-dom","optional":false},{"reason":"runtime dependency for drag-and-drop functionality","package":"react-draggable","optional":false}],"imports":[{"note":"PivotTableUI is a default export, not a named export, and is located in a subpath import.","wrong":"import { PivotTableUI } from 'react-pivottable';","symbol":"PivotTableUI","correct":"import PivotTableUI from 'react-pivottable/PivotTableUI';"},{"note":"TableRenderers is a default export from its own module.","wrong":"import { TableRenderers } from 'react-pivottable';","symbol":"TableRenderers","correct":"import TableRenderers from 'react-pivottable/TableRenderers';"},{"note":"createPlotlyRenderers is a default-exported function; it injects a Plot component dependency.","wrong":"import { createPlotlyRenderers } from 'react-pivottable';","symbol":"createPlotlyRenderers","correct":"import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PivotTableUI from 'react-pivottable/PivotTableUI';\nimport 'react-pivottable/pivottable.css';\n\nconst data = [\n  ['attribute', 'attribute2'],\n  ['value1', 'value2']\n];\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { data };\n  }\n\n  render() {\n    return (\n      <PivotTableUI\n        data={this.state.data}\n        onChange={s => this.setState(s)}\n        {...this.state}\n      />\n    );\n  }\n}\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"Minimal setup: import PivotTableUI, CSS, provide array data, and render with state management."},"warnings":[{"fix":"Ensure custom aggregators are compatible with the new outlet context.","message":"Version 0.11.0 introduced aggregator outlets feature that changes internal component API.","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Update React to >= 16.3 if not already.","message":"Version 0.10.0 stopped using deprecated React lifecycle methods; requires React >= 16.3 for new lifecycle methods.","severity":"breaking","affected_versions":">=0.10.0"},{"fix":"Always pass state from parent component and update via onChange callback.","message":"PivotTableUI is a 'dumb component' that does not maintain internal state; all state must be managed externally via onChange.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add import 'react-pivottable/pivottable.css' in your entry file.","message":"CSS import is mandatory for proper rendering; missing import leads to unstyled components.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to 0.10.0 or later or use React-compat shims.","message":"React.createClass and older lifecycle methods were used in versions <0.10.0; deprecated in React 16+.","severity":"deprecated","affected_versions":"<0.10.0"},{"fix":"Follow the pattern: import Plot from 'react-plotly.js'; const PlotlyRenderers = createPlotlyRenderers(Plot);","message":"When using Plotly renderers, react-plotly.js must be injected via createPlotlyRenderers; direct import will fail.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure webpack or bundler supports package exports; use full path: 'react-pivottable/lib/PivotTableUI' as fallback.","cause":"The subpath import is not recognized in certain bundler configurations.","error":"Cannot find module 'react-pivottable/PivotTableUI'"},{"fix":"Check that the CSS file exists in node_modules/react-pivottable; use a css-loader or copy the file manually.","cause":"CSS file is not copied or resolved in some setups.","error":"Module not found: Can't resolve 'react-pivottable/pivottable.css'"},{"fix":"Provide the renderers prop with at least TableRenderers and any custom renderers.","cause":"Missing required renderers (e.g., TableRenderers, PlotlyRenderers) when using PivotTableUI.","error":"Uncaught TypeError: renderers[UIRenderer] is not a function"},{"fix":"Ensure hooks are only used in functional components; consider using a wrapper functional component.","cause":"Using a React hook within a class component that uses react-pivottable (which uses class components).","error":"Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}