Sorting in the React Pivot Table Component

This sample demonstrates how to sort field members and values in the Syncfusion React Pivot Table (PivotView) component. It showcases how to enable value sorting and configure field member sorting using the sortSettings and valueSortSettings properties.

📖 Overview

The Syncfusion Pivot Table (PivotView) is a powerful React component used for visualizing and analyzing large amounts of data. This example focuses on sorting capabilities within the Pivot Table, including:

• Field Member Sorting: Sorts the row field members (e.g., ProductID) in ascending or descending order.
• Value Sorting: Sorts values (e.g., Sold Amount) based on specific headers using valueSortSettings.

🛠 Prerequisites

Before running this project, ensure you have the following installed:

• Node.js (latest version recommended)
• Visual Studio Code

🚀 Getting Started

Follow these steps to run the application locally:

1. Clone the repository:

   git clone https://github.com/SyncfusionExamples/sorting-in-react-pivot-table

2. Navigate to the project folder:

   cd sorting-in-react-pivot-table

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your browser and go to http://localhost:3000 to view the Pivot Table in action.

📂 Project Structure

sorting-in-react-pivot-table/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.tsx         # Main component with Pivot Table configuration
│   ├── data.js         # Sample data used in the Pivot Table
│   ├── App.css         # Styling for the component
│   └── ...
├── package.json
├── README.md
└── tsconfig.json

🔗 Resources

• Syncfusion React Pivot Table Documentation
• Live Demo – Sorting in Pivot Table

💬 Support

For questions or feedback, visit:

• Syncfusion Support Portal
• Syncfusion Community Forums

📜 License

This project uses Syncfusion components, which require a valid license for production use.
View Syncfusion License Terms