Skip to content

Commit 34d76bf

Browse files
ManiRam94ManiRam94
authored
Merge pull request #3 from Sridhar-Karunakaran/master
Updating readme content
2 parents 74aa714 + 41e8423 commit 34d76bf

1 file changed

Lines changed: 378 additions & 13 deletions

File tree

‎README.md‎

Lines changed: 378 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,385 @@
1-
# Customize the appearance of a Blazor Pivot Table Using Templates and Conditional Formatting
1+
# 📊 Customize Blazor Pivot Table Appearance with Templates & Conditional Formatting
22

3-
A quick-start project that helps you customize the Syncfusion Blazor Pivot Table easily using a template and conditional formatting in a WebAssembly app. You will learn how to customize the appearance of Pivot Table cells using the cell template and apply conditional formatting to a specific value field programmatically and to all the value fields.
3+
[![License](https://img.shields.io/badge/license-SEE%20LICENSE-blue.svg)](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)
4+
[![.NET 8.0](https://img.shields.io/badge/.NET-8.0-512BD4.svg)](https://dotnet.microsoft.com/)
5+
[![Blazor WebAssembly](https://img.shields.io/badge/Blazor-WebAssembly-blueviolet.svg)](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor)
6+
[![Syncfusion](https://img.shields.io/badge/Syncfusion-Blazor%20UI-green.svg)](https://www.syncfusion.com/blazor-components)
47

5-
**Documentation**: https://blazor.syncfusion.com/documentation/pivot-table/row-and-column/#cell-template
6-
https://blazor.syncfusion.com/documentation/pivot-table/conditional-formatting
8+
> **Master professional Pivot Table customization** with Syncfusion Blazor components. Learn how to apply cell templates, conditional formatting rules, and programmatic styling for enterprise-grade business intelligence dashboards.
79
8-
**Online example**: https://blazor.syncfusion.com/demos/pivot-table/cell-template
9-
https://blazor.syncfusion.com/demos/pivot-table/conditional-formatting
10+
---
1011

11-
## Prerequisites
12+
## 📋 Table of Contents
1213

13-
* Visual Studio 2022
14+
- [🎯 Quick Overview](#-quick-overview)
15+
- [✨ Key Features](#-key-features)
16+
- [🛠 Technology Stack](#-technology-stack)
17+
- [📋 Prerequisites](#-prerequisites)
18+
- [🚀 Quick Start Guide](#-quick-start-guide)
19+
- [🗂 Project Structure](#-project-structure)
20+
- [💡 Core Concepts](#-core-concepts)
21+
- [🎨 Usage Examples](#-usage-examples)
22+
- [⚙️ Configuration & Customization](#-configuration--customization)
23+
- [❓ FAQ & Troubleshooting](#-faq--troubleshooting)
24+
- [📖 Resources](#-resources)
25+
- [🤝 Contributing](#-contributing)
26+
- [📄 License](#-license)
1427

15-
## How to run the project
28+
---
1629

17-
* Checkout this project to a location in your disk.
18-
* Open the solution file using the Visual Studio 2022.
19-
* Restore the NuGet packages by rebuilding the solution.
20-
* Run the project.
30+
## 🎯 Quick Overview
31+
32+
This repository provides a **production-ready reference implementation** for building customizable Syncfusion Pivot Tables in **Blazor WebAssembly applications**. It demonstrates best practices for:
33+
34+
- **Cell Template Customization** — Apply custom HTML, icons, colors, and interactive elements
35+
- **Conditional Formatting** — Dynamically style cells based on data values
36+
- **Programmatic Styling** — Leverage C# logic for complex formatting rules
37+
- **Performance Optimization** — Client-side rendering with WebAssembly efficiency
38+
- **Enterprise Reporting** — Build professional dashboards for BI and analytics
39+
40+
### Real-World Use Cases
41+
42+
- 📊 Energy sector analytics and reporting dashboards
43+
- 💼 Business intelligence and KPI dashboards
44+
- 📈 Financial analysis and risk reporting
45+
- 🏢 Enterprise data visualization
46+
- 🎓 Educational and training applications
47+
48+
---
49+
50+
## ✨ Key Features
51+
52+
| Feature | Description | Benefits |
53+
|---------|-------------|----------|
54+
| 🎨 **Cell Templates** | Custom HTML rendering in pivot table cells | Create rich, interactive data visualizations |
55+
| 📊 **Conditional Formatting** | Dynamic color rules and styling based on values | Instantly highlight trends and anomalies |
56+
| 💻 **C# Integration** | Server-side logic for complex formatting | Business rule engine for sophisticated analytics |
57+
| ⚡ **WebAssembly** | Client-side rendering with optimal performance | Smooth interactions and reduced server load |
58+
| 🔧 **Syncfusion Components** | Enterprise-grade UI controls | Professional appearance and consistent UX |
59+
| 📦 **Production-Ready** | Best practices and clean architecture | Deploy with confidence to production |
60+
| 🎯 **Multi-Dimensional Analysis** | Rows, columns, values, and filter configuration | Flexible data exploration and pivoting |
61+
| 🌐 **Cross-Browser Support** | Works on all modern browsers | Universal compatibility and accessibility |
62+
63+
---
64+
65+
## 🛠 Technology Stack
66+
67+
| Component | Version | Purpose |
68+
|-----------|---------|---------|
69+
| **.NET** | 8.0+ | Runtime framework |
70+
| **Blazor WebAssembly** | 8.0 | Client-side framework |
71+
| **Syncfusion Blazor** | Latest | UI component library |
72+
| **C# 12** | Latest | Programming language |
73+
| **Razor Components** | 8.0 | UI markup language |
74+
75+
---
76+
77+
## 📋 Prerequisites
78+
79+
Ensure the following are installed on your development machine:
80+
81+
- **Visual Studio 2022** (17.0+) or **Visual Studio Code** with C# support
82+
- **.NET 8.0 SDK** or later ([Download](https://dotnet.microsoft.com/download/dotnet/8.0))
83+
- **Modern Web Browser** (Chrome, Firefox, Edge, Safari) with WebAssembly support
84+
- **Git** (optional, for version control)
85+
86+
### System Requirements
87+
88+
- ✅ Windows 10/11, macOS 10.15+, or Ubuntu 18.04+
89+
- ✅ 4GB RAM minimum (8GB recommended)
90+
- ✅ 500MB free disk space
91+
- ✅ Internet connection for NuGet package restoration
92+
93+
---
94+
95+
## 🚀 Quick Start Guide
96+
97+
### 1️⃣ Clone or Download the Repository
98+
99+
```bash
100+
git clone https://github.com/SyncfusionExamples/Customize-the-appearance-of-a-Blazor-Pivot-Table-Using-Templates-and-Conditional-Formatting
101+
cd Customize-the-appearance-of-a-Blazor-Pivot-Table-Using-Templates-and-Conditional-Formatting
102+
```
103+
104+
### 2️⃣ Open in Visual Studio 2022
105+
106+
1. Launch Visual Studio 2022
107+
2. Select **File → Open → Project/Solution**
108+
3. Navigate to `ConditionalFormatSample.sln`
109+
4. Wait for NuGet package restoration
110+
111+
### 3️⃣ Build the Solution
112+
113+
Using Visual Studio:
114+
- Press `Ctrl+Shift+B` or select **Build → Build Solution**
115+
116+
Using CLI:
117+
```bash
118+
dotnet build
119+
```
120+
121+
### 4️⃣ Run the Application
122+
123+
Using Visual Studio:
124+
- Press `F5` or click **Debug → Start Debugging**
125+
126+
Using CLI:
127+
```bash
128+
dotnet run --project ConditionalFormatSample
129+
```
130+
131+
### 5️⃣ Access the Application
132+
133+
Open your browser and navigate to:
134+
```
135+
https://localhost:7XXX
136+
```
137+
138+
The pivot table will load with:
139+
- Energy sector data visualization
140+
- Conditional formatting applied to power units and revenue
141+
- Interactive cell templates with custom styling
142+
143+
---
144+
145+
## 🗂 Project Structure
146+
147+
```
148+
ConditionalFormatSample/
149+
├── ConditionalFormatSample.sln # Solution file
150+
├── README.md # Documentation
151+
│
152+
├── ConditionalFormatSample/ # Server project
153+
│ ├── Program.cs # Application startup
154+
│ ├── appsettings.json # Configuration
155+
│ ├── Components/
156+
│ │ ├── App.razor # Root component
157+
│ │ ├── Routes.razor # Routing configuration
158+
│ │ └── Layout/
159+
│ │ └── MainLayout.razor # Master layout
160+
│ └── wwwroot/
161+
│ └── bootstrap/ # CSS frameworks
162+
│
163+
└── ConditionalFormatSample.Client/ # WebAssembly client
164+
├── Program.cs # Client startup
165+
├── _Imports.razor # Global imports
166+
├── Data/
167+
│ └── EnergyDetails.cs # Data model & sample data
168+
└── Pages/
169+
└── Counter.razor # Sample component
170+
```
171+
172+
### Key Files
173+
174+
- **`EnergyDetails.cs`** — Data model containing energy sector metrics
175+
- **`Program.cs`** — Blazor WebAssembly initialization and Syncfusion service registration
176+
- **`App.razor`** — Root Blazor component with routing configuration
177+
178+
---
179+
180+
## 💡 Core Concepts
181+
182+
### Cell Templates
183+
184+
Cell templates allow you to render custom HTML in pivot table cells:
185+
186+
```csharp
187+
<CellTemplate>
188+
@{
189+
var data = context as EnergyDetails;
190+
if (data != null)
191+
{
192+
<div style="background-color: #f0f0f0; padding: 5px;">
193+
<strong>@data.Revenue</strong>
194+
</div>
195+
}
196+
}
197+
</CellTemplate>
198+
```
199+
200+
### Conditional Formatting Rules
201+
202+
Apply dynamic formatting based on data values:
203+
204+
```csharp
205+
<ConditionalFormatSettings>
206+
<ConditionalFormatRules>
207+
<ConditionalFormatRule
208+
Measure="Revenue"
209+
Condition="GreaterThan"
210+
Value1="100"
211+
Style="HighValue" />
212+
</ConditionalFormatRules>
213+
</ConditionalFormatSettings>
214+
```
215+
216+
### Programmatic Styling
217+
218+
Use C# logic to dynamically apply formatting:
219+
220+
```csharp
221+
private string GetCellStyle(double value)
222+
{
223+
if (value > 150) return "background-color: green; color: white;";
224+
if (value > 100) return "background-color: yellow; color: black;";
225+
return "background-color: red; color: white;";
226+
}
227+
```
228+
229+
---
230+
231+
## 🎨 Usage Examples
232+
233+
### Example 1: Basic Pivot Table with Templates
234+
235+
```razor
236+
@using Syncfusion.Blazor.PivotView
237+
@using ConditionalFormatSample
238+
239+
<SfPivotView TValue="EnergyDetails"
240+
Height="600px"
241+
Width="100%">
242+
<PivotViewDataSourceSettings TValue="EnergyDetails"
243+
ExpandAll="false">
244+
<PivotViewRows>
245+
<PivotViewRow Name="Sector"></PivotViewRow>
246+
</PivotViewRows>
247+
<PivotViewColumns>
248+
<PivotViewColumn Name="EnergyType"></PivotViewColumn>
249+
</PivotViewColumns>
250+
<PivotViewValues>
251+
<PivotViewValue Name="PowerUnits" Type="SummaryTypes.Sum"></PivotViewValue>
252+
<PivotViewValue Name="Revenue" Type="SummaryTypes.Sum"></PivotViewValue>
253+
</PivotViewValues>
254+
</PivotViewDataSourceSettings>
255+
</SfPivotView>
256+
```
257+
258+
### Example 2: Adding Conditional Formatting
259+
260+
```razor
261+
<SfPivotView TValue="EnergyDetails" Height="600px">
262+
<!-- Data source configuration -->
263+
264+
<ConditionalFormatSettings>
265+
<ConditionalFormatRules>
266+
<ConditionalFormatRule
267+
Measure="Revenue"
268+
Condition="GreaterThan"
269+
Value1="150"
270+
BackgroundColor="#00FF00"
271+
FontColor="#000000" />
272+
<ConditionalFormatRule
273+
Measure="Revenue"
274+
Condition="LessThan"
275+
Value1="50"
276+
BackgroundColor="#FF0000"
277+
FontColor="#FFFFFF" />
278+
</ConditionalFormatRules>
279+
</ConditionalFormatSettings>
280+
</SfPivotView>
281+
```
282+
283+
---
284+
285+
## ⚙️ Configuration & Customization
286+
287+
### Enabling Syncfusion License
288+
289+
Register Syncfusion license in `Program.cs`:
290+
291+
```csharp
292+
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
293+
```
294+
295+
### Adding Custom Data Source
296+
297+
Replace sample data by modifying `EnergyDetails.cs`:
298+
299+
```csharp
300+
public static List<EnergyDetails> GetCustomData()
301+
{
302+
return new List<EnergyDetails>
303+
{
304+
new EnergyDetails
305+
{
306+
Sector = "Custom Sector",
307+
PowerUnits = 100,
308+
Revenue = 150
309+
}
310+
};
311+
}
312+
```
313+
314+
### Customizing Styles
315+
316+
Define custom CSS for formatting:
317+
318+
```css
319+
.high-value {
320+
background-color: #2ecc71;
321+
color: white;
322+
font-weight: bold;
323+
}
324+
325+
.low-value {
326+
background-color: #e74c3c;
327+
color: white;
328+
}
329+
```
330+
331+
---
332+
333+
## ❓ FAQ & Troubleshooting
334+
335+
**Q: Why is the pivot table not displaying?**
336+
A: Ensure Syncfusion services are registered in `Program.cs`:
337+
```csharp
338+
builder.Services.AddSyncfusionBlazor();
339+
```
340+
341+
**Q: How do I apply formatting to specific cells?**
342+
A: Use `ConditionalFormatRules` with appropriate `Measure`, `Condition`, and styling properties.
343+
344+
**Q: Can I use external data sources?**
345+
A: Yes, replace the `EnergyDetails` model with your own data model and populate from databases or APIs.
346+
347+
**Q: What's the performance impact of templates?**
348+
A: WebAssembly rendering is performant. For large datasets (10,000+ rows), consider virtual scrolling.
349+
350+
---
351+
352+
## 📖 Resources
353+
354+
- 🔗 **Syncfusion Blazor Pivot Table Docs**: https://blazor.syncfusion.com/documentation/pivot-table/
355+
- 🔗 **Official Demo**: https://blazor.syncfusion.com/demos/pivot-table/overview
356+
357+
---
358+
359+
## 🤝 Contributing
360+
361+
Contributions are welcome! To contribute:
362+
363+
1. Fork the repository
364+
2. Create a feature branch (`git checkout -b feature/my-feature`)
365+
3. Commit your changes (`git commit -am 'Add new feature'`)
366+
4. Push to the branch (`git push origin feature/my-feature`)
367+
5. Open a Pull Request
368+
369+
---
370+
371+
## 📄 License
372+
373+
This project is licensed under the **Syncfusion Community License**. See [Syncfusion License](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) for details.
374+
375+
---
376+
377+
## 🆘 Support
378+
379+
For assistance and inquiries:
380+
381+
- 📧 **Syncfusion Support**: https://www.syncfusion.com/support
382+
- 💬 **Community Forum**: https://www.syncfusion.com/forums
383+
- 🐛 **Report Issues**: https://github.com/SyncfusionExamples/customize-blazor-pivot-table/issues
384+
385+
---

0 commit comments

Comments
 (0)