Best jQuery Tables Plugins & Tutorials with Demo

TableNav : jQuery plugin providing navigation with Arrow keys in a Table

TableNav : jQuery plugin providing navigation with Arrow keys in a Table

jQuery tablenav is a jQuery utility plugin providing navigation with arrow keys in a table with input fields.You know the way you can navigate between cells in those spreadsheets apps? It’s nice to have something like that as well in your HTML tables.

Tiny editable jQuery Bootstrap Spreadsheet

Tiny editable jQuery Bootstrap Spreadsheet

This tiny (3KB, < 120 lines) jQuery plugin turns any table into an editable spreadsheet. Here are the key features:

  • No magic – works on a normal HTML table (so you can plug it in into any web table)
  • Supports validation and change events (so you can warn about invalid input or prevent invalid changes)
  • Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table)
  • Native copy/paste support
  • Does not force any styling (so you can style it any way you want, using normal CSS)
  • Works well with Bootstrap
  • Depends only on jQuery

appendGrid : Dynamic table input jQuery plugin

appendGrid : Dynamic table input jQuery plugin

AppendGrid allow you to input structured data row by row such like filling spreadsheets. It allows you to add/remove/insert/delete row in the grid. The generated input/select/textarea controls are well named for submitting to server side applications such as ASP.NET/PHP/JSP. Multiple options and callback events are available to fit every situation.

Features:

  • Easy to use
  • jQuery UI widgets supported
  • Multiple build-in input types included HTML5 input types
  • Customizable input types
  • Major web browser supported
  • Ready for internationalization

jQuery Sticky Table Headers & Columns

jQuery Sticky Table Headers & Columns

A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.

Multifilter : jQuery Plugin to Sort a table on Multiple inputs

Multifilter : jQuery Plugin to Sort a table on Multiple inputs

Multifilter is a jQuery plugin to let you filter a table based on multiple inputs.Check it out below demo.It’s pretty sweet.

Repeatable Fields : jQuery Dynamic Rows plugin

Repeatable Fields : jQuery Dynamic Rows plugin

Repeatable Fields is a jQuery plugin which let’s you create a set of fields that can be made to repeat. You can do the following to a field that is repeatable:

  • Add new instance
  • Remove existing instance
  • Reposition an instance

ReStable : Responsive tables to list jQuery plugin

ReStable : Responsive tables to list jQuery plugin

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

jQuery.sheet : jQuery Ajax spreadsheet Plugin

jQuery.sheet : jQuery Ajax spreadsheet Plugin

The ajax spreadsheet, jQuery plugin flavor.

bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

Quite simply, bbGrid is a JavaScript grid/spreadsheet component. The general idea is the same as in Backbone, you don’t need to keep an eye on collection, bbGrid will do that!

Features:

  • Responsive due to Twitter Bootstrap
  • Extendable thanks to Backbone.js
  • Fast as much as jQuery can
  • Configurable & customizable

Responsive CSS3 Data Grids

Responsive CSS3 Data Grids

Responsive CSS3 Data Grids are used to present typical tabular data. Their advantages over the standard table are expandable rows in a form of drop down accordion sections, ability to highlight individual rows, hover states, table cell and headings tooltips. In addition the table is fully responsive and adapts well to the resolution of different mobile devices like iPad or iPhone by grouping the data into rows. Additional drop down panel allows to show / hide selected columns for easier data comparison.

Features:

  • Pure CSS3 + HTML,
  • Responsive Layout,
  • IE8 JS Fallback,
  • Expandable Rows,
  • Ability To Expand Multiple Rows At Once,
  • Ability To Expand Only One Row At Once,
  • Ability To Expand Selected Rows By Default At Startup,
  • Ability to Highlight Single Table Row,
  • Hover States,
  • Columns Filtering,
  • CSS3 Tooltips,
  • 4 Predefined Color Skins