|
1 | | -# Sorting in the React Pivot Table Component |
| 1 | +# Sorting in the React Pivot Table Component |
2 | 2 |
|
3 | | -A quick-start React project that helps you to sort field members and values in the React Pivot Table component of Syncfusion. |
| 3 | +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. |
4 | 4 |
|
5 | | -Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/sorting/ |
| 5 | +## 📖 Overview |
6 | 6 |
|
7 | | -Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/sorting |
| 7 | +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: |
8 | 8 |
|
9 | | -## Project prerequisites |
| 9 | +- **Field Member Sorting:** Sorts the row field members (e.g., `ProductID`) in ascending or descending order. |
| 10 | +- **Value Sorting:** Sorts values (e.g., `Sold Amount`) based on specific headers using `valueSortSettings`. |
10 | 11 |
|
11 | | -Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project. |
| 12 | +## 🛠 Prerequisites |
12 | 13 |
|
13 | | -### How to run this application? |
| 14 | +Before running this project, ensure you have the following installed: |
14 | 15 |
|
15 | | -To run this application, you need to clone the `sorting-in-react-pivot-table` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `npm start` command. |
| 16 | +- [Node.js](https://nodejs.org/) (latest version recommended) |
| 17 | +- [Visual Studio Code](https://code.visualstudio.com/) |
| 18 | + |
| 19 | +## 🚀 Getting Started |
| 20 | + |
| 21 | +Follow these steps to run the application locally: |
| 22 | + |
| 23 | +1. **Clone the repository:** |
| 24 | + ```bash |
| 25 | + git clone https://github.com/SyncfusionExamples/sorting-in-react-pivot-table |
| 26 | + ``` |
| 27 | + |
| 28 | +2. **Navigate to the project folder:** |
| 29 | + ```bash |
| 30 | + cd sorting-in-react-pivot-table |
| 31 | + ``` |
| 32 | + |
| 33 | +3. **Install dependencies:** |
| 34 | + ```bash |
| 35 | + npm install |
| 36 | + ``` |
| 37 | + |
| 38 | +4. **Start the development server:** |
| 39 | + ```bash |
| 40 | + npm start |
| 41 | + ``` |
| 42 | + |
| 43 | +5. Open your browser and go to `http://localhost:3000` to view the Pivot Table in action. |
| 44 | + |
| 45 | +## 📂 Project Structure |
| 46 | + |
| 47 | +``` |
| 48 | +sorting-in-react-pivot-table/ |
| 49 | +├── public/ |
| 50 | +│ ├── index.html |
| 51 | +│ └── ... |
| 52 | +├── src/ |
| 53 | +│ ├── App.tsx # Main component with Pivot Table configuration |
| 54 | +│ ├── data.js # Sample data used in the Pivot Table |
| 55 | +│ ├── App.css # Styling for the component |
| 56 | +│ └── ... |
| 57 | +├── package.json |
| 58 | +├── README.md |
| 59 | +└── tsconfig.json |
| 60 | +``` |
| 61 | + |
| 62 | +## 🔗 Resources |
| 63 | + |
| 64 | +- [Syncfusion React Pivot Table Documentation](https://ej2.syncfusion.com/react/documentation/pivotview/sorting/) |
| 65 | +- [Live Demo – Sorting in Pivot Table](https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/sorting) |
| 66 | + |
| 67 | +## 💬 Support |
| 68 | + |
| 69 | +For questions or feedback, visit: |
| 70 | + |
| 71 | +- [Syncfusion Support Portal](https://support.syncfusion.com) |
| 72 | +- [Syncfusion Community Forums](https://www.syncfusion.com/forums) |
| 73 | + |
| 74 | +## 📜 License |
| 75 | + |
| 76 | +This project uses Syncfusion components, which require a valid license for production use. |
| 77 | +[View Syncfusion License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf) |
0 commit comments