DataTables FixedColumns

Based on the DataTables FixedColumns add-on for the DataTables JavaScript library, this Extension lets you fix columns on the left and right sides of the table. This can be useful in wide tables that have an index or key column on the left, like directory tables.

Here’s an example where the two left columns are fixed, while the other columns are horizontally scrollable:

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9
FoxDiana12/08/1991Samsung372-995336220Germany$76.3392.8
HuffChastity11/14/1995Samsung637-460798499United States$82.7974.7
PetersLuke06/30/1991Mozilla853-315636833Australia$86.4078.8
NewmanCally06/21/1975Cisco294-602397885Brazil$61.6074.1
DunnDaryl10/20/1976Amazon362-362201123Canada$10.2794.0
HarrisonCamilla12/15/1982Cisco213-265240981Canada$67.5476.0
RobinsonFinn08/18/1996Yahoo990-011360390Canada$37.1519.0
FlemingIdona03/04/1987Adobe202-872662236Germany$13.8665.2
JoyceJerry09/27/1979Sony676-641873478Italy$90.0349.3
PaceZachary04/18/1983Cisco659-734226046France$85.3653.4
HolderTimothy05/03/1975Facebook223-723589294Brazil$71.2013.7
WhitfieldBrandon09/16/1968Xerox728-065343371Australia$67.4443.9
CampbellGiselle03/14/1963Facebook955-671669820India$20.08103.3
VelazquezChancellor03/07/1995Microsoft554-551561027Brazil$77.7929.8
ParkColby03/16/1960Amazon966-776575336United States$17.8326.4
HallCaryn07/24/1970Google985-483207161Germany$3.3610.5
FaulknerLesley12/19/1984Yahoo506-711901828Italy$23.7188.3
BlackwellNoah12/22/1968Facebook177-126345315Australia$52.4925.6
SlaterGuinevere02/21/1985Cisco463-721996393Germany$93.9130.1
ForemanVictor01/19/1982Amazon469-727065387India$39.3214.9
YangAlthea06/27/1968Twitter650-956394636Canada$53.0829.9
NortonImelda02/03/1975Samsung939-707881130Spain$58.2295.7
CraneMegan06/01/1981Oracle505-345390892India$74.6876.4
TerrellSopoline11/24/1973Intel667-013753848Spain$19.1461.4
StaffordEdward09/26/1990Cisco951-577602123Brazil$83.4192.4
MarshJakeem07/03/1996LG571-022210186Brazil$44.35101.0
HaynesChaim05/19/1995Sony635-957257149India$24.7568.9
MullinsHilary02/13/1996Xerox750-533925841India$54.1021.8
AshleyLenore08/07/1980Yahoo668-187719220France$70.5558.2
FrostDakota02/23/1965Samsung839-168812995France$40.8587.0

To use this, download, install, and activate the Extension like a regular WordPress plugin. Then, on the page where you want to show the table, insert the extended Shortcode

[table id=123 datatables_fixedcolumns_left_columns=1 datatables_fixedcolumns_right_columns=0 /]

and change the 123 to the desired table ID.

The numbers in the datatables_fixedcolumns_left_columns and datatables_fixedcolumns_right_columns parameters define how many columns on the left and right sides, respectively, shall be fixed. If the desired value for a parameter is 0, the parameter can be omitted.

If this Extension is helpful for you, please consider supporting further TablePress development with a donation. Thank you!

Top