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…
As the name indicates, tablesorter adds sorting functionality to the table
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.
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.
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.
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.
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.
ColumnManager offers as the name indicates several ways that table columns can be rearranged, hidden or displayed.
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.
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.
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.
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.
Responsive table jQuery plugin
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.