|
1 | | -# getting-started-with-the-javascript-pivot-table-component |
2 | | -A quick-start project that demonstrates how to integrate a Javascript pivot table component into a Javascript application with some of its fundamental features such as FieldList, GroupingBar, and CalculatedField. |
| 1 | +# 🚀 Getting Started — JavaScript Pivot Table Component (Syncfusion EJ2) |
3 | 2 |
|
4 | | -Refer to the following documentation to learn about the Javascript pivot table Component: https://ej2.syncfusion.com/javascript/documentation/pivotview/getting-started?cs-save-lang=1&cs-lang=html |
| 3 | +[](license) |
| 4 | +[](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-pivot-table-component/commits) |
| 5 | +[](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-pivot-table-component) |
5 | 6 |
|
6 | | -Check out this online example of the Javascript pivot table Component: https://ej2.syncfusion.com/javascript/demos/#/fluent2/pivot-table/overview.html |
| 7 | +> Quick-start JavaScript demo showing how to integrate Syncfusion EJ2 `PivotView` (Pivot Table) using CDN or local scripts. Demonstrates `FieldList`, `GroupingBar`, and `CalculatedField` with sample data. |
7 | 8 |
|
8 | | -# Project prerequisites |
9 | | -Make sure that you have the compatible versions of Visual Studio Code in your machine before starting to work on this project. |
| 9 | +> **Demo (official):** https://ej2.syncfusion.com/javascript/demos/#/fluent2/pivot-table/overview.html |
10 | 10 |
|
11 | | -# How to run this application |
12 | | -To run this application, you first need to clone the [getting-started-with-the-javascript-pivot-table-component](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-pivot-table-component) repository and then open it in Visual Studio Code. Now, run the index.html in web browser, it will render the Essential JS 2 pivot table control. |
| 11 | +--- |
| 12 | + |
| 13 | +# 📚 Table of Contents |
| 14 | + |
| 15 | +- [🔍 Overview](#-overview) |
| 16 | +- [✨ Features](#-features) |
| 17 | +- [🧭 Quick Start](#-quick-start) |
| 18 | +- [🧩 Minimal Example](#-minimal-example) |
| 19 | +- [🗂️ Project Structure](#-project-structure) |
| 20 | +- [⚙️ Customization & Notes](#-customization--notes) |
| 21 | +- [🧪 Development & Tests](#-development--tests) |
| 22 | +- [🤝 Contributing](#-contributing) |
| 23 | +- [📜 License & Support](#-license--support) |
| 24 | + |
| 25 | +--- |
| 26 | + |
| 27 | +## 🔍 Overview |
| 28 | + |
| 29 | +This repository is a minimal JavaScript quick-start that demonstrates how to embed Syncfusion EJ2 `PivotView` into a plain JavaScript/HTML page. It uses CDN-hosted EJ2 scripts and CSS for fast prototyping and shows how to enable `FieldList` and calculated values. |
| 30 | + |
| 31 | +## ✨ Features |
| 32 | + |
| 33 | +- Browser-first example using CDN (`ej2.min.js`) and local sample data. |
| 34 | +- `PivotView` with `showFieldList` enabled and calculated fields support. |
| 35 | +- Self-contained demo: open `index.html` in a browser to run. |
| 36 | +- Lightweight example ideal for prototyping or learning the API. |
| 37 | + |
| 38 | +## 🧭 Quick Start |
| 39 | + |
| 40 | +Steps to run: |
| 41 | + |
| 42 | +```bash |
| 43 | +git clone https://github.com/SyncfusionExamples/getting-started-with-the-javascript-pivot-table-component.git |
| 44 | +cd getting-started-with-the-javascript-pivot-table-component |
| 45 | +# Open index.html in your browser (double-click or use a static server) |
| 46 | +``` |
| 47 | + |
| 48 | +## 🧩 Minimal Example |
| 49 | + |
| 50 | +HTML includes CDN CSS and script (example excerpts from `index.html`): |
| 51 | + |
| 52 | +```html |
| 53 | +<!-- material theme and pivotview CSS from CDN --> |
| 54 | +<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-pivotview/styles/material.css" rel="stylesheet"> |
| 55 | +<!-- EJ2 bundle (includes pivotview) --> |
| 56 | +<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js"></script> |
| 57 | +<script src="es5-datasource.js"></script> |
| 58 | +<div id="PivotTable"></div> |
| 59 | +<script src="index.js"></script> |
| 60 | +``` |
| 61 | + |
| 62 | +Core initialization (`index.js`): |
| 63 | + |
| 64 | +```js |
| 65 | +var pivotTableObj = new ej.pivotview.PivotView({ |
| 66 | + dataSourceSettings: { |
| 67 | + columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }], |
| 68 | + dataSource: pivotData, |
| 69 | + expandAll: false, |
| 70 | + enableSorting: true, |
| 71 | + filters: [], |
| 72 | + drilledMembers: [{ name: 'Country', items: ['France'] }], |
| 73 | + formatSettings: [{ name: 'Amount', format: 'C0' }], |
| 74 | + rows: [{ name: 'Country' }, { name: 'State' }], |
| 75 | + values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }] |
| 76 | + }, |
| 77 | + height: 350, |
| 78 | + showFieldList: true |
| 79 | +}); |
| 80 | +pivotTableObj.appendTo('#PivotTable'); |
| 81 | +``` |
| 82 | + |
| 83 | +Sample data (`es5-datasource.js`): |
| 84 | + |
| 85 | +```js |
| 86 | +var pivotData = [ |
| 87 | + { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" }, |
| 88 | + { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" }, |
| 89 | + { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" }, |
| 90 | + /* ...more rows (see es5-datasource.js) ... */ |
| 91 | +]; |
| 92 | +``` |
| 93 | + |
| 94 | +## 🗂️ Project Structure |
| 95 | + |
| 96 | +- `index.html` — demo host with CDN links and CSS |
| 97 | +- `index.js` — PivotView initialization (plain JavaScript) |
| 98 | +- `es5-datasource.js` — sample dataset used by demo |
| 99 | +- `README.md` — this file |
| 100 | + |
| 101 | +## ⚙️ Customization & Notes |
| 102 | + |
| 103 | +- Change CDN version numbers in `index.html` to match your installed EJ2 version. |
| 104 | +- For production use, prefer installing specific packages (e.g., `@syncfusion/ej2-pivotview`) and bundling with Webpack/Rollup. |
| 105 | +- For large datasets use virtualization and server-side aggregation. |
| 106 | + |
| 107 | +## 🧪 Development & Tests |
| 108 | + |
| 109 | +This repository is a static demo. To develop or test changes: |
| 110 | + |
| 111 | +- Open `index.html` in a browser or run a local HTTP server (see Quick Start). |
| 112 | +- For automated testing or packaging, add a build toolchain (Webpack) and test runner (Jasmine/Mocha) as needed. |
| 113 | + |
| 114 | +## 🤝 Contributing |
| 115 | + |
| 116 | +Contributions are welcome. Please fork the repository and open a pull request with a clear description of your change. Suggested guidelines: |
| 117 | + |
| 118 | +1. Create a branch: `feature/<short-desc>` |
| 119 | +2. Keep examples small and focused (this is a demo repo) |
| 120 | +3. Update README or add sample files when adding features |
| 121 | + |
| 122 | +## 📜 License & Support |
| 123 | + |
| 124 | +Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license. |
| 125 | + |
| 126 | +To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. |
| 127 | + |
| 128 | +Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options. |
| 129 | + |
| 130 | +Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. |
| 131 | + |
| 132 | +The Syncfusion license that contains the terms and conditions can be found at |
| 133 | +https://www.syncfusion.com/content/downloads/syncfusion_license.pdf |
0 commit comments