HandsonTable Appearance

HandsonTable provides different types of formatting options like Conditional formatting, Customizing borders, Highlighting selection & Mobiles and tablets.

Conditional formatting

This demo shows how to use the cell type renderer feature to make some conditional formatting:

First row is read-only, and formatted in green bold text
All cells in the Nissan column are written in italic
Empty cells have silver background
Negative numbers are written in red

	Kia	Nissan	Toyota	Honda
2014	-5		12	13
2015		-11	14	13
2016		15	-12	readOnly

Customizing borders

To enable the custom borders feature, set the customBorders option. It could be set as true or initialized as an array with predefined setup.

To initialize Handson table with predefined custom borders, provide cells coordinates and border styles in form of an array:

with row/col pairs: {row: 2, col: 2, left: { /*...*/ }} or with range details: {range: {from: {row: 1, col: 1}, to:{row: 3, col: 4}}, left: { /*...*/ }}

	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T
32	A32	B32	C32	D32	E32	F32	G32	H32	I32	J32	K32	L32	M32	N32	O32	P32	Q32	R32	S32	T32
33	A33	B33	C33	D33	E33	F33	G33	H33	I33	J33	K33	L33	M33	N33	O33	P33	Q33	R33	S33	T33
34	A34	B34	C34	D34	E34	F34	G34	H34	I34	J34	K34	L34	M34	N34	O34	P34	Q34	R34	S34	T34
35	A35	B35	C35	D35	E35	F35	G35	H35	I35	J35	K35	L35	M35	N35	O35	P35	Q35	R35	S35	T35
36	A36	B36	C36	D36	E36	F36	G36	H36	I36	J36	K36	L36	M36	N36	O36	P36	Q36	R36	S36	T36
37	A37	B37	C37	D37	E37	F37	G37	H37	I37	J37	K37	L37	M37	N37	O37	P37	Q37	R37	S37	T37
38	A38	B38	C38	D38	E38	F38	G38	H38	I38	J38	K38	L38	M38	N38	O38	P38	Q38	R38	S38	T38
39	A39	B39	C39	D39	E39	F39	G39	H39	I39	J39	K39	L39	M39	N39	O39	P39	Q39	R39	S39	T39
40	A40	B40	C40	D40	E40	F40	G40	H40	I40	J40	K40	L40	M40	N40	O40	P40	Q40	R40	S40	T40
41	A41	B41	C41	D41	E41	F41	G41	H41	I41	J41	K41	L41	M41	N41	O41	P41	Q41	R41	S41	T41
42	A42	B42	C42	D42	E42	F42	G42	H42	I42	J42	K42	L42	M42	N42	O42	P42	Q42	R42	S42	T42
43	A43	B43	C43	D43	E43	F43	G43	H43	I43	J43	K43	L43	M43	N43	O43	P43	Q43	R43	S43	T43
44	A44	B44	C44	D44	E44	F44	G44	H44	I44	J44	K44	L44	M44	N44	O44	P44	Q44	R44	S44	T44
45	A45	B45	C45	D45	E45	F45	G45	H45	I45	J45	K45	L45	M45	N45	O45	P45	Q45	R45	S45	T45
46	A46	B46	C46	D46	E46	F46	G46	H46	I46	J46	K46	L46	M46	N46	O46	P46	Q46	R46	S46	T46
47	A47	B47	C47	D47	E47	F47	G47	H47	I47	J47	K47	L47	M47	N47	O47	P47	Q47	R47	S47	T47
48	A48	B48	C48	D48	E48	F48	G48	H48	I48	J48	K48	L48	M48	N48	O48	P48	Q48	R48	S48	T48
49	A49	B49	C49	D49	E49	F49	G49	H49	I49	J49	K49	L49	M49	N49	O49	P49	Q49	R49	S49	T49
50	A50	B50	C50	D50	E50	F50	G50	H50	I50	J50	K50	L50	M50	N50	O50	P50	Q50	R50	S50	T50
51	A51	B51	C51	D51	E51	F51	G51	H51	I51	J51	K51	L51	M51	N51	O51	P51	Q51	R51	S51	T51
52	A52	B52	C52	D52	E52	F52	G52	H52	I52	J52	K52	L52	M52	N52	O52	P52	Q52	R52	S52	T52
53	A53	B53	C53	D53	E53	F53	G53	H53	I53	J53	K53	L53	M53	N53	O53	P53	Q53	R53	S53	T53
54	A54	B54	C54	D54	E54	F54	G54	H54	I54	J54	K54	L54	M54	N54	O54	P54	Q54	R54	S54	T54
55	A55	B55	C55	D55	E55	F55	G55	H55	I55	J55	K55	L55	M55	N55	O55	P55	Q55	R55	S55	T55
56	A56	B56	C56	D56	E56	F56	G56	H56	I56	J56	K56	L56	M56	N56	O56	P56	Q56	R56	S56	T56
57	A57	B57	C57	D57	E57	F57	G57	H57	I57	J57	K57	L57	M57	N57	O57	P57	Q57	R57	S57	T57
58	A58	B58	C58	D58	E58	F58	G58	H58	I58	J58	K58	L58	M58	N58	O58	P58	Q58	R58	S58	T58
59	A59	B59	C59	D59	E59	F59	G59	H59	I59	J59	K59	L59	M59	N59	O59	P59	Q59	R59	S59	T59
60	A60	B60	C60	D60	E60	F60	G60	H60	I60	J60	K60	L60	M60	N60	O60	P60	Q60	R60	S60	T60
61	A61	B61	C61	D61	E61	F61	G61	H61	I61	J61	K61	L61	M61	N61	O61	P61	Q61	R61	S61	T61
62	A62	B62	C62	D62	E62	F62	G62	H62	I62	J62	K62	L62	M62	N62	O62	P62	Q62	R62	S62	T62
63	A63	B63	C63	D63	E63	F63	G63	H63	I63	J63	K63	L63	M63	N63	O63	P63	Q63	R63	S63	T63
64	A64	B64	C64	D64	E64	F64	G64	H64	I64	J64	K64	L64	M64	N64	O64	P64	Q64	R64	S64	T64
65	A65	B65	C65	D65	E65	F65	G65	H65	I65	J65	K65	L65	M65	N65	O65	P65	Q65	R65	S65	T65
66	A66	B66	C66	D66	E66	F66	G66	H66	I66	J66	K66	L66	M66	N66	O66	P66	Q66	R66	S66	T66
67	A67	B67	C67	D67	E67	F67	G67	H67	I67	J67	K67	L67	M67	N67	O67	P67	Q67	R67	S67	T67
68	A68	B68	C68	D68	E68	F68	G68	H68	I68	J68	K68	L68	M68	N68	O68	P68	Q68	R68	S68	T68
69	A69	B69	C69	D69	E69	F69	G69	H69	I69	J69	K69	L69	M69	N69	O69	P69	Q69	R69	S69	T69
70	A70	B70	C70	D70	E70	F70	G70	H70	I70	J70	K70	L70	M70	N70	O70	P70	Q70	R70	S70	T70

	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T
1	A1	B1	C1	D1	E1	F1	G1	H1	I1	J1	K1	L1	M1	N1	O1	P1	Q1	R1	S1	T1
2	A2	B2	C2	D2	E2	F2	G2	H2	I2	J2	K2	L2	M2	N2	O2	P2	Q2	R2	S2	T2

	A	B
32	A32	B32
33	A33	B33
34	A34	B34
35	A35	B35
36	A36	B36
37	A37	B37
38	A38	B38
39	A39	B39
40	A40	B40
41	A41	B41
42	A42	B42
43	A43	B43
44	A44	B44
45	A45	B45
46	A46	B46
47	A47	B47
48	A48	B48
49	A49	B49
50	A50	B50
51	A51	B51
52	A52	B52
53	A53	B53
54	A54	B54
55	A55	B55
56	A56	B56
57	A57	B57
58	A58	B58
59	A59	B59
60	A60	B60
61	A61	B61
62	A62	B62
63	A63	B63
64	A64	B64
65	A65	B65
66	A66	B66
67	A67	B67
68	A68	B68
69	A69	B69
70	A70	B70

	A	B
1	A1	B1
2	A2	B2

Highlighting selection

Use options currentRowClassName and currentColumnClassName

	A	B	C	D	E
1		Kia	Nissan	Toyota	Honda
2	2013	10	11	12	13
3	2014	20	11	14	13
4	2015	30	15	12	13
5

	A	B	C	D	E	F


1
2
3
4
5

Mobiles and tablets

Currently Handson table supports only iPad 4 in a basic scope. Mobile editor and selecting modes are enabled automatically if you're viewing Handson table on a mobile device.

Open this page on iPad 4 and play with the demo below:

	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z	AA	AB	AC	AD	AE	AF	AG	AH	AI
1	A1	B1	C1	D1	E1	F1	G1	H1	I1	J1	K1	L1	M1	N1	O1	P1	Q1	R1	S1	T1	U1	V1	W1	X1	Y1	Z1	AA1	AB1	AC1	AD1	AE1	AF1	AG1	AH1	AI1
2	A2	B2	C2	D2	E2	F2	G2	H2	I2	J2	K2	L2	M2	N2	O2	P2	Q2	R2	S2	T2	U2	V2	W2	X2	Y2	Z2	AA2	AB2	AC2	AD2	AE2	AF2	AG2	AH2	AI2
3	A3	B3	C3	D3	E3	F3	G3	H3	I3	J3	K3	L3	M3	N3	O3	P3	Q3	R3	S3	T3	U3	V3	W3	X3	Y3	Z3	AA3	AB3	AC3	AD3	AE3	AF3	AG3	AH3	AI3
4	A4	B4	C4	D4	E4	F4	G4	H4	I4	J4	K4	L4	M4	N4	O4	P4	Q4	R4	S4	T4	U4	V4	W4	X4	Y4	Z4	AA4	AB4	AC4	AD4	AE4	AF4	AG4	AH4	AI4
5	A5	B5	C5	D5	E5	F5	G5	H5	I5	J5	K5	L5	M5	N5	O5	P5	Q5	R5	S5	T5	U5	V5	W5	X5	Y5	Z5	AA5	AB5	AC5	AD5	AE5	AF5	AG5	AH5	AI5
6	A6	B6	C6	D6	E6	F6	G6	H6	I6	J6	K6	L6	M6	N6	O6	P6	Q6	R6	S6	T6	U6	V6	W6	X6	Y6	Z6	AA6	AB6	AC6	AD6	AE6	AF6	AG6	AH6	AI6
7	A7	B7	C7	D7	E7	F7	G7	H7	I7	J7	K7	L7	M7	N7	O7	P7	Q7	R7	S7	T7	U7	V7	W7	X7	Y7	Z7	AA7	AB7	AC7	AD7	AE7	AF7	AG7	AH7	AI7
8	A8	B8	C8	D8	E8	F8	G8	H8	I8	J8	K8	L8	M8	N8	O8	P8	Q8	R8	S8	T8	U8	V8	W8	X8	Y8	Z8	AA8	AB8	AC8	AD8	AE8	AF8	AG8	AH8	AI8
9	A9	B9	C9	D9	E9	F9	G9	H9	I9	J9	K9	L9	M9	N9	O9	P9	Q9	R9	S9	T9	U9	V9	W9	X9	Y9	Z9	AA9	AB9	AC9	AD9	AE9	AF9	AG9	AH9	AI9
10	A10	B10	C10	D10	E10	F10	G10	H10	I10	J10	K10	L10	M10	N10	O10	P10	Q10	R10	S10	T10	U10	V10	W10	X10	Y10	Z10	AA10	AB10	AC10	AD10	AE10	AF10	AG10	AH10	AI10
11	A11	B11	C11	D11	E11	F11	G11	H11	I11	J11	K11	L11	M11	N11	O11	P11	Q11	R11	S11	T11	U11	V11	W11	X11	Y11	Z11	AA11	AB11	AC11	AD11	AE11	AF11	AG11	AH11	AI11
12	A12	B12	C12	D12	E12	F12	G12	H12	I12	J12	K12	L12	M12	N12	O12	P12	Q12	R12	S12	T12	U12	V12	W12	X12	Y12	Z12	AA12	AB12	AC12	AD12	AE12	AF12	AG12	AH12	AI12
13	A13	B13	C13	D13	E13	F13	G13	H13	I13	J13	K13	L13	M13	N13	O13	P13	Q13	R13	S13	T13	U13	V13	W13	X13	Y13	Z13	AA13	AB13	AC13	AD13	AE13	AF13	AG13	AH13	AI13
14	A14	B14	C14	D14	E14	F14	G14	H14	I14	J14	K14	L14	M14	N14	O14	P14	Q14	R14	S14	T14	U14	V14	W14	X14	Y14	Z14	AA14	AB14	AC14	AD14	AE14	AF14	AG14	AH14	AI14
15	A15	B15	C15	D15	E15	F15	G15	H15	I15	J15	K15	L15	M15	N15	O15	P15	Q15	R15	S15	T15	U15	V15	W15	X15	Y15	Z15	AA15	AB15	AC15	AD15	AE15	AF15	AG15	AH15	AI15
16	A16	B16	C16	D16	E16	F16	G16	H16	I16	J16	K16	L16	M16	N16	O16	P16	Q16	R16	S16	T16	U16	V16	W16	X16	Y16	Z16	AA16	AB16	AC16	AD16	AE16	AF16	AG16	AH16	AI16
17	A17	B17	C17	D17	E17	F17	G17	H17	I17	J17	K17	L17	M17	N17	O17	P17	Q17	R17	S17	T17	U17	V17	W17	X17	Y17	Z17	AA17	AB17	AC17	AD17	AE17	AF17	AG17	AH17	AI17
18	A18	B18	C18	D18	E18	F18	G18	H18	I18	J18	K18	L18	M18	N18	O18	P18	Q18	R18	S18	T18	U18	V18	W18	X18	Y18	Z18	AA18	AB18	AC18	AD18	AE18	AF18	AG18	AH18	AI18
19	A19	B19	C19	D19	E19	F19	G19	H19	I19	J19	K19	L19	M19	N19	O19	P19	Q19	R19	S19	T19	U19	V19	W19	X19	Y19	Z19	AA19	AB19	AC19	AD19	AE19	AF19	AG19	AH19	AI19
20	A20	B20	C20	D20	E20	F20	G20	H20	I20	J20	K20	L20	M20	N20	O20	P20	Q20	R20	S20	T20	U20	V20	W20	X20	Y20	Z20	AA20	AB20	AC20	AD20	AE20	AF20	AG20	AH20	AI20
21	A21	B21	C21	D21	E21	F21	G21	H21	I21	J21	K21	L21	M21	N21	O21	P21	Q21	R21	S21	T21	U21	V21	W21	X21	Y21	Z21	AA21	AB21	AC21	AD21	AE21	AF21	AG21	AH21	AI21
22	A22	B22	C22	D22	E22	F22	G22	H22	I22	J22	K22	L22	M22	N22	O22	P22	Q22	R22	S22	T22	U22	V22	W22	X22	Y22	Z22	AA22	AB22	AC22	AD22	AE22	AF22	AG22	AH22	AI22
23	A23	B23	C23	D23	E23	F23	G23	H23	I23	J23	K23	L23	M23	N23	O23	P23	Q23	R23	S23	T23	U23	V23	W23	X23	Y23	Z23	AA23	AB23	AC23	AD23	AE23	AF23	AG23	AH23	AI23
24	A24	B24	C24	D24	E24	F24	G24	H24	I24	J24	K24	L24	M24	N24	O24	P24	Q24	R24	S24	T24	U24	V24	W24	X24	Y24	Z24	AA24	AB24	AC24	AD24	AE24	AF24	AG24	AH24	AI24
25	A25	B25	C25	D25	E25	F25	G25	H25	I25	J25	K25	L25	M25	N25	O25	P25	Q25	R25	S25	T25	U25	V25	W25	X25	Y25	Z25	AA25	AB25	AC25	AD25	AE25	AF25	AG25	AH25	AI25
26	A26	B26	C26	D26	E26	F26	G26	H26	I26	J26	K26	L26	M26	N26	O26	P26	Q26	R26	S26	T26	U26	V26	W26	X26	Y26	Z26	AA26	AB26	AC26	AD26	AE26	AF26	AG26	AH26	AI26
27	A27	B27	C27	D27	E27	F27	G27	H27	I27	J27	K27	L27	M27	N27	O27	P27	Q27	R27	S27	T27	U27	V27	W27	X27	Y27	Z27	AA27	AB27	AC27	AD27	AE27	AF27	AG27	AH27	AI27
28	A28	B28	C28	D28	E28	F28	G28	H28	I28	J28	K28	L28	M28	N28	O28	P28	Q28	R28	S28	T28	U28	V28	W28	X28	Y28	Z28	AA28	AB28	AC28	AD28	AE28	AF28	AG28	AH28	AI28
29	A29	B29	C29	D29	E29	F29	G29	H29	I29	J29	K29	L29	M29	N29	O29	P29	Q29	R29	S29	T29	U29	V29	W29	X29	Y29	Z29	AA29	AB29	AC29	AD29	AE29	AF29	AG29	AH29	AI29
30	A30	B30	C30	D30	E30	F30	G30	H30	I30	J30	K30	L30	M30	N30	O30	P30	Q30	R30	S30	T30	U30	V30	W30	X30	Y30	Z30	AA30	AB30	AC30	AD30	AE30	AF30	AG30	AH30	AI30
31	A31	B31	C31	D31	E31	F31	G31	H31	I31	J31	K31	L31	M31	N31	O31	P31	Q31	R31	S31	T31	U31	V31	W31	X31	Y31	Z31	AA31	AB31	AC31	AD31	AE31	AF31	AG31	AH31	AI31
32	A32	B32	C32	D32	E32	F32	G32	H32	I32	J32	K32	L32	M32	N32	O32	P32	Q32	R32	S32	T32	U32	V32	W32	X32	Y32	Z32	AA32	AB32	AC32	AD32	AE32	AF32	AG32	AH32	AI32
33	A33	B33	C33	D33	E33	F33	G33	H33	I33	J33	K33	L33	M33	N33	O33	P33	Q33	R33	S33	T33	U33	V33	W33	X33	Y33	Z33	AA33	AB33	AC33	AD33	AE33	AF33	AG33	AH33	AI33
34	A34	B34	C34	D34	E34	F34	G34	H34	I34	J34	K34	L34	M34	N34	O34	P34	Q34	R34	S34	T34	U34	V34	W34	X34	Y34	Z34	AA34	AB34	AC34	AD34	AE34	AF34	AG34	AH34	AI34
35	A35	B35	C35	D35	E35	F35	G35	H35	I35	J35	K35	L35	M35	N35	O35	P35	Q35	R35	S35	T35	U35	V35	W35	X35	Y35	Z35	AA35	AB35	AC35	AD35	AE35	AF35	AG35	AH35	AI35
36	A36	B36	C36	D36	E36	F36	G36	H36	I36	J36	K36	L36	M36	N36	O36	P36	Q36	R36	S36	T36	U36	V36	W36	X36	Y36	Z36	AA36	AB36	AC36	AD36	AE36	AF36	AG36	AH36	AI36
37	A37	B37	C37	D37	E37	F37	G37	H37	I37	J37	K37	L37	M37	N37	O37	P37	Q37	R37	S37	T37	U37	V37	W37	X37	Y37	Z37	AA37	AB37	AC37	AD37	AE37	AF37	AG37	AH37	AI37
38	A38	B38	C38	D38	E38	F38	G38	H38	I38	J38	K38	L38	M38	N38	O38	P38	Q38	R38	S38	T38	U38	V38	W38	X38	Y38	Z38	AA38	AB38	AC38	AD38	AE38	AF38	AG38	AH38	AI38
39	A39	B39	C39	D39	E39	F39	G39	H39	I39	J39	K39	L39	M39	N39	O39	P39	Q39	R39	S39	T39	U39	V39	W39	X39	Y39	Z39	AA39	AB39	AC39	AD39	AE39	AF39	AG39	AH39	AI39
40	A40	B40	C40	D40	E40	F40	G40	H40	I40	J40	K40	L40	M40	N40	O40	P40	Q40	R40	S40	T40	U40	V40	W40	X40	Y40	Z40	AA40	AB40	AC40	AD40	AE40	AF40	AG40	AH40	AI40
41	A41	B41	C41	D41	E41	F41	G41	H41	I41	J41	K41	L41	M41	N41	O41	P41	Q41	R41	S41	T41	U41	V41	W41	X41	Y41	Z41	AA41	AB41	AC41	AD41	AE41	AF41	AG41	AH41	AI41
42	A42	B42	C42	D42	E42	F42	G42	H42	I42	J42	K42	L42	M42	N42	O42	P42	Q42	R42	S42	T42	U42	V42	W42	X42	Y42	Z42	AA42	AB42	AC42	AD42	AE42	AF42	AG42	AH42	AI42

	A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z	AA	AB	AC	AD	AE	AF	AG	AH	AI
1	A1	B1	C1	D1	E1	F1	G1	H1	I1	J1	K1	L1	M1	N1	O1	P1	Q1	R1	S1	T1	U1	V1	W1	X1	Y1	Z1	AA1	AB1	AC1	AD1	AE1	AF1	AG1	AH1	AI1
2	A2	B2	C2	D2	E2	F2	G2	H2	I2	J2	K2	L2	M2	N2	O2	P2	Q2	R2	S2	T2	U2	V2	W2	X2	Y2	Z2	AA2	AB2	AC2	AD2	AE2	AF2	AG2	AH2	AI2

	A	B
1	A1	B1
2	A2	B2
3	A3	B3
4	A4	B4
5	A5	B5
6	A6	B6
7	A7	B7
8	A8	B8
9	A9	B9
10	A10	B10
11	A11	B11
12	A12	B12
13	A13	B13
14	A14	B14
15	A15	B15
16	A16	B16
17	A17	B17
18	A18	B18
19	A19	B19
20	A20	B20
21	A21	B21
22	A22	B22
23	A23	B23
24	A24	B24
25	A25	B25
26	A26	B26
27	A27	B27
28	A28	B28
29	A29	B29
30	A30	B30
31	A31	B31
32	A32	B32
33	A33	B33
34	A34	B34
35	A35	B35
36	A36	B36
37	A37	B37
38	A38	B38
39	A39	B39
40	A40	B40
41	A41	B41
42	A42	B42

	A	B
1	A1	B1
2	A2	B2