How to Use React Pivot Table

I’ve found that nothing satisfies a client quite like a powerful data grid. Whether you are building a FinTech dashboard or a retail inventory tracker, users always want to slice and dice their data.

For a long time, I struggled to build custom pivot functionality from scratch using basic HTML tables and complex state management.

Then I discovered dedicated React pivot table components, and honestly, it changed the way I approach data-heavy frontend projects.

In this tutorial, I’ll show you exactly how to implement a pivot table in your React apps, using real-world examples you’d actually see in a US-based enterprise.

Table of Contents

Why Use a Pivot Table in React?

If you’ve ever worked with Excel, you know how indispensable pivot tables are for summarizing large datasets.

In React, a pivot table component allows your users to drag and drop fields to create custom reports without needing a backend dev to write new queries.

Method 1: Use the Open-Source react-pivottable Library

For most of my internal projects, I reach for react-pivottable. It is based on the original jQuery-based pivot table but rewritten for the React ecosystem.

It’s lightweight, and because it uses a modular approach, it doesn’t bloat your bundle size unnecessarily.

Let’s build a sales reporting tool for a US-based franchise. We will track sales across states like California, Texas, and New York.

First, you’ll need to install the library and its dependencies:

npm install react-pivottable react-plotly.js plotly.js

Here is the full implementation. I’ve used a dataset representing quarterly sales for a fictional tech hardware company.

import React, { useState } 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 for charts
const PlotlyRenderers = createPlotlyRenderers(Plot);

const SalesPivotTable = () => {
    // Sample US Sales Data
    const data = [
        ['Region', 'State', 'Product Category', 'Sales (USD)', 'Quarter'],
        ['West', 'California', 'Laptops', 55000, 'Q1'],
        ['West', 'California', 'Monitors', 12000, 'Q1'],
        ['South', 'Texas', 'Laptops', 42000, 'Q1'],
        ['South', 'Texas', 'Monitors', 8000, 'Q1'],
        ['Northeast', 'New York', 'Laptops', 61000, 'Q1'],
        ['Northeast', 'New York', 'Monitors', 15000, 'Q1'],
        ['West', 'California', 'Laptops', 58000, 'Q2'],
        ['South', 'Texas', 'Laptops', 45000, 'Q2'],
        ['Northeast', 'New York', 'Laptops', 63000, 'Q2'],
    ];

    const [state, setState] = useState({
        data: data,
        rows: ['Region', 'State'],
        cols: ['Product Category'],
        vals: ['Sales (USD)'],
        aggregatorName: 'Sum',
        rendererName: 'Table'
    });

    return (
        <div style={{ padding: "20px" }}>
            <h2>US Corporate Sales Dashboard</h2>
            <p>Drag and drop fields to analyze regional performance.</p>
            <PivotTableUI
                onChange={s => setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...state}
            />
        </div>
    );
};

export default SalesPivotTable;

I executed the above example code and added the screenshot below.

I prefer this method when I need a quick, functional UI without a hefty licensing fee.

The PivotTableUI component is great because it handles its own internal drag-and-drop logic. You just need to provide the data as an array of arrays (as shown) or an array of objects.

Method 2: High-Performance Pivot Tables with Flexmonster

When I’m working on enterprise-grade software that needs to handle millions of rows, react-pivottable can sometimes lag.

In those cases, I’ve often used Flexmonster. It’s a commercial library, but it’s incredibly fast and offers features like PDF export and OLAP support.

For this example, let’s imagine we are analyzing healthcare insurance claims data across different US providers.

First, install the React wrapper:

npm install react-flexmonster

Here is how I typically set up a high-performance pivot component:

import React, { useRef } from 'react';
import * as FlexmonsterReact from 'react-flexmonster';
import 'flexmonster/flexmonster.css';

const HealthcareAnalytics = () => {
    const pivotRef = useRef(null);

    const report = {
        dataSource: {
            data: [
                { "Provider": "BlueCross", "Plan": "PPO", "State": "Florida", "Claims": 1200, "Payout": 450000 },
                { "Provider": "Aetna", "Plan": "HMO", "State": "Florida", "Claims": 800, "Payout": 210000 },
                { "Provider": "UnitedHealth", "Plan": "PPO", "State": "Georgia", "Claims": 1500, "Payout": 580000 },
                { "Provider": "BlueCross", "Plan": "HMO", "State": "Georgia", "Claims": 600, "Payout": 150000 },
                { "Provider": "Aetna", "Plan": "PPO", "State": "Texas", "Claims": 2200, "Payout": 900000 },
                { "Provider": "UnitedHealth", "Plan": "HMO", "State": "Texas", "Claims": 1100, "Payout": 320000 }
            ]
        },
        slice: {
            rows: [{ uniqueName: "Provider" }, { uniqueName: "Plan" }],
            columns: [{ uniqueName: "State" }],
            measures: [
                { uniqueName: "Claims", aggregation: "sum" },
                { uniqueName: "Payout", aggregation: "sum", format: "currency" }
            ]
        },
        formats: [{
            name: "currency",
            currencySymbol: "$",
            decimalPlaces: 0
        }]
    };

    return (
        <div style={{ height: '600px', width: '100%' }}>
            <h1 style={{ textAlign: 'center' }}>Healthcare Claims Analysis (US)</h1>
            <FlexmonsterReact.Pivot
                ref={pivotRef}
                toolbar={true}
                width="100%"
                height="100%"
                report={report}
                licenseKey="FREE-VERSION-KEY" 
            />
        </div>
    );
};

export default HealthcareAnalytics;

I executed the above example code and added the screenshot below.

I love that this comes with a built-in toolbar. It allows users to switch between charts and grids with one click.

If your users are used to the Excel Ribbon, they will find this interface very familiar.

Customize the Styling

One thing I’ve learned over the years is that a tool is only as good as its usability.

Standard pivot tables can look a bit “industrial” and gray. I always recommend adding custom CSS to match your brand.

For react-pivottable, you can override the .pvtTable class in your global CSS file.

I usually add some padding to the cells and a subtle hover effect to make the data more readable.

Handle Large Datasets (Pro Tip)

If you are loading data from a US-based AWS or Azure server, don’t try to load 50MB of JSON into the browser at once.

Even the best React component will struggle with memory management at that scale.

Instead, I always suggest using server-side aggregation. Send the “pivoted” data from your Python or Node.js backend.

This keeps your React frontend snappy and responsive, which is what your users expect.

Common Issues to Avoid

When I first started using these components, I made the mistake of not defining my data types properly.

Make sure your “numbers” are actually numbers in JavaScript, not strings like “$5,000”.

If they are strings, the “Sum” or “Average” functions in the pivot table will fail or return zero.

Always sanitize your data before passing it to the data prop of your component.

Summary of Differences

Feature	react-pivottable	Flexmonster
Cost	Free (MIT)	Commercial / Paid
Performance	Good for < 10k rows	Excellent for 1M+ rows
Ease of Use	Simple	Comprehensive
Export Options	Manual	Built-in (Excel, PDF)

I hope this guide helps you choose the right tool for your next React project.

Whether you go with the open-source route or a professional library, pivot tables will definitely level up your data game.

If you have any questions or run into bugs while setting this up, feel free to drop a comment below.

I’ve spent plenty of hours debugging these, and I’m happy to help you get your dashboard up and running.