$4.50
3
$13.50
$3.25
2
$6.50
$3.60
2
$7.20
$3.25
1
$3.25
$3.60
3
$10.80
$4.50
4
$18.00
$3.25
2
$6.50
$3.60
2
$7.20
$4.50
4
$18.00
$3.25
3
$9.75
$4.50
2
$9.00
$3.25
4
$13.00
$3.60
5
$18.00
$4.50
4
$18.00
$3.25
5
$16.25
$3.60
1
$3.60
$4.50
6
$27.00
$3.25
2
$6.50
$3.60
1
$3.60
$4.50
4
$18.00
$3.25
2
$6.50
$3.60
1
$3.60
$4.50
7
$31.50
$3.25
3
$9.75
$3.60
2
$7.20
$4.50
3
$13.50
$3.25
1
$3.25
$3.60
3
$10.80
$4.50
3
$13.50
$3.25
4
$13.00
$3.60
1
$3.60
$4.50
1
$4.50
$3.25
6
$19.50
$3.60
5
$18.00
$4.50
1
$4.50
$3.25
1
$3.25
$3.60
7
$25.20
Cheryl
Martin
Antoni
Sven
Petra
Nancy
Yoshi
Michael
Guylene
Shelley
Lars
Elio
Regina
White Chocolate Mocha
Sum
Count
Average
Espresso con Panna
Sum
Count
Average
Caffe Latte
Sum
Count
Average

Description

This is an example of Pivot Grid with custom style of the grid cells depending on their current value. You can change the rendering of any cell, row or column and insert your own HTML content by implementing the itemsRenderer and cellsRenderer functions. In this case, the custom code simply chooses among five predefined colors and sets the backgroundColor property of the cell content. This color customization is applied only to the cells with 'Sum' aggregation function. You can change the code of the itemsRender and cellsRenderer functions and implement your own customization logic using standard HTML and CSS.