14 awesome jQuery Table enhancing Plugins

jQuery table enhancement plugins

Using a table is a great way to present a bigger amount of tabular data on a website.

Traditionally tables has been static with a fixed layout and data presentation.

However with modern front end presentation techniques like jQuery, you can easily add a new dimension to your tables by allowing the user to tweak the table  – eg. by reordering or filtering the data.

These new features gives a new dimension to the user experience and data analysis when it’s possible for the user to reorder, filter or modify the table in real time.

Creating a dynamic table might sound complicated, but it’s surprisingly simple with the jQuery plugins that we present in this post.

As a start  you need well formed html as a basis for the table eg.:

<table>
  <thead>
    <th>head 1</th>
    <th>head 2</th>
  </thead>
  <tbody>
    <tr>
      <td>
        data 1
      </td>
      <td>
        data 2
      </td>>
    </tr>
  </tbody>
</table>

With this basis, all you need to do is to include jQuery and the table plugin on your page, and then you’re done! – it doesn’t get simpler than that :-)

Summarized, the plugins in this post can enhance your table with the following features:

  • Pagination – by only displaying a limited part of the table
  • Column sorting – allowing the user to reorder the data by clicking on the column headers
  • Filtering – only display table content that matches certain data
  • Show/hide columns – dynamically remove or display columns
  • Rearranging data – allow the user to drag and drop table data
  • Scrolling – display a big table on limited space by adding scrolling
  • Responsive – convert standard <table> markup to responsive <div> structure 

As you can see these features can be very useful, so let’s take a look at the jQuery table enhancing plugins we found for this post…

Tablesorter

Tablesorter is a lightweight plugin that easilly adds interactivity to your tables. Just inlude jQuery and the plugin javascript file. The plugin works in all modren browsers : IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

As the name indicates, tablesorter adds sorting functionality to the table

tablesorter jquery plugin

See website

Datatables

Datatables is a advanced jQuery plugin, that adds sorting, filtering and pagination to a static table. To enhance performance on tables with +500 rows, the plugin also supports Ajax or server side data processing.

Themes can be found that adjusts the look-and-feel of Datatables to fit the the major CSS frameworks like Zurb Foundation and Twitter Bootstrap.

datatables table sorter

See link

uiTableFilter

This plugin offers a easy way to add a filtering mechanism to a table. The plugin doesn’t offer a wide range of fetures, but it’s fast and easy to implement.

uTableFilter

See website

Scrollable table

This jQuery plugin adds scrolling functionality to a static table. Very useful if you need to present at big amount of data in a limited space.

scrollable plugin table

See website

Flexigrid

Flexigrid is a fully featured table enhancement script. With useful features like: filtering, resizable columns, pagination, show/hide columns – this script is one of our favorites in this lineup of jQuery table enhancement scripts.

As a bonus, this script supports Ajax data sources for improved performance when working with big data sets.

flexigrid jquery plugin

See site

Ingrid

Besides from beeing a North European girl name, Ingrid is also a beautiful jQuery table enhancement script.

Ingrid offers useful features like table sorting, pagination and row hightlight.

Ingrid

See site

ColumnManager

ColumnManager offers as the name indicates several ways that table columns can be rearranged, hidden or displayed.

Column manager

See site

Table Pagination

If you need to add a simple pagination to a big table, the Table Pagination script is worth a look. The plugin is simple to install, and the javascript only has a very small size.

jQuery table pagination

See site

Stupid jQuery Table Sort

There is nothing stupid about this plugin. This is a simple no nonsense plugin that adds sorting functionality to all columns in a table.

stupid table plugin

Drag and Drop

This plugin allows the user to rearrange the rows in a  table by dragging a row from one position and drop the row at another postion within the table.

drag and drop tale columns

See site

Chromatable

Chromatable adds scrolling functionality to a table. The first row is fixed, and remaining rows can be scrolled if the table height exceeds the specified max height. This is very useful if you needs to present a big amount of data in a limited space.

chromatable

See site

Animated table sort

The unique feature of this table sorter script is that it not only sorts the table, but also uses a very nice animation when rearranging the rows.

animated table sorter

See site

Responsive table jQuery plugin

This plugin can enhance a standard html table to a <div> based responsive table, just by adding a jQuery plugin to your page and a few lines of javascript.

responsive tables

See site

WATable

WATable is another plugin for adding new and interactive features to a standard html table. The plugin adds filtering, sorting, pagination, column picker and other great functionality to a table.

As a bonus, the plugin renders the table with a fresh and modern look-and-feel.

WATable

See site

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Comments are closed.