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.
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 usingvalueSortSettings.
Before running this project, ensure you have the following installed:
- Node.js (latest version recommended)
- Visual Studio Code
Follow these steps to run the application locally:
-
Clone the repository:
git clone https://github.com/SyncfusionExamples/sorting-in-react-pivot-table
-
Navigate to the project folder:
cd sorting-in-react-pivot-table -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and go to
http://localhost:3000to view the Pivot Table in action.
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
For questions or feedback, visit:
This project uses Syncfusion components, which require a valid license for production use.
View Syncfusion License Terms