Skip to content

Commit cec73c7

Browse files
authored
Merge pull request #2 from Sridhar-Karunakaran/main
987889: Updating the README file content
2 parents 908ac9d + 2c6fefd commit cec73c7

File tree

1 file changed

+83
-8
lines changed

1 file changed

+83
-8
lines changed

README.md

Lines changed: 83 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,90 @@
1-
# Field List in React Pivot Table
1+
# 📊 Enable Field List in Syncfusion React Pivot Table
22

3-
A quick-start project that shows how to enable a field list in Syncfusion React Pivot Table. This project also contains code snippet to enable a field list in the toolbar, to show values button, and calculated fields.
3+
This sample demonstrates how to **enable and configure a Field List** in the Syncfusion **React Pivot Table (PivotView)** component. It also showcases features like **toolbar integration**, **calculated fields**, and **value buttons** for interactive data analysis.
44

5-
Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/field-list/
5+
## 🔍 Overview
66

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

9-
## Project prerequisites
9+
- A sample dataset includes fields like `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)
14+
- The **Field List** is enabled and integrated into the toolbar.
15+
- **Calculated Fields** and **Defer Layout Update** options are also enabled.
16+
- The field list dialog is rendered with `document.body` as its target for better UI placement.
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+
- **Field List:** Allows users to dynamically modify the Pivot Table layout.
21+
- **Toolbar Integration:** Adds the Field List button to the toolbar.
22+
- **Calculated Fields:** Enables creation of custom calculations.
23+
- **Values Button:** Displays value settings for better customization.
24+
- **Defer Layout Update:** Improves performance during configuration.
1425

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

0 commit comments

Comments
 (0)