React Pivot Table - Interactive Pivot Grid for Data Analysis
- Organize and summarize pivot data in grids and charts.
- Load large volumes of data with high performance.
- Easily filter, sort, aggregate, and group pivot data.
- View detailed or abstract data using drill down or up.
- Experience seamless interaction and editing capabilities.
Trusted by the world’s leading companies
Overview
The React Pivot Table is a feature-rich React pivot grid component designed to organize and summarize business data in a cross-table format. It offers key functionalities such as data binding, drill-up and drill-down, Excel-like filtering and sorting, editing, Excel and PDF export, built-in aggregations, field lists, and calculated fields. Additionally, it supports loading large volumes of data without performance degradation through row and column virtualization.
Interact with the Live React Pivot Table
Runs in-browser. No installation required.
Why choose the Syncfusion React Pivot Table?
High performance
The Pivot Table is optimized for fast-paced performance. It efficiently loads and processes millions of records, making it ideal for real-time analytics and high-volume enterprise applications.
Seamless data binding
Bind data seamlessly from local and remote sources The Pivot Table supports JSON and CSV formats, service protocols such as OData and RESTful APIs, SQL databases (MySQL, Microsoft SQL Server, PostgreSQL, Oracle), NoSQL systems (MongoDB, Elasticsearch), and cloud data warehouses like Snowflake.
Integration with charts
Render a pivot chart using the same pivot values, and seamlessly switch between table, chart, or both. Choose from over 20 chart types to quickly visualize aggregated data.
Adapts to any resolution
The React Pivot Table is fully responsive with an optimized layout for desktops, tablets, and smartphones. It works seamlessly on mobile devices running iOS, Android, or Windows OS, ensuring consistent usability across all screen sizes.
Attractive, customizable themes
Create modern UI experience using built-in themes like Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Developers can also customize styles effortlessly using the online Theme Studio tool to match branding and application designs.
Globalization and localization
Enable users from different locales to work with the component easily by formatting dates, currency, and numbering based on regional preferences. It provides accurate representation and a localized user experience.
Installation & Quick Start
Follow these three steps to integrate the pivot table into your React application.
1
Install the Pivot Table Package
Install the Syncfusion React PivotTable package by using npm.
npm install @syncfusion/ej2-react-pivotview --save2
Import the required CSS styles
Import the required Syncfusion CSS files to apply proper layout and theme styling.
@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';3
Initialize the Pivot Table component
Configure and render the React Pivot Table using the sample shown. Define the component in src/App.tsx and manage the data source in src/datasource.ts. Explore the React Pivot Table Example to learn more.
import { PivotViewComponent, type IDataOptions } from '@syncfusion/ej2-react-pivotview';
import './App.css';
import { pivotData } from './datasource';
function App() {
const dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData,
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
}
return (<PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};
export default App;export const pivotData = [
{ 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }
];No credit card required.
Classic layout
The classic (tabular) layout is designed to enhance data visibility by presenting information in a traditional table format. In this layout, each row label is displayed distinctly at various levels across separate columns, ensuring clarity and better organization. This structured approach simplifies the analysis of datasets, making it easier to interpret relationships and trends within the data through a detailed, organized, and user-friendly table format.
Pivot charts
The React pivot chart can easily be integrated with pivot data rendered independently. The component includes support for plotting more than 20 chart types. The end-user experience is greatly enhanced with a set of user-interaction features such as drill up, drill down, zoom, pan, crosshair, trackball, events, selection, and tooltip. Highly interactive field list options are available for generating reports from the relational data dynamically.
Virtual scrolling
Large amounts of data can be divided and displayed in the rows and columns of the current viewport using the virtual scrolling feature. Users can navigate to a desired view by scrolling the vertical and horizontal scrollbars.
Paging
Large amounts of data can be divided and displayed page by page with the paging feature. The pager UI allows users to navigate to a desired page using the navigation buttons or an input text box. Row and column pager sizes can be changed independently at runtime. Furthermore, users can toggle the position of the row and column pagers, modify their visibility, and visualize them using a compact view mode.
Pivot Table field list and group fields
The React Pivot Table field list and group fields options are automatically populated with fields from the bound data source. They allow end users to drag, filter, and sort fields, and create pivot reports at runtime.
OLAP data binding
The Pivot Table can be connected to an OLAP cube, and its result can be visualized in both tabular and graphical formats.
Defer layout update
Users can refresh the component on demand instead of during every UI interaction.
Drill down and drill up
The built-in drill-down (expand) and drill-up (collapse) capabilities visualize data in detailed views and abstract views, respectively. By default, the data is displayed in a grouped manner.
Editing and updating
Users can create, read, update, and delete operations for raw data at runtime and update their changes to the underlying data source, reflecting the information in all corresponding cells. The Pivot Table control supports various edit modes such as inline, dialog, batch, and column edit through an interactive UI.
Filtering
Built-in member filters and Excel-like filters with advanced filtering options can be used to filter and view data as required. It is also possible to filter data programmatically in the Pivot Table.
Member filtering
Filtering members in a pivot table allows users to filter data displayed based on values in the row or column axes.
Label filtering
Use Excel-like filtering options across column and row headers based on label text, dates, or numbers.
Value filtering
Use Excel-like filtering options across column and row headers based on grand total values.
Sorting
Users can use sorting to order rows and columns based on labels or values.
Header sorting
Order column and row header text either in ascending or descending order.
Column sorting
Column sorting, also known as value sorting, orders the column values either in ascending or descending order. It is performed by clicking the header of the column to be sorted.
Custom sorting
Arrange field headers in column and row axes according to the user-defined order.
Aggregation
Users can perform calculations on a group of values using the aggregation option. By default, values are added together. The other aggregation types are average, minimum, maximum, count, distinct count, product, index, population standard deviation, sample standard deviation, population variance, sample variance, running totals, difference from, percent of difference from, and percent of grand total.
Calculated fields
Calculated or unbound fields generate unique fields with users’ calculated values by executing a simple, user-defined formula.
Drill through
The drillthrough feature easily obtains a list of raw items for a particular value cell or summary cell.
Totals
Subtotals and grand totals are calculated automatically by the pivot engine inside the control and displayed in the Pivot Table to help users make decisions more quickly. Also, users can show or hide subtotals and grand totals for rows and columns.
Conditional formatting
Users can define conditions that, when met, format font style, text color, background color, and font size for values and summary cells.
Number and date formatting
Number and date formatting help transform the appearance of the actual cell values.
Grouping dates and numbers
The Pivot Table control automatically groups dates and numbers, so the date type can be formatted and displayed based on year, quarter, month, day, and more. The number type can be grouped by range, such as 1–5 or 6–10.
Frozen headers
Users can freeze row and column headers to compare them with cell values.
Columns and rows
Resize
Change column width at runtime by simply dragging the rightmost boundary of the column header. A scroll bar will appear when the content width exceeds the control width.
Reorder
Users can reorder columns either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.
Hyperlinks
Users can add hyperlinked text to a cell to redirect to external resources. The control allows them to perform custom operations programmatically.
Tooltips
A tooltip provides basic information about a cell while hovering over it with the pointer.
Cell templates
With cell templates, users can easily add features like images, checkboxes, and text nodes to any cell.
Toolbars
A toolbar enhances user interaction and provides access to frequently used features. These features include new report, save report, save as report, rename report, delete report, report list, show grid, show chart, show or hide totals, export reports, and more.
Exporting
Export the React Pivot Table data to Excel, PDF, and CSV formats. Users can also customize the exported document by adding header, footer, and cell properties like type, style, and position programmatically.
Export to native Excel PivotTable
Users can export the Syncfusion Pivot Table directly to Microsoft Excel’s native PivotTable format, not just as a static table or flattened data. This ensures that all interactive features are preserved, allowing users to fully utilize Excel’s PivotTable functionalities.
Key advantages:
- Native Excel PivotTable: Exports to the actual PivotTable format used by Excel, preserving rows, columns, values, and filters.
- Fully interactive in Excel: Continue to sort, filter, expand/collapse groups, and modify field lists just like in your original pivot.
- Reusable layout: Save time by exporting your configured pivot layout for future use or easy sharing.
Optimized for mobile devices
Touch support
All features will work on touch devices easily. Features such as drilling up, drilling down, filtering, sorting, and report manipulation can be done on the fly.
Responsiveness
The responsive design allows the control to be viewed on various devices.
Accessibility
Keyboard navigation
The Pivot Table ensures that every cell is keyboard accessible. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction is required. This helps create highly accessible applications using this component.
Right to left (RTL)
The Pivot Table supports RTL rendering, allowing the text and layout to be displayed from right to left.
Not sure how to create your first React Pivot Table? Our tutorial videos and documentation can help.
I’d love to watch it now I’d love to read it now
Discover Syncfusion’s Complete React Component Ecosystem
Explore over 145+ React UI components featuring established, production-ready controls and the latest pure React components built natively for modern web app development.
-
React Components
-
Pure React Components
-
SMART COMPONENTSGRIDSDATA VISUALIZATIONDROPDOWNSFILE VIEWERS & EDITORSBUTTONSINTERACTIVE CHATINPUTSNAVIGATIONFORMSNOTIFICATIONS
-
GRIDSDATA VISUALIZATIONNAVIGATIONINPUTS
Build Document Workflows in React
Embed PDF viewing, Word document editing, and Excel-like spreadsheet processing in your React app to streamline document workflows and help teams collaborate on files without context switching or external dependencies.
Frequently Asked Questions
Why should you choose the Syncfusion Essential Studio React Pivot Table component?
The Syncfusion React Pivot Table offers the below features:
High performance pivot engine and virtualization that help load large volumes of data quickly.
Support for both relational and OLAP data sources. The relational data source can use input data via JSON, RESTful services, OData services, and WCF services, and more.
A grid and chart can be used to organize and summarize pivot data.
Pivot data is easily filtered, sorted, aggregated, and grouped pivot data.
Detailed or abstract data can be viewed using drill down or up.
Seamless interaction and editing capabilities.
Simple configuration and APIs.
- Support for all modern browsers.
- Touch-friendly and responsive UI.
Expansive learning resources such as demos and documentation to get started quickly with the component.
Where can I find the Syncfusion® React Pivot Table demo?
You can find our React Pivot Table demo here.
What is the React Pivot Table and how is it used?
The Syncfusion React Pivot Table is a fast and feature-rich component for analyzing large business data. It lets you rearrange data across rows, columns, values, and filters to create interactive summaries. It supports aggregation, sorting, filtering, drill operations, calculated fields, exporting, and chart integration for building modern analytics dashboards.
How do I connect the React Pivot Table to REST APIs or dynamic data?
Fetch JSON data from REST APIs and assign it to dataSourceSettings. Alternatively, use the url property or DataManager to bind remote data directly. Syncfusion Pivot Table supports relational data binding, making it easy to work with dynamic or real-time datasets.
How does the React Pivot Table handle large datasets?
The Syncfusion Pivot Table handles large datasets by using row and column virtualization along with an optimized internal engine.
How do I export React Pivot Table results to Excel, CSV, or PDF?
The Syncfusion React Pivot Table includes built-in export support for Excel, CSV, and PDF formats.
What is the difference between the React Pivot Table and a Data Grid?
A Pivot Table focuses on multidimensional analysis and aggregated summaries. A Data Grid focuses on row-level data management, editing, and CRUD operations. Each component serves a different purpose and fits different scenarios.
Can I download and utilize the Syncfusion React Pivot Table component for free?
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees
How do I get started with the Syncfusion® React Pivot Table component?
A good place to start would be our comprehensive getting started documentation.
How do I build a React Pivot Table with drag-and-drop fields?
Enable the Field List or Grouping Bar to allow users to drag and drop fields at runtime. When these features are enabled, users can move fields between Rows, Columns, Values, and Filters without requiring additional code. These options can be configured under PivotViewComponent and dataSourceSettings.
How can I implement drill-down and drillthrough in React Pivot Table?
These features are built in and can be customized through events when needed.
How do I add calculated fields or custom formulas in React Pivot Table?
Configure calculated fields using calculatedFieldSettings for custom KPIs and advanced metrics.
How do I integrate the React Pivot Table with charts?
The Syncfusion React Pivot Table includes built in pivot chart support. By enabling the pivot chart and configuring displayOption, you can switch among table, chart, and combined views, with both staying synchronized as filters, sorting, and drill actions change.
How do I enable filtering, sorting, grouping, and customization in React Pivot Table?
The Pivot Table provides built in Excel like filtering, sorting, grouping, and field configuration via the UI and dataSourceSettings.
Our Customers Love Us
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Read Our Customer StoriesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Transform your applications today by downloading our free evaluation version
No credit card required | 862K+ downloads
Figma download
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
Recent activities in React Pivot Table tutorials and blogs
The React Pivot Table tutorial videos and blog posts will guide you in building your first app with this React component. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for React Pivot Table updates.
