Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 70 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,77 @@
# Sorting in the React Pivot Table Component
# Sorting in the React Pivot Table Component

A quick-start React project that helps you to sort field members and values in the React Pivot Table component of Syncfusion.
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.

Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/sorting/
## 📖 Overview

Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/sorting
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:

## Project prerequisites
- **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`.

Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
## 🛠 Prerequisites

### How to run this application?
Before running this project, ensure you have the following installed:

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.
- [Node.js](https://nodejs.org/) (latest version recommended)
- [Visual Studio Code](https://code.visualstudio.com/)

## 🚀 Getting Started

Follow these steps to run the application locally:

1. **Clone the repository:**
```bash
git clone https://github.com/SyncfusionExamples/sorting-in-react-pivot-table
```

2. **Navigate to the project folder:**
```bash
cd sorting-in-react-pivot-table
```

3. **Install dependencies:**
```bash
npm install
```

4. **Start the development server:**
```bash
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](https://ej2.syncfusion.com/react/documentation/pivotview/sorting/)
- [Live Demo – Sorting in Pivot Table](https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/sorting)

## 💬 Support

For questions or feedback, visit:

- [Syncfusion Support Portal](https://support.syncfusion.com)
- [Syncfusion Community Forums](https://www.syncfusion.com/forums)

## 📜 License

This project uses Syncfusion components, which require a valid license for production use.
[View Syncfusion License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf)