📊 Getting Started — React Pivot Table Component (Syncfusion EJ2)

🚀 React quick-start template demonstrating Syncfusion EJ2 PivotView (Pivot Table) with Field List, Calculated Fields, Data Formatting, Multi-level Sorting & Filtering — includes sample sales data, CLI scripts, and production-ready configuration.

📺 Official Demo: https://ej2.syncfusion.com/react/demos/#/material3/pivot-table/overview
📚 Official Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/getting-started

🔍 Overview

This repository provides a production-ready starter template for integrating Syncfusion's powerful PivotView (Pivot Table) component into your React applications. It demonstrates essential pivot table features for real-world business intelligence and data analysis scenarios.

The sample includes:

✅ Interactive Pivot Table with comprehensive data analysis
✅ Dynamic Field List for runtime field configuration
✅ Calculated Fields for custom data computations
✅ Data Formatting (currency, percentages, custom formats)
✅ Multi-level Sorting and Filtering capabilities
✅ Sample sales dataset with real-world data structure
✅ Responsive design with Tailwind CSS styling
✅ Pre-configured data source with drill-down support

Who Should Use This?

📈 Business analysts building custom reporting tools
💼 Enterprise developers creating dashboards and analytics
🎓 React developers learning Syncfusion component integration
🛠️ Teams migrating from legacy pivot table solutions

✨ Key Features

Feature	Description	Benefit
🎯 Field List Interface	Dynamically add, remove, and rearrange data fields at runtime	Empowers end-users to customize reports without code modifications
📊 Flexible Data Binding	Supports relational data binding with hierarchical structures	Handle complex multi-dimensional business data
🧮 Calculated Fields	Create custom formulas combining multiple data fields	Advanced data analysis and business metric computation
💱 Data Formatting	Display values in currency, percentages, and custom formats	Professional presentation of numerical data
↕️ Multi-Level Sorting	Sort by multiple fields with ascending/descending control	Enhanced data exploration and trend analysis
🔗 Advanced Filtering	Filter by single or multiple criteria across all dimensions	Focused data analysis and drill-down exploration
📱 Responsive Design	Adapts seamlessly to desktop, tablet, and mobile screens	Universal accessibility across all devices
📤 Export Functionality	Export pivot table data to Excel and PDF formats	Generate shareable reports and archives
🎨 Theme Support	Multiple Tailwind and Bootstrap themes available	Consistent branding and visual customization
⚡ Performance Optimized	Efficient rendering with virtual scrolling	Handle large datasets without performance degradation

📋 Prerequisites

Ensure you have the following installed on your system:

Node.js (LTS version 18.x or higher) — Download
npm (v9+) or yarn (v1.22+) — Included with Node.js
Visual Studio Code (Recommended) — Download
Git (For cloning the repository) — Download

Supported Browsers

✅ Chrome (Latest)
✅ Firefox (Latest)
✅ Safari (Latest)
✅ Edge (Latest)

🧭 Quick Start

1️⃣ Clone the Repository

git clone https://github.com/SyncfusionExamples/getting-started-with-the-react-pivot-table-component.git
cd getting-started-with-the-react-pivot-table-component

2️⃣ Install Dependencies

Using npm:

npm install

Using yarn:

yarn install

3️⃣ Start the Development Server

Using npm:

npm start

Using yarn:

yarn start

The application will automatically open in your default browser at:

http://localhost:3000

🔗 Dependencies & Browser Support

Primary Dependencies

@syncfusion/ej2-react-pivotview (^26.1.39)
├── @syncfusion/ej2-pivotview
├── @syncfusion/ej2-data
├── @syncfusion/ej2-grids
├── @syncfusion/ej2-excel-export
├── @syncfusion/ej2-pdf-export
├── @syncfusion/ej2-calendars
├── @syncfusion/ej2-charts
├── @syncfusion/ej2-inputs
├── @syncfusion/ej2-buttons
├── @syncfusion/ej2-dropdowns
├── @syncfusion/ej2-lists
├── @syncfusion/ej2-popups
└── @syncfusion/ej2-navigations

Other Project Dependencies

{
  "react": "^19.2.4",
  "react-dom": "^19.2.4",
  "react-scripts": "5.0.1"
}

Browser Compatibility

Browser	Minimum Version	Status
Chrome	90+	✅ Fully Supported
Firefox	88+	✅ Fully Supported
Safari	14+	✅ Fully Supported
Edge	90+	✅ Fully Supported
IE 11	-	⚠️ Requires Polyfills

🗂️ Project Structure

getting-started-with-the-react-pivot-table-component/
├── public/
│   ├── index.html                 # Main HTML entry point
│   ├── manifest.json              # PWA manifest configuration
│   └── robots.txt                 # SEO robots configuration
├── src/
│   ├── App.js                     # Main React component with PivotView
│   ├── App.css                    # Component styling & theme imports
│   ├── App.test.js                # Unit tests for App component
│   ├── datasource.js              # Sample sales data (pivot table dataset)
│   ├── index.js                   # React application entry point
│   ├── index.css                  # Global application styles
│   ├── reportWebVitals.js         # Performance monitoring
│   └── setupTests.js              # Test environment configuration
├── package.json                   # Project dependencies & scripts
├── README.md                       # This file
├── getting-started.md             # Detailed getting started guide
└── .gitignore                      # Git ignore configuration

### Key Files Explained:

- **`src/App.js`** — Core PivotView component with configuration, field list, and calculated fields enabled
- **`src/datasource.js`** — Sample dataset containing sales data across multiple countries
- **`src/App.css`** — Imports all required Syncfusion themes and component styles

🎨 Theming & Styling

Available Themes

Syncfusion provides multiple professional themes. Update your src/App.css to use your preferred theme:

Option 1: Tailwind3 Theme (Default - Recommended)

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/tailwind3.css';

Option 2: Bootstrap5 Theme

Replace tailwind3.css with bootstrap5.css in all imports

Option 3: Material Theme

Replace tailwind3.css with material.css in all imports

Custom Styling

Add custom CSS to src/App.css after the theme imports:

/* Override Syncfusion defaults */
.e-pivotview {
  background-color: #f5f5f5;
  border-radius: 8px;
}

.e-pivot-button {
  border-color: #007bff;
}

🧩 Minimal Example

Create a basic PivotView with just a few lines of code:

import React from 'react';
import { PivotViewComponent, Inject, FieldList } from '@syncfusion/ej2-react-pivotview';
import './App.css';

const MinimalPivotApp = () => {
  const dataSourceSettings = {
    dataSource: [
      { Country: 'USA', Product: 'Bike', Amount: 1000, Quantity: 10 },
      { Country: 'USA', Product: 'Car', Amount: 5000, Quantity: 5 },
      { Country: 'Canada', Product: 'Bike', Amount: 800, Quantity: 8 }
    ],
    rows: [{ name: 'Country' }],
    columns: [{ name: 'Product' }],
    values: [{ name: 'Amount', caption: 'Sales Amount' }],
    filters: []
  };

  return (
    <PivotViewComponent 
      id='PivotView' 
      height={350} 
      dataSourceSettings={dataSourceSettings}
      showFieldList={true}
    >
      <Inject services={[FieldList]} />
    </PivotViewComponent>
  );
};

export default MinimalPivotApp;

⚙️ Configuration & Customization

Essential Properties

<PivotViewComponent
  id='PivotView'
  height={350}                      // Display height in pixels
  dataSourceSettings={dataSourceSettings}
  allowCalculatedField={true}       // Enable calculated fields
  showFieldList={true}              // Display field list panel
  showGroupingBar={true}            // Show grouping bar for drag-drop
  allowDrilling={true}              // Enable drill-down functionality
  allowExcelExport={true}           // Enable Excel export
  allowPdfExport={true}             // Enable PDF export
>
  <Inject services={[CalculatedField, FieldList, GroupingBar]} />
</PivotViewComponent>

DataSourceSettings Configuration

const dataSourceSettings = {
  dataSource: pivotData,
  expandAll: false,
  
  // Field arrangement in axes
  rows: [
    { name: 'Country', caption: 'Country' },
    { name: 'State' }
  ],
  columns: [
    { name: 'Date', caption: 'Fiscal Year' },
    { name: 'Product' }
  ],
  values: [
    { name: 'Amount', caption: 'Total Sales', type: 'Sum' },
    { name: 'Quantity', caption: 'Quantity Sold', type: 'Count' }
  ],
  filters: [],
  
  // Formatting
  formatSettings: [
    { name: 'Amount', format: 'C2' },  // Currency with 2 decimals
    { name: 'Quantity', format: 'N0' } // Number without decimals
  ],
  
  // Drill-down configuration
  drilledMembers: [
    { name: 'Country', items: ['France'] }
  ]
};

Format String Examples

Format Code	Example Output	Use Case
`C0`	$1,234	Currency without decimals
`C2`	$1,234.56	Currency with 2 decimals
`N0`	1,234	General number
`N2`	1,234.56	Decimal numbers
`P0`	50%	Percentage
`P2`	50.25%	Percentage with decimals

💡 Usage Examples

Example 1: Sales Dashboard with Calculated Fields

import { PivotViewComponent, Inject, CalculatedField, FieldList } from '@syncfusion/ej2-react-pivotview';
import { pivotData } from './datasource';

function SalesDashboard() {
  const dataSourceSettings = {
    dataSource: pivotData,
    rows: [{ name: 'Country' }],
    columns: [{ name: 'Date' }, { name: 'Product' }],
    values: [
      { name: 'Amount', caption: 'Sales' },
      { name: 'Quantity', caption: 'Qty' }
    ],
    formatSettings: [{ name: 'Amount', format: 'C0' }]
  };

  return (
    <div>
      <h1>📊 International Sales Dashboard</h1>
      <PivotViewComponent
        id='SalesPivot'
        height={400}
        dataSourceSettings={dataSourceSettings}
        allowCalculatedField={true}
        showFieldList={true}
      >
        <Inject services={[CalculatedField, FieldList]} />
      </PivotViewComponent>
    </div>
  );
}

export default SalesDashboard;

Example 2: Regional Performance Analysis

const regionalSettings = {
  dataSource: pivotData,
  rows: [{ name: 'Country' }, { name: 'State' }],
  columns: [{ name: 'Date' }],
  values: [
    { name: 'Amount', caption: 'Revenue' },
    { name: 'Quantity', caption: 'Units Sold' }
  ],
  filters: [{ name: 'Product', caption: 'Filter by Product' }],
  formatSettings: [{ name: 'Amount', format: 'C2' }],
  drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }]
};

Example 3: Custom Formatting with Conditional Styling

const advancedSettings = {
  dataSource: pivotData,
  rows: [{ name: 'Country' }],
  columns: [{ name: 'Product' }],
  values: [{ name: 'Amount', caption: 'Total Amount' }],
  formatSettings: [
    {
      name: 'Amount',
      format: 'C2',
      minimumSignificantDigits: 1,
      maximumSignificantDigits: 3
    }
  ]
};

🤝 Contributing

We welcome contributions! Here's how you can help:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Guidelines

Follow React and ES6+ best practices
Include comments for complex logic
Add tests for new features
Update documentation as needed

📜 License & Support

License

This project is licensed under the Syncfusion Community License. See the Syncfusion License for details.

Support & Resources

📚 Official Documentation: Syncfusion React PivotView
🎬 Video Tutorials: Syncfusion YouTube Channel
💬 Support Forum: Syncfusion Support
🐛 Report Issues: GitHub Issues
📧 Contact Us: support@syncfusion.com

Additional Resources

⚡ Performance Tips

✅ Use virtual scrolling for large datasets (1000+ rows)
✅ Enable lazy loading for remote data sources
✅ Optimize format settings to reduce rendering overhead
✅ Use filter and drill-down to reduce data volume displayed
✅ Consider server-side aggregation for very large datasets

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.github/workflows		.github/workflows
public		public
src		src
README.md		README.md
package.json		package.json

SyncfusionExamples/getting-started-with-the-react-pivot-table-component

Folders and files

Latest commit

History

Repository files navigation

📊 Getting Started — React Pivot Table Component (Syncfusion EJ2)

📑 Table of Contents

🔍 Overview

Who Should Use This?

✨ Key Features

📋 Prerequisites

Supported Browsers

🧭 Quick Start

1️⃣ Clone the Repository

2️⃣ Install Dependencies

Using npm:

Using yarn:

3️⃣ Start the Development Server

Using npm:

Using yarn:

🔗 Dependencies & Browser Support

Primary Dependencies

Other Project Dependencies

Browser Compatibility

🗂️ Project Structure

🎨 Theming & Styling

Available Themes

Option 1: Tailwind3 Theme (Default - Recommended)

Option 2: Bootstrap5 Theme

Option 3: Material Theme

Custom Styling

🧩 Minimal Example

⚙️ Configuration & Customization

Essential Properties

DataSourceSettings Configuration

Format String Examples

💡 Usage Examples

Example 1: Sales Dashboard with Calculated Fields

Example 2: Regional Performance Analysis

Example 3: Custom Formatting with Conditional Styling

🤝 Contributing

Guidelines

📜 License & Support

License

Support & Resources

Additional Resources

⚡ Performance Tips

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Packages