Spreadsheet / Formatting / Conditional Formatting

Blazor Spreadsheet Example - Conditional Formatting

Loading Syncfusion Blazor Server Demos…

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
AA
AB
AC
AD
AE
AF
AG
AH
AI
AJ
AK
AL
AM
AN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
Inventory List
Item CodeItem NameQuantityPurchase PriceSelling PriceProfitLast UpdatedRating
AG940ZLaser Printer144$169.50$172.00$2.505/25/20194.5
BJ120KScientific Calculator116$21.80$23.00$1.207/28/20194
BC120MWired Keyboard438$26.80$29.00$2.203/30/20204.25
BS121LMemory Card486$23.50$25.00$1.508/20/20193.5
BU121KCoffee Maker176$56.50$59.00$2.502/2/20204.5
BD121MTable Lamp0$22.50$25.00$2.5011/11/20195
AT992XDocument Scanner116$175.00$177.00$2.004/13/20194.75
AP992ZGaming Headset58$32.00$35.00$3.002/14/20204.4
AW920XLaptop Bag232$18.90$19.00$0.106/10/20193.9
AQ920ZTable Fan405$33.90$35.00$1.105/28/20193.75
AE940XElectric Mop47$153.50$155.00$1.5012/18/20193.9
UI152CSmart LED TV232$201.25$204.00$2.753/13/20204.35
UD152VRobotic Vacuum Cleaner210$182.25$185.00$2.758/26/20194
BK120LGaming Mouse225$34.80$38.00$3.201/12/20204.2
UF162VChair373$104.80$108.00$3.204/12/20193.25
UR162CWelding Gloves216$19.00$21.00$2.0011/22/20193.85

This sample demonstrates the conditional formatting capabilities of Blazor Spreadsheet using a inventory dataset. It highlights how you can outline cells, group related data, and improve visual structure, making it easier to organize and present information clearly.

The Blazor Spreadsheet conditional formatting allows you to dynamically format cells based on their values, making it easier to analyze and visualize data patterns. To enable conditional formatting, set the AllowConditionalFormat property to true.

Key Conditional Formatting Options:

  • Highlight Cells Rules - Format cells based on conditions such as Greater Than, Less Than, Between, Equal To, Contains Text, A Date Occurring, and Duplicate Values.
  • Top/Bottom Rules - Highlight values such as Top 10 Items, Top 10%, Bottom 10 Items, Bottom 10%, Above Average, and Below Average.
  • Data Bars - Display data bars inside cells to visually compare numeric values.
  • Color Scales - Apply gradient colors to represent value distribution across a range.
  • Icon Sets - Use icons such as arrows, shapes, and indicators to represent value trends.

You can apply conditional formatting rules programmatically using the ConditionalFormatAsync method to add rules with specific formatting criteria. To remove existing rules, use the ClearConditionalFormatsAsync method, which can clear formatting from a specific range or the entire active worksheet.

In this demo, you can apply various conditional formatting rules to the product inventory dataset to enhance data visualization and analysis. Select cells and choose formatting rules from the Conditional Formatting dropdown in the ribbon to automatically format cells based on specific conditions, ensuring quick identification of trends and important values.

For more detailed information about conditional formatting, refer to the conditional formatting documentation.

Looking for the full Blazor Spreadsheet Editor component overview, features, pricing, and documentation? Visit the Blazor Spreadsheet Editor component page.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE