Example of Cell Data Binding in React Spreadsheet Component

/
/
CellDataBinding

This sample illustrates a monthly budget for a home using planned versus actual costs with cell data binding feature.

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
CategoryPlanned costActual costDifference
Food$7,000.00$8,120.00-$1,120.00
Loan$1,500.00$1,500.00$0.00
Medical$300.00$0.00$300.00
Clothing$400.00$140.00$260.00
Education$900.00$750.00$150.00
Insurance$30.00$30.00$0.00
Utilities$130.00$160.00-$30.00
Enterainment$500.00$730.00-$230.00
Maintainance$50.00$70.00-$20.00
Transportation$250.00$400.00-$150.00
Gifts/Donations$0.00$100.00-$100.00
Total Difference:-$1,220.00
Description

The Spreadsheet component supports data binding for individual cells in a sheet. You can set value, styles and format to a cell using following properties:

  • index - Specify index for a cell.
  • value - Specify cell value.
  • style - Specify style for the cell.
  • format - Apply number formatting for the cell.

More information about cell data binding feature can be found in this documentation section.