jQuery-ui-table

Add x, y axis scrolling and resizable headers to any plain HTML table.

View project on GitHub

jquery-ui-table

The jQuery UI table widget enables a host of features for plain tables in HTML documents.

At a minimum, the widget provides the ever elusive, yet simple, y axis scrolling for tbody, allowing stationary header and footer. Column widths are maintained between all table elements, even with the scrollbar present. Column headers can be made resizable allowing users to adjust widths to their preference. Complementing resizable headers, is x axis scrolling, which enables users to enlarge columns beyond the table width boundary.

Full feature list:

  • X and Y axis scrolling with stationary header and footer.
  • Resizable headers.
  • Specify minimum, maximum, and initial widths for table columns.
  • Various option formats are accepted: single value, array, and function.
  • Increase header widths during resize beyond apparent table width.
  • Synchronized scrolling of header and footer with the x-axis scrollbar.
  • Limit total minimum column widths to apparent table size during resize.
  • Resize function provided for dynamic and fluid layout.
  • Destroy completely restores the table to its initial state.
The API documentation is available here.

Live Examples

Below are various examples of the widget in action on an autogenerated table. Be sure to change the window size to see the dynamic resizing functionality that can be acheived with minimal effort from this plugin. (Thanks to MarcJ for the CSS Element Queries plugin which made this possible.)

Simple Y axis scrolling

Title Date Author Category
Title Date Author Category
Ac risus. Morbi metus. July 1st, 2014 Daphne S. Clemons Nunc id
Vitae, erat. Vivamus October 2nd, 2014 Fay E. Matthews Est. Nunc
Donec consectetuer mauris id January 31st, 2015 Constance Espinoza Vitae aliquam
Consectetuer adipiscing elit. November 25th, 2013 Melodie Y. Mcdonald In scelerisque
Metus vitae velit egestas lacinia. May 20th, 2015 Hilda Sweeney Dui nec
Dolor. Fusce mi lorem, vehicula et, November 8th, 2014 Kasimir Maldonado Adipiscing non,
Vestibulum ut eros non enim May 28th, 2014 Brenden Stephenson Parturient montes,
Vel quam dignissim pharetra. Nam ac December 7th, 2014 Meghan C. Pitts Massa non
Lectus justo eu arcu. Morbi October 18th, 2015 Aileen Kirk Vestibulum accumsan
Condimentum eget, volutpat ornare, facilisis eget, ipsum. January 22nd, 2015 Tanek C. Dean Donec non
Vehicula aliquet libero. Integer in magna. January 13th, 2015 Allegra Pennington Malesuada id,
Penatibus et magnis January 12th, 2015 Tamekah P. Stephenson Vel, mauris.
Vitae erat vel pede blandit congue. November 28th, 2014 Nicole O. Reese Parturient montes,
Risus. Nulla eget metus eu November 2nd, 2015 Melyssa Collier Nascetur ridiculus
Semper et, lacinia vitae, sodales at, velit. May 17th, 2014 Naomi Miles Enim. Etiam
Donec elementum, lorem ut January 30th, 2014 Sylvester J. Valentine Aliquam ornare,
In ornare sagittis felis. Donec tempor, est September 1st, 2014 Benedict Cardenas Ornare, libero
Erat volutpat. Nulla dignissim. Maecenas June 10th, 2015 Blossom L. Haley Interdum. Sed
Quisque libero lacus, varius et, euismod January 17th, 2014 Wilma S. George Bibendum fermentum
Hendrerit id, ante. Nunc mauris December 28th, 2014 Roary S. Rocha Tempor bibendum.
Penatibus et magnis dis March 14th, 2015 Kellie Q. Pearson Quam, elementum
Nunc commodo auctor velit. Aliquam nisl. February 17th, 2015 Acton Gallegos Amet ante.
Donec luctus aliquet odio. Etiam ligula tortor, February 9th, 2015 Lillian X. Parker Magnis dis
Elit erat vitae June 10th, 2015 Jeremy U. Witt Porttitor eros
Et ultrices posuere cubilia Curae; December 25th, 2013 Alvin Rowe Mus. Proin
Euismod ac, fermentum vel, mauris. Integer July 24th, 2014 Christen H. Simon Vel arcu.
In mi pede, nonummy ut, molestie October 12th, 2014 Lydia Ortiz Tellus eu
Lorem. Donec elementum, lorem ut aliquam July 30th, 2015 Claire S. Atkinson Integer vitae
Auctor vitae, aliquet nec, imperdiet nec, leo. February 28th, 2015 Cynthia Avery Dolor dapibus
Nisl. Quisque fringilla euismod enim. December 22nd, 2014 Boris M. Hancock Integer sem
Nullam velit dui, July 23rd, 2015 Igor Z. Macdonald Arcu et
Et arcu imperdiet ullamcorper. Duis at lacus. March 26th, 2014 Eliana Q. Hobbs Est, mollis
Euismod mauris eu January 9th, 2015 Jaime G. Koch Cursus in,
Mi tempor lorem, eget mollis lectus May 23rd, 2014 Adrian Fleming Elit elit
Nunc nulla vulputate dui, nec tempus February 8th, 2015 Jacqueline Key Penatibus et
Duis ac arcu. Nunc mauris. Morbi non August 4th, 2015 Marah N. Bridges Non, cursus
Ligula. Nullam feugiat placerat October 21st, 2014 Lisandra Bennett Iaculis quis,
Suspendisse tristique neque venenatis lacus. Etiam December 14th, 2013 Rowan Larsen Dolor dapibus
Molestie arcu. Sed July 7th, 2014 Zephr Mercer Fringilla, porttitor
Duis volutpat nunc sit amet February 16th, 2015 Hamish P. Pennington Ut erat.
Fermentum vel, mauris. Integer September 6th, 2015 Jolie David A, magna.
At, velit. Cras lorem lorem, luctus ut, May 26th, 2015 Bianca G. Leach Curae; Phasellus
Cum sociis natoque penatibus et magnis March 23rd, 2014 Nash G. Potter Neque vitae
Et netus et malesuada fames ac turpis December 29th, 2014 Britanney Boone Lorem lorem,
Dui augue eu November 5th, 2015 Dalton M. Campos Integer vulputate,
Eu, placerat eget, venenatis a, magna. Lorem December 4th, 2014 Levi Graves Viverra. Maecenas
Fusce feugiat. Lorem ipsum dolor April 5th, 2015 Kelsie Barber Amet luctus
Lectus justo eu arcu. Morbi sit amet October 18th, 2014 Claire Stark Semper egestas,
Interdum feugiat. Sed nec metus April 28th, 2015 Rafael Austin Magna, malesuada
Luctus et ultrices posuere November 4th, 2014 Karen Golden Urna et
Pulvinar arcu et pede. Nunc sed orci December 31st, 2014 Brody Harrington Magna. Praesent
Habitant morbi tristique senectus et July 8th, 2014 Castor N. Douglas Lacus pede
Lorem, sit amet ultricies sem magna April 3rd, 2015 Dai C. Mccormick Proin eget
Pharetra, felis eget varius ultrices, mauris June 30th, 2014 Brittany Q. Rich Nisi dictum
Urna justo faucibus lectus, a sollicitudin October 31st, 2014 Sawyer W. Schwartz Libero et
Massa rutrum magna. July 3rd, 2014 Jason Beck Non, egestas
Ac metus vitae April 19th, 2014 Erasmus Q. Chaney Elit, pharetra
Morbi tristique senectus et netus et malesuada March 13th, 2015 Quynn Brady Auctor, nunc
Praesent interdum ligula eu enim. Etiam October 13th, 2015 Vaughan Johns Elit. Nulla
Erat neque non February 14th, 2015 Nomlanga Rodgers Tempor erat
Risus. In mi March 24th, 2014 Keefe B. Hendrix Blandit congue.
Dui. Fusce diam nunc, December 27th, 2014 Priscilla Best Massa. Suspendisse
Magna sed dui. Fusce aliquam, March 9th, 2015 Glenna Wolf Quam, elementum
Interdum ligula eu July 7th, 2015 Carla Boyer Donec non
Ut odio vel est tempor bibendum. June 1st, 2014 Chloe Padilla Hendrerit id,
Donec luctus aliquet odio. Etiam ligula tortor, November 17th, 2014 Barrett P. Stephenson Aptent taciti
Pede. Cum sociis March 27th, 2014 Sophia Hartman Orci. Phasellus
Sit amet, faucibus ut, June 22nd, 2015 Abigail Austin Interdum. Sed
Non, dapibus rutrum, justo. Praesent August 8th, 2015 Harding C. Albert Mattis. Integer
Rutrum magna. Cras convallis convallis dolor. June 22nd, 2014 Anjolie S. Cummings Nascetur ridiculus
Tortor at risus. Nunc ac September 1st, 2014 Serena Logan Porttitor scelerisque
Integer vitae nibh. Donec est mauris, rhoncus April 6th, 2015 Phillip Gilbert Tristique ac,
Ullamcorper magna. Sed eu eros. January 10th, 2014 Gisela Keller At arcu.
Aliquet, sem ut cursus luctus, ipsum April 26th, 2014 Slade Z. Juarez Sed turpis
Elit, a feugiat tellus lorem eu metus. August 3rd, 2015 Hunter Sharpe Cum sociis
Accumsan sed, facilisis vitae, August 16th, 2014 Ginger Sandoval Fermentum metus.
Netus et malesuada fames April 28th, 2014 Hadassah L. Dillard Feugiat nec,
Accumsan sed, facilisis vitae, orci. Phasellus August 5th, 2014 Oren Kennedy At risus.
Duis mi enim, condimentum September 5th, 2015 Cara W. Mathis Risus varius
Magna. Ut tincidunt March 27th, 2014 Gemma Bush Fusce mi
Ut erat. Sed nunc est, mollis December 9th, 2013 Kitra L. Burnett Molestie sodales.
Penatibus et magnis dis January 10th, 2014 Simone H. Tanner Tellus eu
Aenean egestas hendrerit neque. In May 17th, 2014 Zachary A. Thompson Tincidunt pede
Mauris blandit enim consequat purus. Maecenas libero December 3rd, 2014 Cole Underwood Eu odio
Metus facilisis lorem tristique August 31st, 2014 Ciaran Frye Aliquet diam.
Fermentum risus, at May 3rd, 2015 Molly W. Burgess Ligula. Donec
Sed congue, elit sed February 13th, 2014 Seth Mayo Non justo.
Montes, nascetur ridiculus mus. Donec dignissim February 27th, 2014 Scarlet Schultz Ligula. Aliquam
Duis dignissim tempor arcu. Vestibulum ut June 23rd, 2014 Echo N. Sawyer Felis purus
Aenean sed pede nec ante blandit February 25th, 2015 Christian X. Holman Aliquam adipiscing
Pharetra. Quisque ac libero December 23rd, 2014 Serina Nunez Posuere, enim
Sagittis lobortis mauris. Suspendisse aliquet September 3rd, 2014 Holmes David Porttitor eros
Ornare, libero at auctor ullamcorper, nisl May 26th, 2015 Zane Cameron Dolor. Nulla
Sapien. Cras dolor February 25th, 2014 Oscar Hicks Dictum sapien.
Sem, consequat nec, January 5th, 2015 Simon Santiago Elit erat
Velit. Aliquam nisl. Nulla eu neque pellentesque August 30th, 2014 Darrel J. Lyons Morbi tristique
Hendrerit id, ante. Nunc mauris sapien, September 7th, 2014 Keelie O. Cantu Est, mollis
Curae; Phasellus ornare. July 21st, 2014 Michael Moody Mollis lectus
Arcu vel quam July 29th, 2014 Celeste A. Guerra Dui augue
Proin non massa non ante bibendum ullamcorper. September 26th, 2014 Christen B. Buckner Phasellus libero

X and Y axis scrolling with resizable column headers

Title
Date
Author
Category
Title Date Author Category
Ac risus. Morbi metus. July 1st, 2014 Daphne S. Clemons Nunc id
Vitae, erat. Vivamus October 2nd, 2014 Fay E. Matthews Est. Nunc
Donec consectetuer mauris id January 31st, 2015 Constance Espinoza Vitae aliquam
Consectetuer adipiscing elit. November 25th, 2013 Melodie Y. Mcdonald In scelerisque
Metus vitae velit egestas lacinia. May 20th, 2015 Hilda Sweeney Dui nec
Dolor. Fusce mi lorem, vehicula et, November 8th, 2014 Kasimir Maldonado Adipiscing non,
Vestibulum ut eros non enim May 28th, 2014 Brenden Stephenson Parturient montes,
Vel quam dignissim pharetra. Nam ac December 7th, 2014 Meghan C. Pitts Massa non
Lectus justo eu arcu. Morbi October 18th, 2015 Aileen Kirk Vestibulum accumsan
Condimentum eget, volutpat ornare, facilisis eget, ipsum. January 22nd, 2015 Tanek C. Dean Donec non
Vehicula aliquet libero. Integer in magna. January 13th, 2015 Allegra Pennington Malesuada id,
Penatibus et magnis January 12th, 2015 Tamekah P. Stephenson Vel, mauris.
Vitae erat vel pede blandit congue. November 28th, 2014 Nicole O. Reese Parturient montes,
Risus. Nulla eget metus eu November 2nd, 2015 Melyssa Collier Nascetur ridiculus
Semper et, lacinia vitae, sodales at, velit. May 17th, 2014 Naomi Miles Enim. Etiam
Donec elementum, lorem ut January 30th, 2014 Sylvester J. Valentine Aliquam ornare,
In ornare sagittis felis. Donec tempor, est September 1st, 2014 Benedict Cardenas Ornare, libero
Erat volutpat. Nulla dignissim. Maecenas June 10th, 2015 Blossom L. Haley Interdum. Sed
Quisque libero lacus, varius et, euismod January 17th, 2014 Wilma S. George Bibendum fermentum
Hendrerit id, ante. Nunc mauris December 28th, 2014 Roary S. Rocha Tempor bibendum.
Penatibus et magnis dis March 14th, 2015 Kellie Q. Pearson Quam, elementum
Nunc commodo auctor velit. Aliquam nisl. February 17th, 2015 Acton Gallegos Amet ante.
Donec luctus aliquet odio. Etiam ligula tortor, February 9th, 2015 Lillian X. Parker Magnis dis
Elit erat vitae June 10th, 2015 Jeremy U. Witt Porttitor eros
Et ultrices posuere cubilia Curae; December 25th, 2013 Alvin Rowe Mus. Proin
Euismod ac, fermentum vel, mauris. Integer July 24th, 2014 Christen H. Simon Vel arcu.
In mi pede, nonummy ut, molestie October 12th, 2014 Lydia Ortiz Tellus eu
Lorem. Donec elementum, lorem ut aliquam July 30th, 2015 Claire S. Atkinson Integer vitae
Auctor vitae, aliquet nec, imperdiet nec, leo. February 28th, 2015 Cynthia Avery Dolor dapibus
Nisl. Quisque fringilla euismod enim. December 22nd, 2014 Boris M. Hancock Integer sem
Nullam velit dui, July 23rd, 2015 Igor Z. Macdonald Arcu et
Et arcu imperdiet ullamcorper. Duis at lacus. March 26th, 2014 Eliana Q. Hobbs Est, mollis
Euismod mauris eu January 9th, 2015 Jaime G. Koch Cursus in,
Mi tempor lorem, eget mollis lectus May 23rd, 2014 Adrian Fleming Elit elit
Nunc nulla vulputate dui, nec tempus February 8th, 2015 Jacqueline Key Penatibus et
Duis ac arcu. Nunc mauris. Morbi non August 4th, 2015 Marah N. Bridges Non, cursus
Ligula. Nullam feugiat placerat October 21st, 2014 Lisandra Bennett Iaculis quis,
Suspendisse tristique neque venenatis lacus. Etiam December 14th, 2013 Rowan Larsen Dolor dapibus
Molestie arcu. Sed July 7th, 2014 Zephr Mercer Fringilla, porttitor
Duis volutpat nunc sit amet February 16th, 2015 Hamish P. Pennington Ut erat.
Fermentum vel, mauris. Integer September 6th, 2015 Jolie David A, magna.
At, velit. Cras lorem lorem, luctus ut, May 26th, 2015 Bianca G. Leach Curae; Phasellus
Cum sociis natoque penatibus et magnis March 23rd, 2014 Nash G. Potter Neque vitae
Et netus et malesuada fames ac turpis December 29th, 2014 Britanney Boone Lorem lorem,
Dui augue eu November 5th, 2015 Dalton M. Campos Integer vulputate,
Eu, placerat eget, venenatis a, magna. Lorem December 4th, 2014 Levi Graves Viverra. Maecenas
Fusce feugiat. Lorem ipsum dolor April 5th, 2015 Kelsie Barber Amet luctus
Lectus justo eu arcu. Morbi sit amet October 18th, 2014 Claire Stark Semper egestas,
Interdum feugiat. Sed nec metus April 28th, 2015 Rafael Austin Magna, malesuada
Luctus et ultrices posuere November 4th, 2014 Karen Golden Urna et
Pulvinar arcu et pede. Nunc sed orci December 31st, 2014 Brody Harrington Magna. Praesent
Habitant morbi tristique senectus et July 8th, 2014 Castor N. Douglas Lacus pede
Lorem, sit amet ultricies sem magna April 3rd, 2015 Dai C. Mccormick Proin eget
Pharetra, felis eget varius ultrices, mauris June 30th, 2014 Brittany Q. Rich Nisi dictum
Urna justo faucibus lectus, a sollicitudin October 31st, 2014 Sawyer W. Schwartz Libero et
Massa rutrum magna. July 3rd, 2014 Jason Beck Non, egestas
Ac metus vitae April 19th, 2014 Erasmus Q. Chaney Elit, pharetra
Morbi tristique senectus et netus et malesuada March 13th, 2015 Quynn Brady Auctor, nunc
Praesent interdum ligula eu enim. Etiam October 13th, 2015 Vaughan Johns Elit. Nulla
Erat neque non February 14th, 2015 Nomlanga Rodgers Tempor erat
Risus. In mi March 24th, 2014 Keefe B. Hendrix Blandit congue.
Dui. Fusce diam nunc, December 27th, 2014 Priscilla Best Massa. Suspendisse
Magna sed dui. Fusce aliquam, March 9th, 2015 Glenna Wolf Quam, elementum
Interdum ligula eu July 7th, 2015 Carla Boyer Donec non
Ut odio vel est tempor bibendum. June 1st, 2014 Chloe Padilla Hendrerit id,
Donec luctus aliquet odio. Etiam ligula tortor, November 17th, 2014 Barrett P. Stephenson Aptent taciti
Pede. Cum sociis March 27th, 2014 Sophia Hartman Orci. Phasellus
Sit amet, faucibus ut, June 22nd, 2015 Abigail Austin Interdum. Sed
Non, dapibus rutrum, justo. Praesent August 8th, 2015 Harding C. Albert Mattis. Integer
Rutrum magna. Cras convallis convallis dolor. June 22nd, 2014 Anjolie S. Cummings Nascetur ridiculus
Tortor at risus. Nunc ac September 1st, 2014 Serena Logan Porttitor scelerisque
Integer vitae nibh. Donec est mauris, rhoncus April 6th, 2015 Phillip Gilbert Tristique ac,
Ullamcorper magna. Sed eu eros. January 10th, 2014 Gisela Keller At arcu.
Aliquet, sem ut cursus luctus, ipsum April 26th, 2014 Slade Z. Juarez Sed turpis
Elit, a feugiat tellus lorem eu metus. August 3rd, 2015 Hunter Sharpe Cum sociis
Accumsan sed, facilisis vitae, August 16th, 2014 Ginger Sandoval Fermentum metus.
Netus et malesuada fames April 28th, 2014 Hadassah L. Dillard Feugiat nec,
Accumsan sed, facilisis vitae, orci. Phasellus August 5th, 2014 Oren Kennedy At risus.
Duis mi enim, condimentum September 5th, 2015 Cara W. Mathis Risus varius
Magna. Ut tincidunt March 27th, 2014 Gemma Bush Fusce mi
Ut erat. Sed nunc est, mollis December 9th, 2013 Kitra L. Burnett Molestie sodales.
Penatibus et magnis dis January 10th, 2014 Simone H. Tanner Tellus eu
Aenean egestas hendrerit neque. In May 17th, 2014 Zachary A. Thompson Tincidunt pede
Mauris blandit enim consequat purus. Maecenas libero December 3rd, 2014 Cole Underwood Eu odio
Metus facilisis lorem tristique August 31st, 2014 Ciaran Frye Aliquet diam.
Fermentum risus, at May 3rd, 2015 Molly W. Burgess Ligula. Donec
Sed congue, elit sed February 13th, 2014 Seth Mayo Non justo.
Montes, nascetur ridiculus mus. Donec dignissim February 27th, 2014 Scarlet Schultz Ligula. Aliquam
Duis dignissim tempor arcu. Vestibulum ut June 23rd, 2014 Echo N. Sawyer Felis purus
Aenean sed pede nec ante blandit February 25th, 2015 Christian X. Holman Aliquam adipiscing
Pharetra. Quisque ac libero December 23rd, 2014 Serina Nunez Posuere, enim
Sagittis lobortis mauris. Suspendisse aliquet September 3rd, 2014 Holmes David Porttitor eros
Ornare, libero at auctor ullamcorper, nisl May 26th, 2015 Zane Cameron Dolor. Nulla
Sapien. Cras dolor February 25th, 2014 Oscar Hicks Dictum sapien.
Sem, consequat nec, January 5th, 2015 Simon Santiago Elit erat
Velit. Aliquam nisl. Nulla eu neque pellentesque August 30th, 2014 Darrel J. Lyons Morbi tristique
Hendrerit id, ante. Nunc mauris sapien, September 7th, 2014 Keelie O. Cantu Est, mollis
Curae; Phasellus ornare. July 21st, 2014 Michael Moody Mollis lectus
Arcu vel quam July 29th, 2014 Celeste A. Guerra Dui augue
Proin non massa non ante bibendum ullamcorper. September 26th, 2014 Christen B. Buckner Phasellus libero

Update rows via the body function

Example coming soon!

Limitations

Effective minimums should be provided in the configuration as column widths between the header and body will unsynchronize when either the header column pack size or the body column pack size is reach.

Known Issues

There are no known issues at this time.

License

MIT License. Copyright 2014, Anthony Wells.