Limitless - Responsive Web Application Kit by Eugene Kopyov-后台管理系统模板

Fixed columns and rows

The following example demonstrates how to make certain columns and rows fixed when scrolling is enabled. To enable this functionality, specify amount of fixed rows with fixedRowsTop and amount of fixed columns with fixedColumnsLeft options. Note: You'll need horizontal scrollbars, so just set a container width and overflow: auto in CSS or simply add pre-defined has-scroll class to the parent container.

	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

	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

	A	B
1	A1	B1
2	A2	B2

Scrolling enabled

The following example demonstrates vertical and horizontal scrolling of the table. If you want scrollbars, just set container width, height and overflow: auto in CSS. Or simply add has-scroll class to the parent container. This demo shows table of 250 rows and columns. Only visible part is rendered. Native div scrollbar is used to scroll through the table.

	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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

	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


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

Columns freezing

In order to manually freeze a column (in another words - make it fixed), you need to set the manualColumnFreeze config item to true in Handsontable initialization. When the Manual Column Freeze plugin is enabled, you can freeze any non-fixed column and unfreeze any fixed column in your Handsontable instance using the Context Menu. Note: to properly use this plugin, you need to have the Context Menu plugin enabled.

	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

	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

	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

	A	B

Columns moving

The following example demonstrates an ability to move rows and columns, some kind of drag sorting. To enable these features, use settings manualColumnMove: true and manualRowMove: true. The draggable move handle appears: in the right part of the column header; in the top part of the row header. Handler styling can be customized in less files.

	Brand	Model	Year	Color	Price
1	Mercedes	GL500	2009	blue	32500
2	Chevrolet	Camaro	2012	red	42400
3	Dodge	Charger	2011	white	24900
4	Hummer	H3	2014	black	54000
5	Chevrolet	Tahoe	2009	purple	29300
6	Toyota	Land Cruiser	2007	lime	54500
7	Nissan	GTR	2009	cyan	44900
8	Porsche	Cayenne	2012	yellow	35000
9	Volkswagen	Touareg	2010	crimson	41000
10	BMW	X5	2010	orange	48800
11	Audi	Q7	2009	green	21000
12	Cadillac	Escalade	2012	silver	63900

	Brand	Model	Year	Color	Price


1
2
3
4
5
6
7
8
9
10
11
12

Column stretching

The following example demonstrates how columns can be stretched using stretchH option. Possible mode values are: none - default value, disables stretching, column width depends on the content width; last - stretch only the last column; all - stretch all the columns evenly. Example below uses stretchH: 'last' to stretch only last column.

	Brand	Model	Year	Color	Price
1	Mercedes	GL500	2009	blue	32500
2	Chevrolet	Camaro	2012	red	42400
3	Dodge	Charger	2011	white	24900
4	Hummer	H3	2014	black	54000
5	Chevrolet	Tahoe	2009	purple	29300
6	Toyota	Land Cruiser	2007	lime	54500
7	Nissan	GTR	2009	cyan	44900
8	Porsche	Cayenne	2012	yellow	35000
9	Volkswagen	Touareg	2010	crimson	41000
10	BMW	X5	2010	orange	48800
11	Audi	Q7	2009	green	21000
12	Cadillac	Escalade	2012	silver	63900

	Brand	Model	Year	Color	Price


1
2
3
4
5
6
7
8
9
10
11
12

Resizable rows and columns

The following example demonstrates manual row and column resizing feature using manualRowResize and manualColumnResize options. Can be either set to a boolean or define initial column and row resized widths. In addition, columns width and row heights have custom values defined in an arrays of numbers added to colWidths and rowHeights options.

	Brand	Model	Year	Color	Price
1	Mercedes	GL500	2009	blue	32500
2	Chevrolet	Camaro	2012	red	42400
3	Dodge	Charger	2011	white	24900
4	Hummer	H3	2014	black	54000
5	Chevrolet	Tahoe	2009	purple	29300
6	Toyota	Land Cruiser	2007	lime	54500
7	Nissan	GTR	2009	cyan	44900
8	Porsche	Cayenne	2012	yellow	35000
9	Volkswagen	Touareg	2010	crimson	41000
10	BMW	X5	2010	orange	48800
11	Audi	Q7	2009	green	21000
12	Cadillac	Escalade	2012	silver	63900

	Brand	Model	Year	Color	Price


1
2
3
4
5
6
7
8
9
10
11
12

	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

	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

	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

	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

Back to parent

Back to parent

Back to parent

Back to parent

Back to parent

Back to parent

Back to parent

Back to parent

Handsontable - Columns

Fixed columns and rows

Scrolling enabled

Columns freezing

Columns moving

Column stretching

Resizable rows and columns

	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

	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