Enhance Tables Using One Of 30 Functional jQuery Plugins

 Posted in Freebies 718 days ago Written by: Valters Bergspics
  • Buffer
  • Pin It
  •  16

title jquery table plugins freebiesClassic ways of using simple html tables are long gone – of course you can still use them, but you will never get such functionality and flexibility with HTML as you can get using special jQuery plugins to do the job.

Never tables have been so dynamic and users now can specify and filter all the sections they want, you just need to find right plugin for specific project and that’s why I collected here 30 various functional jQuery plugins.

preview enhance tables using functional jquery plugins freebies

1. DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid – backed by a suite of 1300+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
  • It’s free!

Download Now | View Preview

2. jQuery Grid Plugin

Download Now | View Examples

3. Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

Download Now: Uncompressed or Compressed version | View Example

4. PicNet Table Filter

The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

Download Now | View Example

5. uiTableFilter

It gives you a great way to filter through table your specified keywords, and it is not using search button! You don’t have to wait while page reloads!

Download Now | View Preview One | View Preview Two

6. TableFilter

Download Now | View Example

7. LiveFilter

LiveFilter is a very lightweight jQuery plugin that will filter either an ordered or unordered list and display only the results that match the supplied string. It is throughly documented and designed in a way in which it is very easy to understand for designers.

Download Now | View Example

8. TableSort

Simple table sorter.

9. Tablesorter

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. It has many useful features including:

  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
  • Support for ROWSPAN and COLSPAN on TH elements
  • Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Extensibility via widget system
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Small code size

Download Now | View Preview

10. jQuery.TinySort 1.0.3

TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.

Download Now | View Example

11. Table Drag and Drop JQuery plugin

TableDnD plugin 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.

Download Now | View Examples

12. HeatColor

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

You bind a collection of elements such as table rows, divs or list members to heatcolor and let it do the work.

It can find the min and max values of the desired elements, or you can pass them in manually.

Download Now | View Previews

13. Fixed Header Tables

Download Now | View Examples

14. Graph Data from an HTML table using jQuery and flot

It makes image as graphical data using data from table. It requires to use flot.

Download Now | View Examples

15. Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

Visualize plugin — adding ARIA attributes to clarify the chart’s role to screen reader users, so they’re better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts’ appearance.

Download Now | View Example

16. JQTreeTable

JQTreeTable allow you to take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it’s parent row, set some options, and let jQTreeTable take it from there.

Download Now | View Preview

17. jQueryTreeTable

This is very similar to JQTreeTable.

View Examples

18. Ingrid

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. It’s easy to get started.

Download Now | View 3 examples

19. ColumnManager

A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!

Download Now | View Examples

20. ColumnHover

A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too!

Download Now | View Examples

21. Colorize

Colorize is a jQuery plugin to add background color to alternate HTML table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows or columns as you want. A repeat mouse click reverts the row/column to the original background color.

Download Now | View Example

22. KeyTable

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.

Download Now | View Example

23. Grider

Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features

  • Can make simple operations defined in the headers
  • Can add a row count to the table
  • Adds or deletes rows based on a row
  • Has summaries for average (avg), sum (sum), maximum (max) and minimum (min)
  • Works nice with Ruby on rails nested forms

View Example

24. jQueryTableRowCheckboxToggle

  • Written for jQuery 1.2.3 (should continue to work for any newer versions)
  • Click on any row, it will toggle the state of the applicable checkboxes
  • On page load, it also labels the last row with the appropriate css class since it contains checked applicable checkboxes
  • View source to get the gist of its usage
  • You may customize it by changing the variable values at the beginning of the tableRowCheckboxToggle.js
  • On this demo page, there are checkboxes that are excluded from the script i.e. checkbox with name testName, id checkme100 & checkme101, and class testClass

Download Now | View Example

25. Expand table rows with jQuery – jExpand plugin

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.

Download Now | View Example

26. TableEditor

TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.

Download Now | View Example

27. jGridEditor

This jQuery plugin allow you to add on-the-flight cell editing functionality in your table. You may configure it to perform AJAX queries and returning changed content or error messages. It was designed to work with Google App Engine, and it is strongly advice you develop your ajax server routines in this plataform.

Download Now | View Example

28. Zentable

Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.

  • Data loaded on demand using AJAX, or embedded in the page.
  • Mouse wheel and keyboard can be also used for scrolling.
  • Column resizing, auto resizing and table resizing
  • Orderable and filtrable by columns.
  • Tooltips
  • Editable
  • Supports HTML as content
  • Themeable by CSS. Supports different styles for rows and columns.

Download Now | View Example

29. Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features:

  • Resizable columns
  • Resizable height and width
  • Sortable column headers
  • Cool theme
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML and JSON[new])
  • Paging
  • Show/hide columns
  • Toolbar (new)
  • Search (new)
  • Accessible API
  • Many more

Download Now | View Example

30. jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Download Now | View Examples

 Did you enjoy this article and found it useful?

Valters is 17 years old freelancer from Latvia. His experience in web-building is about 3 years - PHP, xHTML, CSS. He enjoys web-building with different languages. You can follow him on Twitter.
Free Website
 

 16 Brilliant Comments - Join Discussion Now!

  • WebHostingAnda

    Posted 91 days ago
    15

    Awesome information.. I’ll try one by one to my project. Thanks.

  • Halil İbrahim Kalkan

    Posted 192 days ago
    14

    Thanks for sharing. See http://www.jtable.org also.

    • WebHostingAnda

      Posted 91 days ago
      16

      Thanks for add the reference. I like this one.

  • Techno Web Mart

    Posted 267 days ago
    13

    REALLY G8,VERY USABLE

  • mashary

    Posted 300 days ago
    12

    awesome article, very helpful to build my web apps :)

    thanks man!!

  • Atom

    Posted 404 days ago
    11

    Very good list. But I am looking for another solution. Anyway: I will for sure need it in the future.

  • Crandude

    Posted 558 days ago
    10

    Is there any way to sort table from a pop up which says ‘sort in ascending/descending’? Please help.

  • Ivan

    Posted 638 days ago
    9

    dhtmlxGrid is a good option if you need datagrid with rich features. Although it’s not a jQuery plugin, it doesn’t conflict with the library.

  • Tyson Cadenhead

    Posted 695 days ago
    8

    If you’re willing to break away from jQuery, EXTJS has some really nice grids ( http://www.sencha.com/deploy/dev/examples/#sample-3 )

  • Priya

    Posted 702 days ago
    7

    Thats a huge list, amazing. Thanks a lot.
    Priya recently posted..22 Collections Framework Interview Questions for Java developersMy Profile

  • Prefabrik Fiyatlari

    Posted 712 days ago
    6

    Thank you for sharing has been nice knowing I’m constantly sharing
    and keep track of your shares I would like to share my very nice and informative shares
    .-= Prefabrik Fiyatlari´s last blog ..Tek Katlı Prefabrik =-.

  • Binary Haiku

    Posted 714 days ago
    5

    Who would have thought that tables could become interesting again? That being said, HeatColor looks interesting.

  • chestaz

    Posted 716 days ago
    4

    this is very useful to me and other web developer, thnk a lot :)

  • Jordan Walker

    Posted 716 days ago
    3

    Great round up of enhanced jQuery table plugs.
    .-= Jordan Walker´s last blog ..RentalMaids.com =-.

  • Ziya

    Posted 716 days ago
    2

    There is some way to import to one of this tables excell (.xls) file(table) ?

  • Toma

    Posted 717 days ago
    1

    Awesomely helpful list. Thanks.

US