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
100 changes: 92 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,99 @@
# Create a React Pivot Table component
# Create a React Pivot Table component

A quick-start project that helps you to create and configure the Syncfusion React Pivot Table. This project also contains code to configure a few of the control’s basic features like binding data and adding rows, columns, and values.
This sample demonstrates how to **create and configure a Pivot Table using Syncfusion's React PivotView component**, including features like calculated fields, field list, and basic data binding.

Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/getting-started/
## 📖 Overview

Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/default
The **Syncfusion Pivot Table (PivotView)** is a powerful React component for analyzing and summarizing large datasets. In this example:

## Project prerequisites
- A sample dataset is used with fields such as `Country`, `Products`, `Year`, `Quarter`, `Sold`, and `Amount`.
- The Pivot Table is configured with:
- **Rows:** `Country`, `Products`
- **Columns:** `Year`
- **Values:** `Sold` (Units Sold), `Amount` (Sold Amount), and a **Calculated Field** `Total` (Sum of Sold and Amount)
- **Filters:** `Quarter`
- A **Calculated Field** named `Total` is added using the formula: `"Sum(Amount)" + "Sum(Sold)"`.
- The **Field List** and **Calculated Field** features are enabled for interactive configuration.

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

### How to run this application?
- **Calculated Fields:**
Easily create custom calculations using existing data fields.
```tsx
calculatedFieldSettings: [{
name: "Total",
formula: '"Sum(Amount)"+"Sum(Sold)"'
}]
```

To run this application, you need to clone the `create-a-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.
- **Field List:**
Allows users to dynamically modify the Pivot Table layout.

- **Responsive Layout:**
The Pivot Table adjusts to fit the container width and height.

## 🛠 Prerequisites

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

- [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/SyncfusionExamples/create-a-react-pivot-table
```

2. **Navigate to the project folder:**
```bash
cd create-a-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.

## 📂 Project Structure

```
create-a-react-pivot-table/
├── 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
```

## 📚 Learn More

- [Syncfusion React Pivot Table Documentation](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started/)
- [Live Demos](https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/default)

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