Skip to content

Commit dfb07b6

Browse files
Sridhar-KarunakaranSridhar-Karunakaran
committed
Updating Readme file content
1 parent ca83e33 commit dfb07b6

1 file changed

Lines changed: 169 additions & 18 deletions

File tree

‎README.md‎

Lines changed: 169 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,188 @@
1-
# Getting Started with React UI Components using Next.js
1+
# 📊 Getting Started — React Pivot Table Component (Syncfusion EJ2) + Next.js
22

3-
This application demonstrates the usage of the Syncfusion React Pivot Table component in Next.js.
3+
[![License](https://img.shields.io/badge/license-SEE%20LICENSE%20IN%20license-blue.svg)](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)
4+
[![Nextjs](https://img.shields.io/badge/Nextjs-16.1.16-blue.svg)](https://nextjs.org/)
5+
[![Syncfusion Version](https://img.shields.io/badge/Syncfusion%20EJ2-32.1.19-green.svg)](https://www.syncfusion.com/react-components/)
6+
[![Node.js](https://img.shields.io/badge/Node.js-LTS-green.svg)](https://nodejs.org/)
7+
[![npm](https://img.shields.io/badge/npm-v10%2B-blue.svg)](https://www.npmjs.com/)
48

5-
To know how to configure the Syncfusion React Pivot Table component in Next.js, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/pivotview/nextjs-getting-started).
9+
A small Next.js sample showcasing how to integrate the Syncfusion React Pivot Table (PivotView) component with the Next.js App Router. This repo demonstrates a client-side `app/page.tsx` usage, sample datasource and theme imports so you can run the demo locally in minutes. 🚀
610

7-
## Clone the repository
11+
## 🔍 Quick overview
812

9-
* To clone the sample repository locally, open the command prompt in the desired location and execute the following command.
13+
- What: Example Next.js app that integrates the Syncfusion React Pivot Table (`@syncfusion/ej2-react-pivotview`).
14+
- Why: Shows how to use Syncfusion interactive components with the Next.js App Router (client components + CSS imports).
15+
- Who: Frontend developers building data-visualization dashboards using React + Next.js.
1016

11-
```sh
17+
## ✨ Key Features
1218

13-
git clone https://github.com/SyncfusionExamples/ej2-nextjs-pivotview.git
19+
| Feature | Description | Benefit |
20+
|---------|-------------|---------|
21+
| 🎯 **Field List Interface** | Dynamically add, remove, and rearrange data fields at runtime | Empowers end-users to customize reports without code modifications |
22+
| 📊 **Flexible Data Binding** | Supports relational data binding with hierarchical structures | Handle complex multi-dimensional business data |
23+
| 🧮 **Calculated Fields** | Create custom formulas combining multiple data fields | Advanced data analysis and business metric computation |
24+
| 💱 **Data Formatting** | Display values in currency, percentages, and custom formats | Professional presentation of numerical data |
25+
| ↕️ **Multi-Level Sorting** | Sort by multiple fields with ascending/descending control | Enhanced data exploration and trend analysis |
26+
| 🔗 **Advanced Filtering** | Filter by single or multiple criteria across all dimensions | Focused data analysis and drill-down exploration |
27+
| 📱 **Responsive Design** | Adapts seamlessly to desktop, tablet, and mobile screens | Universal accessibility across all devices |
28+
| 📤 **Export Functionality** | Export pivot table data to Excel and PDF formats | Generate shareable reports and archives |
29+
| 🎨 **Theme Support** | Multiple Tailwind and Bootstrap themes available | Consistent branding and visual customization |
30+
| ⚡ **Performance Optimized** | Efficient rendering with virtual scrolling | Handle large datasets without performance degradation |
1431

15-
```
1632

17-
* Navigate to the project directory:
33+
## ✅ Highlights
1834

19-
```sh
20-
cd ej2-nextjs-pivotview
21-
```
35+
- Ready-to-run demo with sample `pivotData`.
36+
- Uses Syncfusion module injection (`CalculatedField`, `FieldList`).
37+
- Shows theme / CSS imports to `app/globals.css` for consistent styling.
38+
39+
## 🔧 Prerequisites
2240

23-
## Installing Packages
41+
- Node.js 18 LTS or later
42+
- npm (or yarn)
2443

25-
Install the required node modules by running the following command:
44+
## 🚀 Quick start
2645

27-
```sh
46+
Clone, install and run the app locally:
47+
48+
```bash
49+
git clone https://github.com/SyncfusionExamples/syncfusion-react-pivotview-component-in-nextjs
50+
cd syncfusion-react-pivotview-component-in-nextjs
2851
npm install
52+
npm run dev
2953
```
3054

31-
## Run the application
55+
Open http://localhost:3000 to view the running sample.
3256

33-
To run the application, use the following command:
57+
---
58+
59+
## 📁 What’s included
60+
61+
- `app/datasource.tsx` — sample `pivotData` used by the demo.
62+
- `app/page.tsx` — client component mounting `PivotViewComponent` and injecting services.
63+
- `app/globals.css` — recommended place to add Syncfusion theme CSS imports.
64+
65+
## 🔌 How this sample was prepared (key steps)
66+
67+
1. Install the Syncfusion PivotView package:
3468

3569
```bash
36-
npm run dev
70+
npm install @syncfusion/ej2-react-pivotview --save
3771
```
72+
73+
2. Import Syncfusion theme CSS into `app/globals.css` (example Tailwind3 theme imports):
74+
75+
```css
76+
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
77+
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
78+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
79+
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
80+
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
81+
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
82+
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
83+
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
84+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
85+
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
86+
@import '../node_modules/@syncfusion/ej2-react-pivotview/styles/tailwind3.css';
87+
/* add other component CSS as needed */
88+
```
89+
90+
3. Make `app/page.tsx` a client component and mount `PivotViewComponent`:
91+
92+
```tsx
93+
'use client'
94+
import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
95+
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
96+
import { pivotData } from './datasource';
97+
98+
export default function Home() {
99+
const dataSourceSettings: DataSourceSettingsModel = {
100+
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
101+
dataSource: pivotData as any[],
102+
expandAll: false,
103+
filters: [],
104+
drilledMembers: [{ name: 'Country', items: ['Germany'] }],
105+
formatSettings: [{ name: 'Amount', format: 'C0' }],
106+
rows: [{ name: 'Country' }, { name: 'Products' }],
107+
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
108+
};
109+
110+
return (
111+
<>
112+
<h2>Syncfusion React Pivot Table Component</h2>
113+
<PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]} />
114+
</PivotViewComponent>
115+
</>
116+
)
117+
}
118+
```
119+
120+
4. Provide sample `pivotData` in `app/datasource.tsx` (array of objects) — the demo ships with this file.
121+
122+
---
123+
124+
## ⚙️ Configuration & customization
125+
126+
- Theme: Swap the Tailwind3 CSS imports to a different Syncfusion theme file if you prefer (e.g., `fabric.css`, `material.css`).
127+
- Localization: Use Syncfusion localization utilities if needed.
128+
- Lazy-loading: Consider dynamic imports for PivotView if server-side rendering is used elsewhere.
129+
130+
## 🧩 Files structure (important files)
131+
132+
- `app/datasource.tsx` — sample data
133+
- `app/page.tsx` — demo page (client component)
134+
- `app/globals.css` — place to import Syncfusion themes
135+
- `next.config.js`, `package.json`, `tsconfig.json` — project configs
136+
137+
---
138+
139+
## 🛠 Troubleshooting
140+
141+
- If components don’t style correctly, ensure the theme CSS is imported into `app/globals.css` and there are no conflicting global rules.
142+
- If interactive features fail, verify `app/page.tsx` includes `'use client'` at the top.
143+
144+
---
145+
146+
## 🤝 Contributing
147+
148+
We welcome contributions! Here's how you can help:
149+
150+
1. **Fork** the repository
151+
2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
152+
3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
153+
4. **Push** to the branch (`git push origin feature/amazing-feature`)
154+
5. **Open** a Pull Request
155+
156+
---
157+
158+
## 📜 License & Support
159+
160+
### License
161+
162+
This project is licensed under the **Syncfusion Community License**. See the [Syncfusion License](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) for details.
163+
164+
### Support & Resources
165+
166+
- 📚 **Official Documentation:** [Syncfusion React PivotView](https://ej2.syncfusion.com/react/documentation/pivotview/nextjs-getting-started)
167+
- 🎬 **Video Tutorials:** [Syncfusion YouTube Channel](https://www.youtube.com/c/SyncfusionInc)
168+
- 💬 **Support Forum:** [Syncfusion Support](https://www.syncfusion.com/forums/react-js2)
169+
- 🐛 **Report Issues:** [GitHub Issues](https://github.com/SyncfusionExamples/syncfusion-react-pivotview-component-in-nextjs/issues)
170+
- 📧 **Contact Us:** support@syncfusion.com
171+
172+
### Additional Resources
173+
174+
- 🔗 [Syncfusion React Components](https://www.syncfusion.com/react-components/)
175+
- 📖 [Syncfusion Community](https://www.syncfusion.com/forums/react-js2)
176+
- 🎯 [Demo Sample](https://ej2.syncfusion.com/nextjs/demos/tailwind3/pivot-table/overview)
177+
178+
---
179+
180+
## ⚡ Performance Tips
181+
182+
- ✅ Use **virtual scrolling** for large datasets (1000+ rows)
183+
- ✅ Enable **lazy loading** for remote data sources
184+
- ✅ Optimize **format settings** to reduce rendering overhead
185+
- ✅ Use **filter and drill-down** to reduce data volume displayed
186+
- ✅ Consider **server-side aggregation** for very large datasets
187+
188+
---

0 commit comments

Comments
 (0)