12 Useful jQuery Plugins for Working with Tables

By / Nov 23, 2009 / Resources
shares

The days of using tables for layout are hopefully gone. This doesn’t mean that tables don’t have a place in web design and development. When you have tabular data, tables are the way to go and are what you should be using. However, ordinary tables can be limiting to the user when you have complex data to display. Here are 12 very useful jQuery plugins that will add valuable functionality to your tables such as column sorting, fixed headers, pagination, and more.

jExpand

jquery tables

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

columnHover

jquery tables

columnHover lets you highlight whole columns in a table when hovering over them.

DataTables

jquery tables

DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.

Fixed Header Tables

jquery tables

Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.

Flexigrid

jquery tables

Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.

Ingrid

jquery tables

Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

treeTable 2.0

jquery tables

treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.

Tablesorter

jquery tables

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.

columnManager

jquery tables

columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.

Table Drag and Drop

jquery tables

Table Drag and Drop allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Chromatable

jquery tables

Chromatable allows you to easily create scrolling tables with fixed headers.

uiTableFilter

jquery tables

uiTableFilter is a plugin that makes filtering table rows very easy.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

27 Comments

  1. J
    November 23, 2009

    I think these are great links, but i have to think that maybe for ‘fixed header tables’ a skilled developer is not going to need this plugin…i mean you just have 3 div’s with seperate tables in them, the middle div with a set height and overflow:auto…its not really plugin worthy !!

    Reply
    • Mark
      November 23, 2009

      I developed ‘fixed header tables’ and currently still improving it. Its not as simple as it sounds. The reason why I started this plugin is because at work I deal with a lot of tabular data.

      The problem with having 3 separate tables is that you end up having to load the same data 3 times so that your columns remain the same width in each table. With the plugin I avoid doing that so you only have to load the data once in one table.

      Another problem is creating a fixed header is simple enough if you have fixed width columns. You can do this with just CSS. My requirements at work had to be a fluid design to maximize screen space and show as much data as possible and not load the data 3 times. With the plugin you have the option of resizing the browser window which will also resize the table and columns.

      Reply
    • zsiswick
      November 25, 2009

      That also assumes that the plugin audience is purely “skilled developers”. There are a lot of traditional print graphic designers that have moved over to website design who can greatly benefit from simple UI enhancements made possible with jQuery.

      Also, from a development perspective, does it really make sense to create the additional markup required for every scrolling table you want to deploy on a large scale website? Utilizing a jQuery plugin to handle the additional markup results in cleaner, more understandable code.

      Reply
  2. Design Informer
    November 23, 2009

    jQuery is awesome, and these plugins are great!

    Reply
  3. Pazcal de Jonge
    November 23, 2009

    I was looking for this article last week. I was running into a hige problem with a lot of data. The best timing ever! Thnx!

    Reply
  4. Juan Felipe Alvarez Saldarriaga
    November 23, 2009

    What about jqGrid (http://www.trirand.com/jqgridwiki/)? more features than flexigrid :|

    Reply
  5. designfollow
    November 23, 2009

    very useful

    thank you

    Reply
  6. Daniele S.
    November 23, 2009

    I suggest jqGrid:
    http://www.trirand.com/blog/

    a great plugin for working with tables (for jQuery).

    Reply
  7. Phil
    November 24, 2009

    woooooow, i just landed a huge webshop project.
    Table overflow but i’ll get to use 3/4 of these so thanks ;)

    Reply
  8. Webstandard-Team
    November 24, 2009

    Interessting collection, but if you need some more sort-solutions don’t miss 7 ways to sort tabledata

    Reply
  9. trCreative
    November 24, 2009

    Great list.

    Some news ones on their I’ve not seen/used before.

    Flexigrid is superb and Tablesorted is really easy to use, I’d reccommend both!

    Reply
  10. Olivier
    November 24, 2009

    Very nice list. Thanks!

    Reply
  11. Tanshul
    November 24, 2009

    very informative, thank you.

    Reply
  12. inwebdeveloper
    February 4, 2010

    veru useful, thank you.

    Reply
  13. Alex Peterson
    February 27, 2010

    Great list of tutorials. Nothing like a snazzy front end peppered with nice touches of JQuery. Bookmarked!

    Reply
  14. WebGyver
    March 9, 2010

    Thank you very much for putting all of this together. Good work. It always looks so easy when you see a list of jQuery extensions that somebody else has put together, but I know from experience that a lot of work goes into this.

    Something completely different:

    Has anyone seen functional and good-looking examples of two tables, side-by-side, that allow you to transfer data from one table to another?

    There are plenty of samples with SELECT boxes, but I’m looking for a table-based solution (and yes, it is for tabular data).

    Thanks for any links or suggestions.

    Reply
  15. Sedat Kumcu
    May 22, 2010

    Great collection. Thanks man. Best regards.

    Reply
  16. EcommerceDeveloper
    July 31, 2010

    Some Good stuff really. Thank you. – Dongan

    Reply
  17. Greg
    August 10, 2010

    Nice collection of scripts.

    Reply
  18. Atom
    April 15, 2011

    Great collection. I was looking for another solution, but still have to bookmark this page. I love jQuery.

    Reply
  19. J. Hendrix
    April 26, 2011

    Thanks, very useful!

    Reply
  20. Alvaro Prieto
    October 31, 2011

    I think it also perfectly fits in this suggested plugin list the one I have just published. It is called colResizable and allows to resize column widths.

    Take a look here http://quocity.com/colresizable/

    Reply
  21. Rafael
    March 4, 2012

    Good job. Thank for that great collection. It’s very useful.

    Reply
  22. Guilherme Cruz
    April 30, 2012

    Dear Friends,

    I am looking for a jQuery plugin that works with tables and allows all the five features below:

    1) Drag and drop of an entire row (up, down).

    2) Drag and drop of an entire column (left, right) * This is the most important!

    3) Add new rows visually just passing the mouse over the bottom limit of the table.

    4) Add new columns visually just passing the mouse over the right limit of the table.

    5) By double clicking, edit the content of the cell.

    I would aprecciate any tip or solution.

    Thanks a lot!

    Guilherme Cruz

    Reply
  23. Sayan
    June 22, 2012

    See a working example of jquery powertable here

    http://fundapass.blogspot.in/2012/06/jquery-powertable.html

    Reply
  24. Pavan Somu
    July 26, 2012

    jquery makes your site load faster and thats a great plugins list of jquery …thanks for sharing this one…

    Reply
  25. John Moore
    October 29, 2012

    One of the big issues with scrollable tables is accessibility. You have to use something that maintains the relationship between the header and the table data.

    Reply

Leave a Reply