Number Format, JavaScript Programming Example of Number Format in SpreadSheet

Home
Examples
Number Format

JavaScript Programming Example of Number Format in SpreadSheet

See how you can customize the way numbers look. Check out a free coding sample below.

JS Code

webix.ready(function(){
  webix.ui({
    id:"ssheet",
    view:"spreadsheet",
    toolbar: "full",
    data: math_data_simple
  });

  $$("ssheet").setFormat(2,2,"[>1000]> 0.0;[>100]Check 0,000.0#;[=0]Nope");
  $$("ssheet").setFormat(2,3,"[>1000]> 0.0;[>100]Check 0,000.0#;[=0]Nope");
  $$("ssheet").setFormat(3,2,"[>1000][red];[>100][green]0.0;[blue] Small");
  $$("ssheet").refresh();
});

HTML Code

<script>
  var math_data_simple = {
  "styles": [    
	["top","#FFEFEF;#6E6EFF;center;'PT Sans', Tahoma;17px;"],						
	["subtop","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;bold;;;"],
	["count","#818181;#EAEAEA;center;'PT Sans', Tahoma;15px;;;;;;"],
	["calc-top","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"],
	["calc-other","#818181;#EAEAEA;;'PT Sans', Tahoma;15px;;;bold;;;"]
  ],  
  "data": [   
	[1, 1, "Countries:", "subtop"],
		[2, 1, "France", "count"],
		[3, 1, "Poland", "count"],
		[4, 1, "China", "count"],
	[1, 2, "April", "count"],
		[2, 2, 1366],
		[3, 2, 684],
		[4, 2, 8142],						
	[1, 3, "May", "count"],
		[2, 3, 842],
		[3, 3, 781],
		[4, 3, 7813],					
	[1, 4, "June", "count"],
		[2, 4, 903],
		[3, 4, 549],
		[4, 4, 7754],						
	[1, 5, "July", "count"],
		[2, 5, 806],
		[3, 5, 978],
		[4, 5, 8199],						
	[1, 6, "Total:", "calc-top"],
		[2, 6, "=SUM(B2:E2)"],
		[3, 6, "=SUM(B3:E3)"],
		[4, 6, "=SUM(B4:E4)"],	
	[1, 7, "Std Deviation:", "calc-top"],
		[2, 7, "=STDEVP(B2:E2)"],
		[3, 7, "=STDEVP(B3:E3)"],
		[4, 7, "=STDEVP(B4:E4)"]
  ],
  "sizes":[
	[0, 7, 130],						
	[0, 8, 200]
  ]
};
</script>

Would you like to be able to customize numbers in your spreadsheet effortlessly?

Download Webix UI Framework

Study SpreadSheet Documentation

Check out SpreadSheet Widget Features