StickySort

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 morgansamantha morgansamantha.morgan56@example.com(369)-227-3751grapevine, idaho
eli wilsoneli wilsoneli.wilson12@example.com(857)-619-4186bozeman, new york
brian brownbrian brownbrian.brown96@example.com(924)-543-6342allen, washington
kathy wilsonkathy wilsonkathy.wilson59@example.com(786)-203-4153ennis, connecticut
christine ramirezchristine ramirezchristine.ramirez72@example.com(778)-129-1925provo, delaware
charles leecharles leecharles.lee19@example.com(425)-976-3550akron, virginia
arthur bennettarthur bennettarthur.bennett10@example.com(996)-182-3744wilmington, michigan
aalivah simmmonsaalivah simmmonsaalivah.simmmons64@example.com(687)-147-6639duncanville, tennessee
brian russellbrian russellbrian.russell22@example.com(600)-224-4416everett, colorado
dylan russelldylan russelldylan.russell32@example.com(439)-363-4363billings, wisconsin
candice lewiscandice lewiscandice.lewis76@example.com(733)-701-4550utica, nebraska
kaylee coxkaylee coxkaylee.cox32@example.com(459)-899-9689rochmond, california
erin millererin millererin.miller82@example.com(570)-814-6244rochester, indiana
madison brooksmadison brooksmadison.brooks63@example.com(855)-789-4736richardson, delaware
jennifer evansjennifer evansjennifer.evans72@example.com(214)-201-9140akron, rhode island
rebecca hughesrebecca hughesrebecca.hughes42@example.com(736)-650-7095greensboro, north carolina
samuel taylorsamuel taylorsamuel.taylor13@example.com(241)-121-6322dumas, north dakota
joseph walkerjoseph walkerjoseph.walker51@example.com(736)-940-6308bueblo, utah
ethan andersonethan andersonethan.anderson65@example.com(820)-571-9435grapevine, iowa
angel barnesangel barnesangel.barnes96@example.com(773)-363-7896belen, 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
albertgarciaalbert.garcia37@example.com9a26de5ea2dbe7fc5b6844128f307c3868a90898cfc09508ed08aacf24482effe7f8f7c8
alexawallacealexa.wallace18@example.coma3c4b614a1f072e0f968c2712a36323fadfc8f0aec273eace2629141317c1eac53923f28
jackcoxjack.cox73@example.com28e246ff038060bc335c0bf4925e5d518ad9a53bdd3b96cbc28efde629383954666ece67
meghantaylormeghan.taylor36@example.com573ce5969e9884d49d4fab77b09a306a9621a244a447ec749598f8327560ff86095e2c26
amycollinsamy.collins45@example.comf61f2f8157d9d632cc0b2bbc43d883f2be842d987424dcb128bee9520682687bc2149284
nicolelewisnicole.lewis62@example.come50081b0de0be206cd443d20094d389411615c74a29cc915c0802ae001d43b4cd96ced62
richardgrahamrichard.graham65@example.com03764ebfde7010aa700c6e73f84ed00e9286fa940279aa33e8e47ca7dd175324f333e4fa
braydenhillbrayden.hill28@example.coma03490c03eaa102dadc25dca3cc6772b6a53d618b92dcc6f23461cd323f993b210876602
ameliawallaceamelia.wallace92@example.com7b6b45249743ad383e7f2e1fafd640fa4003345f140d1f3af49b180ecdc8406755e3b472
melissascottmelissa.scott68@example.com5be977ac2dc6c7c07f8825de5f3c992634da1369d029a253a7586a8b582100180bba6441
elijahhallelijah.hall29@example.com21d9c57c1d2ae58cf12ece8a3470666ba2916e062071972d7da46f818b685642b3cffcac
ariannamoorearianna.moore76@example.com900e201a6aa7b0b1ce8218782d6142b6c9d8f39e46aed665fa734cf1ca18b2f99cf6805f
nevaehgriffinnevaeh.griffin53@example.com2e036ecb177e0f732bcbc1b0984ffebd044507c8314178f51f47bf2fd6e666a4139b6eef
sarahsmithsarah.smith62@example.comde1b2a7baf7850243db71c4abd4e5a39148627088915c721ccebb4c611b859031037e6ad
edwardwilsonedward.wilson63@example.com6673166b500d058c743b79c746c592432e8ae6ca8708f518d69cd1475017303ca0ae0080

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 floressophie.flores96@example.com(788)-499-9689(915)-162-6803
madison hillmadison.hill26@example.com(523)-950-9768(869)-333-9842
jack fosterjack.foster43@example.com(533)-613-4005(253)-508-1724
carl wardcarl.ward71@example.com(280)-130-9702(429)-838-3276
olivia bellolivia.bell98@example.com(589)-449-4963(685)-204-8461
allison griffinallison.griffin45@example.com(498)-153-4556(681)-786-9927
stephen smithstephen.smith44@example.com(687)-245-2715(209)-445-9081
hannah wallacehannah.wallace56@example.com(784)-731-8424(922)-401-6114
evelyn carterevelyn.carter72@example.com(871)-179-9521(794)-340-1989
austin cookaustin.cook20@example.com(799)-991-8194(440)-901-1665
dylan leedylan.lee99@example.com(376)-197-3547(125)-339-4193
mark hamiltonmark.hamilton57@example.com(547)-578-7096(777)-512-6769
katie garciakatie.garcia36@example.com(790)-247-1128(757)-225-5553
paul williamspaul.williams44@example.com(997)-843-8164(626)-160-7932
jerry baileyjerry.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 robertskylie robertskylie.roberts13@example.com(587)-829-80416129 ash dr
celina
new mexico 52670
69705c9af115287878ba5adcaf7d0408ad5eb62a8b9682a143e34180aba41a164eb9692b
angel wilsonangel wilsonangel.wilson75@example.com(631)-781-79247403 camden ave
moscow
georgia 71422
a5101e70e5a075abab1c08c7a6c39612ddb4a6bd8fed8f7bed2b44e7a69fde18974e5c42
taylor taylortaylor taylortaylor.taylor85@example.com(279)-572-70503962 n stelling rd
shelby
arizona 63970
cb205edee16b24366c871cf55e7813460391a1e58f324b3a0c79d32dd09436bd45bfc773
soham wrightsoham wrightsoham.wright99@example.com(524)-293-64045905 harrison ct
raleigh
idaho 13158
cebc5f0a8eb734bd46f5c8fa3d7a7e07c59f3a21357fd5c20aa56ec50cb3246939950c23
taylor wrighttaylor wrighttaylor.wright11@example.com(569)-816-13427246 w pecan st
grapevine
louisiana 80892
33229a6d43b349aa7adf8afa9b6e50d297eebf414085126c7acaf1bdb36d65527b0b5969
mary sandersmary sandersmary.sanders67@example.com(252)-181-47177163 mockingbird hill
hamsburg
north dakota 58352
a37b2a637d2541a600d707648460397e8964af7e7645a7c6c1e891f5e69d22e8adaafe70
david watsondavid watsondavid.watson80@example.com(748)-213-10395621 sunset st
dumas
south dakota 65723
c0961eb84d1e91451ecb8450870a295386fab557254e3d14ebd493ae1ec9b9ad9f0685d3
elizabeth johnsonelizabeth johnsonelizabeth.johnson11@example.com(473)-683-12552893 wheeler ridge dr
moscow
north carolina 36952
0bcdc9b55496ea12eb41b8a432a3975349f697a8b043e7d85c8446fbfced0643eb44981d
mason pricemason pricemason.price92@example.com(571)-374-14027201 railroad st
dumas
indiana 35322
4693fbb215b8ca15a6900f0cfa164cdc3df47082217942e736428d6666efb933e2d6a1f6
jason pricejason pricejason.price91@example.com(420)-192-27316906 plum st
yakima
minnesota 12486
1ea50771988c19844c52aa78325282bf2d088eb402f3d9db2a2ccef20c339e6f7bf6c1fd

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 #30765433847781718672391841944272636210078
Patient #24476188517548149264994431241595026928333
Patient #885378298455193789131715896961563690329715
Patient #473440635333884534254951651792643775776
Patient #80122328922029473886326866663178263783
Patient #6891703713496183267236137107132762266817
Patient #366258873477806945119210099762542848717570
Patient #7780825866706433776014299339601395164413
Patient #2978191213841927256104089826518871006896
Patient #6955634918815693305320999899875384218525
Patient #333631616840455191817461274060369428731
Patient #2023242083769607805910366688102656741266
Patient #21839371542196192659715489398427289458391
Patient #151005885703250775563492188923131783853260
Patient #892862877787547273166668444794154513821
Patient #4396276328657322632281773231641016949870
Patient #25101911490442295628796432011401069288990
Patient #96787955927826583879501781970373423336
Patient #592221989115392831590100854680100264829736
Patient #2390906496895285495073437690198351248151

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.