|
1 | | -# Date Formatting in Syncfusion Pivot Table |
2 | | -This repository contain the sample that demonstrates how the date formatting feature working in [Syncfusion Pivot table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table). |
| 1 | +# Syncfusion JavaScript Pivot Table – Date Formatting Example |
3 | 2 |
|
4 | | -## How to run the project |
| 3 | +This sample demonstrates how to **apply date formatting in the Syncfusion JavaScript Pivot Table (PivotView)** component. Date formatting helps display date fields in a user-friendly format, making reports easier to read and analyze. |
5 | 4 |
|
6 | | -* Checkout this project to a location in your disk. |
7 | | -* Open the HTML file to work with the demo. |
| 5 | +## 📖 Overview |
| 6 | + |
| 7 | +The Pivot Table (PivotView) is a powerful component for summarizing and analyzing large datasets. In this example: |
| 8 | + |
| 9 | +- We generate a dataset with fields like `ProductID`, `City`, `Date`, `CustomerName`, `Sold`, and `InStock`. |
| 10 | +- The **Date** field is formatted using the pattern `dd/MM/yyyy-hh:mm a` (e.g., `21/10/2025-08:15 PM`). |
| 11 | +- The Pivot Table is configured with: |
| 12 | + - **Rows:** `Date` |
| 13 | + - **Columns:** `ProductID` |
| 14 | + - **Values:** `Sold` (Units Sold), `InStock` (Stock Available) |
| 15 | +- Virtualization is enabled for handling large data efficiently. |
| 16 | + |
| 17 | +## ✅ Key Features in This Sample |
| 18 | + |
| 19 | +- **Date Formatting:** |
| 20 | + The `formatSettings` property is used to apply custom date formats: |
| 21 | + ```javascript |
| 22 | + formatSettings: [{ name: 'Date', type: 'date', format: 'dd/MM/yyyy-hh:mm a' }] |
| 23 | + ``` |
| 24 | +- **Grouping and Sorting:** |
| 25 | + Grouping is applied on `ProductID` with a range interval of 4. |
| 26 | +- **Performance Optimization:** |
| 27 | + Virtual scrolling and member editor limits are enabled for large datasets. |
| 28 | + |
| 29 | +## 🛠 Prerequisites |
| 30 | + |
| 31 | +- A modern browser (Chrome, Firefox, Edge) |
| 32 | +- No build tools required; this is a pure HTML/JavaScript example. |
| 33 | + |
| 34 | +## 🚀 Getting Started |
| 35 | + |
| 36 | +1. **Clone the repository:** |
| 37 | + ```bash |
| 38 | + git clone https://github.com/SyncfusionExamples/date-formatting-pivot-table |
| 39 | + ``` |
| 40 | +2. **Open the sample:** |
| 41 | + - Navigate to the project folder. |
| 42 | + - Open `Date_Formatting.HTML` in your browser. |
| 43 | + |
| 44 | +## 📂 Project Structure |
| 45 | + |
| 46 | +- `Date_Formatting.HTML` – Main sample file with Pivot Table configuration. |
| 47 | +- `styles/material.css` – Syncfusion Material theme. |
| 48 | +- `scripts/ej2.min.js` – Syncfusion JavaScript library. |
| 49 | + |
| 50 | +## 📚 Learn More |
| 51 | + |
| 52 | +- [Pivot Table Documentation](https://ej2.syncfusion.com/javascript/documentation/pivotview/getting-started) |
| 53 | +- [Pivot Table Demos](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/pivot-table/overview.html) |
| 54 | + |
| 55 | +## 💬 Support |
| 56 | + |
| 57 | +For questions or feedback, visit the [Syncfusion Support Portal](https://support.syncfusion.com) or [Community Forums](https://www.syncfusion.com/forums). |
| 58 | + |
| 59 | +## 📜 License |
| 60 | + |
| 61 | +This is a commercial product and requires a valid Syncfusion license. |
| 62 | +[View License Terms](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf). |
0 commit comments