StickySort, a jQuery plugin for tables with sticky headers, columns and sortable feature

Introduction

StickySort is a jQuery plugin that creates sticky headers and columns on your tables, complete with the possibility to add a sortable functionality. This plugin was inspired by a recent task at work where I have to create sticky headers to allow users to orient themselves in large tables that, at many instances, fill the full height of the viewport. Made by Terry.

For installation and usage, please refer to the readme file on the GitHub project page.

Basic Usage

Here is a basic table, populated with data provided by Random User Generator (v0.2). Setting up is easy-peasy:

$('table').stickySort();

Avatar	Name	Email	Contact	Location
Avatar	Name	Email	Contact	Location
	samantha morgan	samantha.morgan56@example.com	(369)-227-3751	grapevine, idaho
	eli wilson	eli.wilson12@example.com	(857)-619-4186	bozeman, new york
	brian brown	brian.brown96@example.com	(924)-543-6342	allen, washington
	kathy wilson	kathy.wilson59@example.com	(786)-203-4153	ennis, connecticut
	christine ramirez	christine.ramirez72@example.com	(778)-129-1925	provo, delaware
	charles lee	charles.lee19@example.com	(425)-976-3550	akron, virginia
	arthur bennett	arthur.bennett10@example.com	(996)-182-3744	wilmington, michigan
	aalivah simmmons	aalivah.simmmons64@example.com	(687)-147-6639	duncanville, tennessee
	brian russell	brian.russell22@example.com	(600)-224-4416	everett, colorado
	dylan russell	dylan.russell32@example.com	(439)-363-4363	billings, wisconsin
	candice lewis	candice.lewis76@example.com	(733)-701-4550	utica, nebraska
	kaylee cox	kaylee.cox32@example.com	(459)-899-9689	rochmond, california
	erin miller	erin.miller82@example.com	(570)-814-6244	rochester, indiana
	madison brooks	madison.brooks63@example.com	(855)-789-4736	richardson, delaware
	jennifer evans	jennifer.evans72@example.com	(214)-201-9140	akron, rhode island
	rebecca hughes	rebecca.hughes42@example.com	(736)-650-7095	greensboro, north carolina
	samuel taylor	samuel.taylor13@example.com	(241)-121-6322	dumas, north dakota
	joseph walker	joseph.walker51@example.com	(736)-940-6308	bueblo, utah
	ethan anderson	ethan.anderson65@example.com	(820)-571-9435	grapevine, iowa
	angel barnes	angel.barnes96@example.com	(773)-363-7896	belen, vermont

Sortable basic table

Here is a basic table with sort function, populated with data provided by Random User Generator (v0.2). Setting up is easy-peasy:

$('table').stickySort({ sortable: true });

Also, if you are on a narrow monitor, see how the sticky header plays friendly with overflows along the y-axis:

First Name	Last Name	Email	MD5 hash	SHA1 hash
First Name	Last Name	Email	MD5 hash	SHA1 hash
albert	garcia	albert.garcia37@example.com	9a26de5ea2dbe7fc5b6844128f307c38	68a90898cfc09508ed08aacf24482effe7f8f7c8
alexa	wallace	alexa.wallace18@example.com	a3c4b614a1f072e0f968c2712a36323f	adfc8f0aec273eace2629141317c1eac53923f28
jack	cox	jack.cox73@example.com	28e246ff038060bc335c0bf4925e5d51	8ad9a53bdd3b96cbc28efde629383954666ece67
meghan	taylor	meghan.taylor36@example.com	573ce5969e9884d49d4fab77b09a306a	9621a244a447ec749598f8327560ff86095e2c26
amy	collins	amy.collins45@example.com	f61f2f8157d9d632cc0b2bbc43d883f2	be842d987424dcb128bee9520682687bc2149284
nicole	lewis	nicole.lewis62@example.com	e50081b0de0be206cd443d20094d3894	11615c74a29cc915c0802ae001d43b4cd96ced62
richard	graham	richard.graham65@example.com	03764ebfde7010aa700c6e73f84ed00e	9286fa940279aa33e8e47ca7dd175324f333e4fa
brayden	hill	brayden.hill28@example.com	a03490c03eaa102dadc25dca3cc6772b	6a53d618b92dcc6f23461cd323f993b210876602
amelia	wallace	amelia.wallace92@example.com	7b6b45249743ad383e7f2e1fafd640fa	4003345f140d1f3af49b180ecdc8406755e3b472
melissa	scott	melissa.scott68@example.com	5be977ac2dc6c7c07f8825de5f3c9926	34da1369d029a253a7586a8b582100180bba6441
elijah	hall	elijah.hall29@example.com	21d9c57c1d2ae58cf12ece8a3470666b	a2916e062071972d7da46f818b685642b3cffcac
arianna	moore	arianna.moore76@example.com	900e201a6aa7b0b1ce8218782d6142b6	c9d8f39e46aed665fa734cf1ca18b2f99cf6805f
nevaeh	griffin	nevaeh.griffin53@example.com	2e036ecb177e0f732bcbc1b0984ffebd	044507c8314178f51f47bf2fd6e666a4139b6eef
sarah	smith	sarah.smith62@example.com	de1b2a7baf7850243db71c4abd4e5a39	148627088915c721ccebb4c611b859031037e6ad
edward	wilson	edward.wilson63@example.com	6673166b500d058c743b79c746c59243	2e8ae6ca8708f518d69cd1475017303ca0ae0080

Biaxial Headers

We are allowed to have some fun, aren't we? Now we can try having biaxial tables. Remember that the markup for biaxial table has to be as follow, where each row in <tbody> has to have the first cell as <th> instead of <td>:

<table>
    <thead>
        <tr>
            <th></th>
            <!-- add more <th> as of when needed -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <th></th><!-- first cell must ne <th> -->
            <td></td><!-- other cells are <td> -->
            <!-- add more <td> as of when needed -->
        </tr>
        <!-- add more rows as of when needed -->
    </tbody>
</table>

Name	Email	Work	Mobile
Name	Email	Work	Mobile
sophie flores	sophie.flores96@example.com	(788)-499-9689	(915)-162-6803
madison hill	madison.hill26@example.com	(523)-950-9768	(869)-333-9842
jack foster	jack.foster43@example.com	(533)-613-4005	(253)-508-1724
carl ward	carl.ward71@example.com	(280)-130-9702	(429)-838-3276
olivia bell	olivia.bell98@example.com	(589)-449-4963	(685)-204-8461
allison griffin	allison.griffin45@example.com	(498)-153-4556	(681)-786-9927
stephen smith	stephen.smith44@example.com	(687)-245-2715	(209)-445-9081
hannah wallace	hannah.wallace56@example.com	(784)-731-8424	(922)-401-6114
evelyn carter	evelyn.carter72@example.com	(871)-179-9521	(794)-340-1989
austin cook	austin.cook20@example.com	(799)-991-8194	(440)-901-1665
dylan lee	dylan.lee99@example.com	(376)-197-3547	(125)-339-4193
mark hamilton	mark.hamilton57@example.com	(547)-578-7096	(777)-512-6769
katie garcia	katie.garcia36@example.com	(790)-247-1128	(757)-225-5553
paul williams	paul.williams44@example.com	(997)-843-8164	(626)-160-7932
jerry bailey	jerry.bailey78@example.com	(647)-709-8682	(993)-613-1640

Even better: what about an overflowing table with sticky header and column?

Name	Email	Phone	Address	MD5 hash	SHA1 hash
Name	Email	Phone	Address	MD5 hash	SHA1 hash
kylie roberts	kylie.roberts13@example.com	(587)-829-8041	6129 ash dr celina new mexico 52670	69705c9af115287878ba5adcaf7d0408	ad5eb62a8b9682a143e34180aba41a164eb9692b
angel wilson	angel.wilson75@example.com	(631)-781-7924	7403 camden ave moscow georgia 71422	a5101e70e5a075abab1c08c7a6c39612	ddb4a6bd8fed8f7bed2b44e7a69fde18974e5c42
taylor taylor	taylor.taylor85@example.com	(279)-572-7050	3962 n stelling rd shelby arizona 63970	cb205edee16b24366c871cf55e781346	0391a1e58f324b3a0c79d32dd09436bd45bfc773
soham wright	soham.wright99@example.com	(524)-293-6404	5905 harrison ct raleigh idaho 13158	cebc5f0a8eb734bd46f5c8fa3d7a7e07	c59f3a21357fd5c20aa56ec50cb3246939950c23
taylor wright	taylor.wright11@example.com	(569)-816-1342	7246 w pecan st grapevine louisiana 80892	33229a6d43b349aa7adf8afa9b6e50d2	97eebf414085126c7acaf1bdb36d65527b0b5969
mary sanders	mary.sanders67@example.com	(252)-181-4717	7163 mockingbird hill hamsburg north dakota 58352	a37b2a637d2541a600d707648460397e	8964af7e7645a7c6c1e891f5e69d22e8adaafe70
david watson	david.watson80@example.com	(748)-213-1039	5621 sunset st dumas south dakota 65723	c0961eb84d1e91451ecb8450870a2953	86fab557254e3d14ebd493ae1ec9b9ad9f0685d3
elizabeth johnson	elizabeth.johnson11@example.com	(473)-683-1255	2893 wheeler ridge dr moscow north carolina 36952	0bcdc9b55496ea12eb41b8a432a39753	49f697a8b043e7d85c8446fbfced0643eb44981d
mason price	mason.price92@example.com	(571)-374-1402	7201 railroad st dumas indiana 35322	4693fbb215b8ca15a6900f0cfa164cdc	3df47082217942e736428d6666efb933e2d6a1f6
jason price	jason.price91@example.com	(420)-192-2731	6906 plum st yakima minnesota 12486	1ea50771988c19844c52aa78325282bf	2d088eb402f3d9db2a2ccef20c339e6f7bf6c1fd

The Final Example — Biaxial overflow and biaxial headers

This is the ultimate example — we force a very wide table to overflow along both axis.

Case	#1	#2	#3	#4	#5	#6	#7	#8	#9	#10	#11	#12	#13	#14	#15	#16	#17	#18	#19	#20
Case	#1	#2	#3	#4	#5	#6	#7	#8	#9	#10	#11	#12	#13	#14	#15	#16	#17	#18	#19	#20
Patient #30	76	54	33	8	4	77	81	71	86	72	39	18	41	94	42	72	63	62	100	78
Patient #24	47	61	88	51	75	4	81	49	26	49	94	43	12	41	59	50	26	92	83	33
Patient #88	53	78	29	84	55	19	37	89	13	17	15	89	69	61	56	36	90	32	97	15
Patient #47	34	40	63	53	33	88	4	5	3	42	54	95	16	51	79	26	43	77	57	76
Patient #80	12	23	2	89	2	20	29	47	38	86	32	68	66	66	3	17	82	6	37	83
Patient #68	91	70	37	13	49	61	83	2	67	23	61	37	10	71	32	76	22	66	8	17
Patient #36	62	58	87	34	77	80	69	45	11	92	100	99	7	62	54	28	48	71	75	70
Patient #77	80	82	58	66	70	64	33	77	60	14	29	93	39	60	13	9	51	6	44	13
Patient #29	78	1	91	21	38	41	92	72	56	10	40	89	8	26	51	88	7	100	68	96
Patient #69	55	63	49	18	81	56	93	30	53	20	99	98	99	87	53	84	2	18	5	25
Patient #33	36	31	61	68	40	4	55	19	18	17	46	1	27	40	60	3	69	42	87	31
Patient #20	23	24	20	83	7	69	60	7	80	59	10	36	66	88	10	26	56	74	12	66
Patient #21	83	93	71	54	21	96	19	26	5	97	15	48	93	98	42	72	89	45	83	91
Patient #15	100	58	85	70	32	50	77	5	56	34	92	18	89	23	13	17	83	85	32	60
Patient #89	28	62	87	77	87	54	72	7	31	66	66	84	44	79	4	15	45	13	8	21
Patient #43	96	27	63	28	65	73	22	63	22	8	1	77	32	31	64	10	16	94	98	70
Patient #25	10	19	11	4	90	44	22	95	62	87	96	43	20	11	40	10	69	28	89	90
Patient #9	67	87	9	55	92	78	26	58	38	79	50	17	81	9	70	37	3	42	33	36
Patient #59	22	21	98	91	15	39	28	31	5	90	100	85	46	80	100	26	48	29	7	36
Patient #23	90	90	64	96	89	52	85	49	50	73	43	76	90	1	98	35	12	48	15	1

Res dem agam more ima jure rea. An ab rantem ut et potius gaudet. Ei scientiis videretur ea objective nitebatur in me. Tantumque mo ac proponere eminenter. Cum hos putandum concedam hic supponit commoveo. Praestari an similibus credendas priusquam perspicue improviso re ac. Agi praesertim aliquoties negationem sap commendare repugnemus frequenter est. Imaginabar parentibus imaginaria expectanti ii et confirmari.

Alteram tanquam creatis viribus at si. Maximam vos hoc antehac imo ignotas eae aliarum fictile. Excludat is potestis me du si cognitio liberius. Sum quae rem meae male haec. Fallacem totamque at loquebar formemus suspicio ex me ne. Haereo mutata dum vix magnum tertia volunt nam suo audita.