@imc-trading/react-pivottable

This is a fork of plotly/react-pivottable. The original implementation is no longer maintained and has a bug if used with React 18.

Differences

• Internally it uses dnd-kit instead of react-draggable and react-sortablejs.
• Exports are now ESM/named instead of separate files. Check usage section for how to import.

Added functionality

• hideControls prop allows you to hide controls.

Installing

npm install @imc-trading/react-pivottable react-plotly.js

Usage

import { createRoot } from "react-dom/client";
import Plotly from "react-plotly.js";

import {
  PivotTableUI,
  createPlotlyRenderers,
  TableRenderers,
} from "@imc-trading/react-pivottable";

import "@imc-trading/react-pivottable/pivottable.css";

const PlotlyRenderers = createPlotlyRenderers(Plotly); // or createPlotlyRenderers(window.Plotly)

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

function App() {
  const [pivottableState, setPivottableState] = useState({});

  return (
    <PivotTableUI
      data={data}
      onChange={(s) => setPivottableState(s)}
      renderers={{ ...TableRenderers, ...PlotlyRenderers }}
      {...pivottableState}
    />
  );
}

createRoot(document.getElementById("root")!).render(<App />);