Skip to content

Commit dcf0c1a

Browse files
authored
Merge pull request #3 from Sridhar-Karunakaran/main
987889: Updating the README file content
2 parents e17865e + 779b2a5 commit dcf0c1a

File tree

1 file changed

+92
-8
lines changed

1 file changed

+92
-8
lines changed

README.md

Lines changed: 92 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,99 @@
1-
# Create a React Pivot Table component
1+
# Create a React Pivot Table component
22

3-
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.
3+
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.
44

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

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

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

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.
18+
## ✅ Key Features
1219

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

15-
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.
29+
- **Field List:**
30+
Allows users to dynamically modify the Pivot Table layout.
31+
32+
- **Responsive Layout:**
33+
The Pivot Table adjusts to fit the container width and height.
34+
35+
## 🛠 Prerequisites
36+
37+
Before running this project, ensure you have the following installed:
38+
39+
- [Node.js](https://nodejs.org/) (latest version recommended)
40+
- [Visual Studio Code](https://code.visualstudio.com/)
41+
42+
## 🚀 Getting Started
43+
44+
Follow these steps to run the application:
45+
46+
1. **Clone the repository:**
47+
```bash
48+
git clone https://github.com/SyncfusionExamples/create-a-react-pivot-table
49+
```
50+
51+
2. **Navigate to the project folder:**
52+
```bash
53+
cd create-a-react-pivot-table
54+
```
55+
56+
3. **Install dependencies:**
57+
```bash
58+
npm install
59+
```
60+
61+
4. **Start the development server:**
62+
```bash
63+
npm start
64+
```
65+
66+
5. Open your browser and go to `http://localhost:3000` to view the Pivot Table.
67+
68+
## 📂 Project Structure
69+
70+
```
71+
create-a-react-pivot-table/
72+
├── public/
73+
│ ├── index.html
74+
│ └── ...
75+
├── src/
76+
│ ├── App.tsx # Main component with Pivot Table configuration
77+
│ ├── data.js # Sample data used in the Pivot Table
78+
│ └── ...
79+
├── package.json
80+
├── README.md
81+
└── tsconfig.json
82+
```
83+
84+
## 📚 Learn More
85+
86+
- [Syncfusion React Pivot Table Documentation](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started/)
87+
- [Live Demos](https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/default)
88+
89+
## 💬 Support
90+
91+
For questions or feedback, visit:
92+
93+
- [Syncfusion Support Portal](https://support.syncfusion.com)
94+
- [Syncfusion Community Forums](https://www.syncfusion.com/forums)
95+
96+
## 📜 License
97+
98+
This project uses Syncfusion components, which require a valid license for production use.
99+
[View Syncfusion License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf)

0 commit comments

Comments
 (0)