numericFormat not working when using renderer property

Tags: #<Tag:0x00007f8b2a110668>
#1

Hi,

This is very weird, when I set renderer of columns property then numericFormat not working. This is code:

<div id="table"></div>

<script>
	
	var itemData = {"id":"0x17F","name":"Fuel MAP VS RPM","size":16,"type":"TABLE","address":"0xA2","is_signed":false,"row_label":{"id":"0x29FA","units":"RPM","source_type":3},"cell_units":"Fuel","column_label":{"id":"0x2094","units":"TPS","source_type":3},"is_lsb_first":true,"row_data_type":6,"row_unit_type":4,"cell_value_max":10000,"cell_value_min":0,"number_of_rows":29,"number_of_cells":1,"column_data_type":57,"column_unit_type":67,"is_floating_point":false,"number_of_columns":29,"use_max_cell_value":true,"use_min_cell_value":true,"major_stride_in_bytes":0,"minor_stride_in_bytes":0,"cell_value_output_type":1,"cell_conversion_formulas":[[{"vars":["X"],"formula":"X"}]],"is_column_as_major_order":false,"cell_value_number_of_decimal_place":0};
	var columnHeaderRenderer = function (instance, td, row, col, prop, value, cellProperties) {
		Handsontable.renderers.TextRenderer.apply(this, arguments);

		td.style.background = '#CCC';
	};
	var cell_type = {
		type: 'numeric',
		allowEmpty: false,
		allowInvalid: false,
		className: 'htCenter htMiddle',
		numericFormat: {
			pattern: '0.00',
			culture: 'en-US'
		},
		renderer: columnHeaderRenderer
	};
	var columns = [];
	for (var c = 0; c < itemData.number_of_columns; c++) {
		columns.push(cell_type);
	}
	var tableElement = document.querySelector('#table');
	var tableElementContainer = tableElement.parentNode;
	var tableSettings = {
		data: [[1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1923,2021,2135,2227,2373,2484,2665,2836,3141,3423,4580,5978],[1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1923,2021,2135,2227,2373,2484,2665,2836,3141,3423,4580,5978],[1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1822,1923,2021,2135,2221,2373,2484,2665,2836,3141,3423,4580,5978],[1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1780,1883,1982,2090,2211,2320,2433,2555,2748,2953,3375,3702,4733,5978],[1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1716,1807,1891,2006,2149,2266,2385,2507,2631,2835,3027,3361,3720,4733,5957],[1661,1661,1661,1661,1661,1661,1661,1661,1661,1661,1661,1661,1661,1661,1732,1824,1921,2058,2188,2318,2425,2556,2665,2868,3031,3365,3733,4760,6000],[1608,1608,1608,1608,1608,1608,1608,1608,1608,1608,1608,1608,1608,1672,1756,1851,1946,2075,2195,2322,2432,2559,2667,2862,3028,3357,3636,4767,6133],[1556,1556,1556,1556,1556,1556,1556,1556,1556,1556,1556,1556,1556,1682,1780,1878,1971,2092,2202,2326,2439,2562,2669,2856,3025,3349,3581,4843,6367],[1443,1443,1443,1443,1443,1443,1443,1443,1443,1443,1443,1443,1577,1754,1829,1931,2020,2127,2218,2334,2452,2568,2674,2844,3019,3334,3710,5126,6835],[1346,1346,1346,1346,1346,1346,1346,1346,1346,1436,1468,1510,1653,1830,1911,2018,2113,2223,2322,2437,2554,2667,2772,2942,3111,3433,3918,5314,6999],[1257,1257,1257,1257,1257,1257,1257,1257,1260,1408,1493,1593,1743,1927,2070,2148,2206,2319,2426,2540,2656,2766,2870,3040,3203,3532,4126,5622,7428],[1148,1148,1148,1148,1148,1148,1148,1148,1236,1422,1518,1644,1843,1983,2075,2192,2299,2415,2530,2643,2758,2865,2968,3138,3295,3631,4153,5737,7650],[1047,1047,1047,1047,1047,1047,1047,1047,1291,1414,1543,1733,1879,2060,2157,2281,2393,2510,2633,2745,2860,2965,3065,3236,3388,3729,4180,5770,7691],[957,957,957,957,957,957,957,1139,1324,1444,1631,1807,1901,2076,2175,2294,2401,2512,2628,2742,2851,2957,3051,3213,3360,3693,4066,5676,7620],[890,890,890,890,890,890,1032,1194,1357,1474,1609,1763,1924,2092,2192,2307,2409,2514,2624,2739,2843,2949,3037,3190,3332,3657,3952,5601,7592],[844,844,844,844,844,975,1111,1247,1424,1534,1677,1816,1969,2123,2227,2332,2426,2519,2615,2732,2826,2933,3007,3145,3277,3584,3922,5469,7337],[808,808,808,808,913,1012,1143,1286,1465,1574,1708,1845,1994,2150,2248,2352,2442,2538,2632,2740,2835,2941,3018,3150,3280,3594,3892,5557,7568],[763,763,763,763,922,1049,1176,1326,1507,1614,1738,1873,2019,2178,2269,2372,2458,2557,2649,2783,2844,2949,3028,3156,3284,3603,3942,5689,7799],[708,708,708,802,913,1048,1182,1346,1532,1641,1769,1905,2060,2212,2302,2408,2497,2596,2693,2796,2891,2988,3073,3205,3330,3673,3993,5908,8220],[681,681,681,802,904,1064,1188,1366,1557,1668,1800,1938,2101,2247,2334,2444,2536,2636,2738,2844,2938,3027,3117,3254,3376,3744,4142,6180,8640],[656,686,686,787,926,1043,1197,1375,1564,1678,1808,1950,2104,2279,2349,2448,2544,2637,2737,2840,2931,3017,3104,3249,3390,3777,4292,6343,8820],[617,657,692,773,910,1039,1207,1383,1570,1688,1815,1962,2106,2249,2364,2452,2552,2639,2737,2835,2923,3008,3091,3244,3403,3810,4330,6445,9000],[570,622,665,779,912,1051,1225,1405,1588,1697,1828,1976,2145,2298,2406,2495,2595,2673,2776,2872,2954,3039,3119,3262,3421,3814,4369,6489,9050],[540,601,639,795,914,1063,1244,1428,1606,1705,1840,1990,2183,2347,2449,2538,2638,2708,2816,2909,2984,3070,3147,3280,3438,3818,4368,6515,9108],[514,582,639,773,915,1066,1229,1415,1614,1725,1865,2012,2194,2357,2463,2527,2605,2698,2798,2900,2977,3067,3136,3263,3426,3841,4366,6380,8813],[487,558,605,760,916,1069,1215,1402,1661,1745,1890,2034,2204,2368,2477,2515,2573,2688,2781,2890,2970,3065,3124,3246,3415,3864,4284,6202,8519],[453,529,606,759,884,1053,1219,1404,1622,1715,1831,1940,2059,2199,2283,2358,2448,2524,2610,2691,2761,2852,2926,3061,3246,3745,4219,6017,8189],[437,518,600,763,883,1000,1126,1261,1439,1546,1653,1782,1913,2040,2109,2193,2254,2340,2428,2535,2597,2694,2780,2926,3081,3500,3987,5800,7990],[436,517,599,763,883,1000,1126,1261,1439,1546,1653,1782,1913,2040,2109,2193,2254,2340,2428,2535,2597,2694,2780,2915,3053,3483,3987,5631,7617]],
		columns: columns,
		stretchH: 'none',
		autoColumnSize: true,
		width: '100%',
		autoWrapRow: true,
		height: 300,
		rowHeights: 23,
//		rowHeaders: ["800","1000","1200","1400","1500","1600","1700","1800","2000","2250","2500","2750","3000","3250","3500","4000","4500","5000","5500","6000","6500","7000","7500","8000","8500","9000","9500","10000","10400"],
//		colHeaders: ["0.0","0.5","1.1","1.6","2.7","4.2","5.5","6.9","8.2","9.7","11.0","12.4","13.7","16.6","19.2","22.1","24.8","27.6","34.5","41.3","48.2","55.2","62.0","68.9","75.8","82.6","89.6","96.5","100.0"],
		nestedHeaders: [
			[
				{
					label: itemData.column_label.units,
					colspan: itemData.number_of_columns
				}
			],
			["0.0","0.5","1.1","1.6","2.7","4.2","5.5","6.9","8.2","9.7","11.0","12.4","13.7","16.6","19.2","22.1","24.8","27.6","34.5","41.3","48.2","55.2","62.0","68.9","75.8","82.6","89.6","96.5","100.0"],
		],
		manualRowMove: false,
		manualColumnMove: false,
		contextMenu: false,
		minSpareRows: 0,
		minSpareCols: 0,
		dropdownMenu: false, // ada menu tambahan di header
		filters: true, // ada filter (aktif jika menu dripdownmenu = true)
		licenseKey: 'non-commercial-and-evaluation'
		
	};
	var table = new Handsontable(tableElement, tableSettings);
</script>
#2

Hey @tongam.tampubolon

you add type: 'numeric', to the column, but also set up a renderer with

Handsontable.renderers.TextRenderer.apply(this, arguments);

try to change it to

Handsontable.renderers.NumericRenderer.apply(this, arguments);

1 Like
#3

Thank you for your help, I think handsontable make it automatic by default, it will be good.

#4

Handsontable sets automatic renderer, editor, and validator if a cell type is defined. if someone wants to do something more complex they need to drop cell type and use/create their structures of automatic renderer, editor, and validator.

#5