Example of Number Formatting in React Spreadsheet Component

/
/
NumberFormatting

This sample demonstrates number formatting feature with a restaurant invoice.

More Details...

ABCDEFGHIJKLMNOPQRSTUVWXYZAAABACADAEAFAGAHAIAJAKALAMANAOAPAQARASATAUAVAWAXAY
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
Customer NameCristi EspinosWaiter NameRaye Whines
Table No.8Date5/7/2019
Item CodeItem NameQuantityRateAmount
I231Chinese Combo Noodle2$125.00$250.00
I245Chinese Combo Rice3$125.00$375.00
I237Amritsari Chola2$225.00$450.00
I291Asian Mixed Entree Platt3$165.00$495.00
I268Chinese Combo Chicken3$125.00$375.00
I251Chivas Regal1$325.00$325.00
I256Chicken Drumsticks2$180.00$360.00
I232Manchow Soup2$160.00$320.00
I290Schezuan Chicken3$180.00$540.00
I229Manchow Soup2$125.00$250.00
I239Jw Black Lable2$175.00$350.00
Subtotal:$4,090.00
Discount (8%):$327.20
Total Amount:$3,762.80
Description

In this demo, number formatting is applied to specific cells by using the format property, and a range of cells by using the numberFormat method.

In the Amount column, we have used Custom number formatting to highlight the values less than 350 and greater than 350 with red and blue colors respectively.

More information about number formatting can be found in this documentation section.