NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Number Format, JavaScript Programming Example of Number Format in SpreadSheet

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",
    methods:"all",
    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?