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
88 changes: 80 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,87 @@
# Editing in React Pivot Table Component
# 🧩 Editing in React Pivot Table Component

A quick-start project that helps you to edit the pivot table with normal, dialog, batch, inline, command column, and pivot chart editing.
This sample demonstrates how to **edit a Pivot Table using Syncfusion's React PivotView component** with multiple editing modes and view options.

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

Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/editing
The Syncfusion Pivot Table (PivotView) component allows users to analyze and summarize large datasets interactively. In this example:

## Project prerequisites
- The Pivot Table is configured with:
- **Rows:** `Country`, `Products`
- **Columns:** `Year`
- **Values:** `Sold` (Units Sold), `Amount` (Sold Amount)
- Editing features include:
- **Normal Editing**
- **Dialog Editing**
- **Batch Editing**
- **Inline Editing**
- **Command Column Editing**
- The component supports two view modes:
- **Pivot Table View**
- **Pivot Chart View** (configured as a Column chart)

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:

To run this application, you need to clone the `editing-in-react-pivot-table-component` 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:

1. **Clone the repository:**
```bash
git clone https://github.com/your-repo/editing-in-react-pivot-table-component
```

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

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.

## 📂 Project Structure

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

## 🔍 Live Examples & Documentation

- [Live Demo](https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/editing)
- [Syncfusion Pivot Table Documentation](https://ej2.syncfusion.com/react/documentation/pivotview/editing/)

## 💬 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)