Add files via upload

Author: Niluba

README.md

@@ -1,2 +1,15 @@
-# how-to-group-data-in-the-angular-pivot-table
-A quick start project that shows how to group data in the Angular Pivot Table Component. This project also explains the types of Grouping such as Number, Date, and Custom based on the field type.
+# How to Group Data in the Angular Pivot Table
+
+A quick start project that shows how to group data in the Angular Pivot Table Component. This project also explains the types of Grouping such as Number, Date, and Custom based on the field type.
+ 
+Refer to the following documentation to learn about the Angular Pivot Table component: 
+https://ej2.syncfusion.com/angular/documentation/pivotview/grouping
+
+Check out this online example of the Angular Pivot Table component:
+https://ej2.syncfusion.com/angular/demos/#/material/pivot-table/grouping  
+
+## Project prerequisites
+Make sure that you have the compatible versions of [Visual Studio Code](https://code.visualstudio.com/download ) and [NodeJS](https://nodejs.org/en/download) or later version in your machine before starting to work on this project.
+
+## How to run this application
+To run this application, you need to first clone the `how-to-group-data-in-the-angular-pivot-table` repository and then open it in Visual Studio Code. Now, simply build and run your project to view the output.

angular.json

@@ -0,0 +1,95 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "example": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/example",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example:build:production"
+            },
+            "development": {
+              "buildTarget": "example:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.2.0",
+    "@angular/common": "^17.2.0",
+    "@angular/compiler": "^17.2.0",
+    "@angular/core": "^17.2.0",
+    "@angular/forms": "^17.2.0",
+    "@angular/platform-browser": "^17.2.0",
+    "@angular/platform-browser-dynamic": "^17.2.0",
+    "@angular/router": "^17.2.0",
+    "@syncfusion/ej2-angular-pivotview": "^24.2.5",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.2.0",
+    "@angular/cli": "^17.2.0",
+    "@angular/compiler-cli": "^17.2.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.3.2"
+  }
+}

src/app/app.component.css

@@ -0,0 +1,3 @@
+<ejs-pivotview [dataSourceSettings]="dataSourceSettings" height="500px" width="100%" 
+showGroupingBar='true' allowGrouping="true"
+></ejs-pivotview>

src/app/app.component.html

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'example' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('example');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, example');
+  });
+});

src/app/app.component.spec.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { PivotViewModule,IDataOptions, IDataSet, GroupingBarService, GroupingService } from '@syncfusion/ej2-angular-pivotview';
+declare var require: any;
+let data: any = require('./gData.json');
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet,PivotViewModule ],
+  providers: [GroupingBarService, GroupingService],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'example';
+ 
+  public dataSourceSettings: IDataOptions | undefined;
+  ngOnInit(): void {
+     this.dataSourceSettings = {
+        dataSource: data as IDataSet[],
+        rows: [
+          { name: 'Products', caption: 'Products'},
+          //{ name: 'Date', caption: 'Date' }
+        ],
+        columns: [
+          { name: 'Product_ID', caption: 'Product ID' },
+          { name: 'Products', caption: 'Products' }],
+        values: [
+          { name: 'Sold', caption: 'Unit Sold' },
+          { name: 'Amount', caption: 'Sold Amount' }],
+        formatSettings: [
+          { name: 'Amount', format: 'C0' },
+          { name: 'Sold', format: 'N0' },
+          { name: 'Date', type: 'date', format: 'dd/MM/yyyy-hh:mm a' }
+        ],
+        groupSettings: [
+          { name: 'Products', type: 'Custom', 
+            customGroups: [{ groupName: 'Products-3',
+             items: ['Gloves','Jerseys','Shorts']}] }
+        ]
+    };
+}
+}

src/app/app.component.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

src/app/app.config.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];