Skip to content

Commit f1530f9

Browse files
authored
Merge pull request #3 from Sridhar-Karunakaran/master
987889: Updating the README file content
2 parents 0003d73 + 059b0ae commit f1530f9

File tree

1 file changed

+81
-14
lines changed

1 file changed

+81
-14
lines changed

README.md

Lines changed: 81 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,94 @@
1-
# GridSample
21

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.1.
2+
# Syncfusion Angular Pivot Table – Basic Usage Example
43

5-
## Development server
4+
This sample demonstrates how to integrate and configure the **Syncfusion Pivot Table (PivotView)** component in an **Angular 13** application. The Pivot Table is a powerful UI component for organizing and analyzing large datasets in a tabular format.
65

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
6+
## 📖 Overview
87

9-
## Code scaffolding
8+
The Syncfusion Pivot Table (PivotView) component allows users to summarize and analyze data interactively. In this example, we showcase how to:
109

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
10+
- Set up the Pivot Table in an Angular 13 application.
11+
- Bind a static dataset to the component.
12+
- Configure rows, columns, values, and formatting options.
1213

13-
## Build
14+
The sample uses a dataset representing sales information for **Mountain Bikes** in **France** across different **quarters** and **fiscal years**.
1415

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
## 🧩 Features Demonstrated
1617

17-
## Running unit tests
18+
- **Data Binding:**
19+
The Pivot Table is bound to a static array of sales data using the `dataSourceSettings` property.
1820

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
21+
- **Row and Column Configuration:**
22+
- **Rows:** `Country`, `Products`
23+
- **Columns:** `Year` (captioned as "Production Year"), `Quarter`
24+
- **Values:** `Sold` (Units Sold), `Amount` (Sold Amount)
2025

21-
## Running end-to-end tests
26+
- **Custom Captions:**
27+
Field captions are customized for better readability using the `caption` property.
2228

23-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
29+
- **Responsive Layout:**
30+
The Pivot Table is rendered with a fixed height of `350px` for optimal display.
2431

25-
## Further help
32+
## 🛠 Prerequisites
2633

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
34+
To run this sample, ensure you have the following:
35+
36+
- **Node.js** and **npm** installed
37+
- **Angular CLI** installed globally
38+
- A modern browser (Chrome, Firefox, Edge)
39+
40+
## 🚀 Getting Started
41+
42+
1. **Clone the repository:**
43+
```bash
44+
git clone https://github.com/SyncfusionExamples/ej2-angular-13-pivot-table
45+
```
46+
47+
2. **Navigate to the project folder:**
48+
```bash
49+
cd angular-pivot-table-sample
50+
```
51+
52+
3. **Install dependencies:**
53+
```bash
54+
npm install
55+
```
56+
57+
4. **Run the application:**
58+
```bash
59+
ng serve
60+
```
61+
62+
5. **Open in browser:**
63+
Visit `http://localhost:4200` to view the Pivot Table in action.
64+
65+
## 📊 Sample Data
66+
67+
The sample uses a small dataset with the following fields:
68+
69+
```json
70+
[
71+
{ "Sold": 31, "Amount": 52824, "Country": "France", "Products": "Mountain Bikes", "Year": "FY 2015", "Quarter": "Q1" },
72+
{ "Sold": 51, "Amount": 86904, "Country": "France", "Products": "Mountain Bikes", "Year": "FY 2015", "Quarter": "Q2" },
73+
{ "Sold": 90, "Amount": 153360, "Country": "France", "Products": "Mountain Bikes", "Year": "FY 2015", "Quarter": "Q3" },
74+
{ "Sold": 25, "Amount": 42600, "Country": "France", "Products": "Mountain Bikes", "Year": "FY 2015", "Quarter": "Q4" },
75+
{ "Sold": 27, "Amount": 46008, "Country": "France", "Products": "Mountain Bikes", "Year": "FY 2016", "Quarter": "Q1" }
76+
]
77+
```
78+
79+
## 📚 Learn More
80+
81+
- [Syncfusion Angular Pivot Table Documentation](https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started/)
82+
- [Angular Pivot Table Demos](https://ej2.syncfusion.com/angular/demos/#/material3/pivot-table/overview)
83+
84+
## 💬 Support
85+
86+
For questions or feedback, visit:
87+
88+
- [Syncfusion Support Portal](https://support.syncfusion.com)
89+
- [Syncfusion Community Forums](https://www.syncfusion.com/forums)
90+
91+
## 📜 License
92+
93+
This sample uses Syncfusion components which require a valid license for commercial use.
94+
[View Syncfusion License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf)

0 commit comments

Comments
 (0)