Skip to content

Commit 8670530

Browse files
ManiRam94ManiRam94
authored
Merge pull request #2 from Sridhar-Karunakaran/main
Updating Read me file content
2 parents dcd9d7f + df113c2 commit 8670530

1 file changed

Lines changed: 178 additions & 8 deletions

File tree

‎README.md‎

Lines changed: 178 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,185 @@
1-
# Data Binding in React Pivot Table Component
1+
# 📊 Data Binding in React Pivot Table Component
22

3-
A quick-start project that shows how to bind local and remote data to the React ListBox component of Syncfusion.
3+
[![License](https://img.shields.io/badge/license-SEE%20LICENSE-blue.svg)](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)
4+
[![React](https://img.shields.io/badge/React-18.0-61DAFB.svg)](https://react.dev)
5+
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6.svg)](https://www.typescriptlang.org/)
6+
[![Syncfusion EJ2](https://img.shields.io/badge/Syncfusion%20EJ2-Latest-0078D4.svg)](https://www.syncfusion.com/)
47

5-
Documentation: https://ej2.syncfusion.com/react/documentation/pivotview/data-binding/
8+
> **Quick-start React project demonstrating local and remote data binding to Syncfusion's powerful PivotTable component with TypeScript support** — includes practical JSON binding examples, remote data source integration patterns, and production-ready component configuration.
69
7-
Online examples: https://ej2.syncfusion.com/react/demos/#/bootstrap5/pivot-table/local
10+
## 🔍 Overview
811

9-
## Project prerequisites
12+
This repository provides a comprehensive, production-ready example for implementing **data binding in React Pivot Table components** using Syncfusion's EJ2 library. Whether you're building business intelligence dashboards, financial reporting tools, or data analytics applications, this project demonstrates modern React best practices for dynamic data visualization.
1013

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.
14+
### ✨ Key Features
1215

13-
### How to run this application?
16+
- ✅ **Local Data Binding**: Bind JSON data directly to pivot table components
17+
- ✅ **Remote Data Binding**: Connect to external API data sources with dynamic loading
18+
- ✅ **Syncfusion EJ2 Library**: Leverages feature-rich React components from Syncfusion
19+
- ✅ **TypeScript Support**: Full type-safe development with modern React patterns
20+
- ✅ **Responsive Design**: Optimized for desktop and tablet viewports
21+
- ✅ **Production Ready**: Configured with best practices and clean code structure
22+
- ✅ **Quick Start Setup**: Easy-to-follow configuration with zero-config execution
1423

15-
To run this application, you need to clone the `data-binding-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.
24+
## 📋 Prerequisites
25+
26+
- **Node.js**: LTS v18 or higher — [Download](https://nodejs.org/)
27+
- **npm**: v9 or higher (included with Node.js)
28+
- **React**: v18 or higher
29+
- **TypeScript**: v5 or higher
30+
- **Visual Studio Code**: Latest stable version (recommended)
31+
32+
## 🚀 Installation & Setup
33+
34+
### 1. Clone the Repository
35+
36+
```bash
37+
git clone https://github.com/SyncfusionExamples/data-binding-in-react-pivot-table-component.git
38+
cd data-binding-in-react-pivot-table-component
39+
```
40+
41+
### 2. Install Dependencies
42+
43+
```bash
44+
npm install
45+
```
46+
47+
### 3. Start Development Server
48+
49+
```bash
50+
npm start
51+
```
52+
53+
The application will automatically open at `http://localhost:3000`.
54+
55+
## 🎯 Quick Start Examples
56+
57+
### Local Data Binding
58+
59+
Bind JSON data directly to your pivot table:
60+
61+
```typescript
62+
import { PivotViewComponent, Inject, PivotFieldList } from '@syncfusion/ej2-react-pivotview';
63+
64+
const data = [
65+
{ ProductID: 1, ProductName: 'Laptop', Amount: 5000, Region: 'North' },
66+
{ ProductID: 2, ProductName: 'Desktop', Amount: 3500, Region: 'South' }
67+
];
68+
69+
export function LocalDataBinding() {
70+
return (
71+
<PivotViewComponent dataSource={data} height="400">
72+
<Inject services={[PivotFieldList]} />
73+
</PivotViewComponent>
74+
);
75+
}
76+
```
77+
78+
### Remote Data Binding
79+
80+
Connect to external data sources:
81+
82+
```typescript
83+
const dataSource = {
84+
url: 'https://api.example.com/data',
85+
adaptor: new JsonAdaptor()
86+
};
87+
88+
<PivotViewComponent dataSource={dataSource} height="400">
89+
<Inject services={[PivotFieldList]} />
90+
</PivotViewComponent>
91+
```
92+
93+
## 🗂️ Project Structure
94+
95+
```
96+
data-binding-in-react-pivot-table-component/
97+
├── src/
98+
│ ├── App.tsx # Main application component
99+
│ ├── App.css # Application styles
100+
│ ├── App.test.tsx # Component tests
101+
│ ├── index.tsx # React entry point
102+
│ ├── index.css # Global styles
103+
│ ├── csvdata.ts # Sample CSV data
104+
│ ├── data.js # Sample JSON data
105+
│ └── reportWebVitals.ts # Performance metrics
106+
├── public/
107+
│ ├── index.html # HTML template
108+
│ ├── manifest.json # PWA manifest
109+
│ └── robots.txt # SEO robots file
110+
├── package.json # Dependencies and scripts
111+
├── tsconfig.json # TypeScript configuration
112+
└── README.md # This file
113+
```
114+
115+
## 💡 Usage & Examples
116+
117+
### Running Data Binding Examples
118+
119+
The project includes comprehensive examples for both local and remote data binding patterns. Explore the component implementations to understand:
120+
121+
- How to structure pivot table configurations
122+
- Binding data from JSON sources
123+
- Connecting to REST APIs
124+
- Handling dynamic data updates
125+
- Configuring rows, columns, and values
126+
127+
### Sample Data Files
128+
129+
- **csvdata.ts**: Pre-configured CSV data for pivot table examples
130+
- **data.js**: JSON formatted sample data for local binding demonstrations
131+
132+
## ⚙️ Configuration
133+
134+
### Available Scripts
135+
136+
- `npm start` — Start the development server
137+
- `npm test` — Run test suite
138+
- `npm run build` — Build production bundle
139+
- `npm run eject` — Eject Create React App (not reversible)
140+
141+
### Environment Configuration
142+
143+
Configure data sources and API endpoints in your component files:
144+
145+
```typescript
146+
const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';
147+
const DATA_SOURCE_URL = `${API_BASE_URL}/api/data`;
148+
```
149+
150+
## 🔧 Troubleshooting
151+
152+
**Port already in use?**
153+
```bash
154+
npm start -- --port 3001
155+
```
156+
157+
**Syncfusion license key issues?**
158+
Check Syncfusion documentation for registration: https://www.syncfusion.com/products/react
159+
160+
**Data not displaying?**
161+
Verify data structure matches expected schema and check browser console for errors.
162+
163+
## 🤝 Contributing
164+
165+
Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.
166+
167+
## 📄 License
168+
169+
This project is licensed under the **Syncfusion Community License**. See [Syncfusion License](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) for details.
170+
171+
## 📚 Resources
172+
173+
- [Syncfusion React Documentation](https://www.syncfusion.com/react-components)
174+
- [React Official Documentation](https://react.dev)
175+
- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
176+
- [Pivot Table Component Guide](https://ej2.syncfusion.com/react/documentation/pivotview/getting-started)
177+
178+
## 🆘 Support
179+
180+
For issues, questions, or suggestions:
181+
- 📧 Open an issue on GitHub
182+
- 💬 Check existing documentation
183+
- 🌐 Visit Syncfusion support forums
184+
185+
---

0 commit comments

Comments
 (0)