Best jQuery Tables Plugins & Tutorials with Demo

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

htmlToOffice : HTML Data converter with JavaScript

htmlToOffice : HTML Data converter with JavaScript

Word or Excel to HTML convert all of your data in this plugin

Open JS Grid : Easiest jQuery Grid

Open JS Grid : Easiest jQuery Grid

OpenJS Grid is the easiest jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it’s all done.

OpenJS Grid provides a super easy / powerful way to give customers access to data. I do all the database work for you, so you don’t have to figure out searching and sorting, as well as give you cool stuff like events and cell types so you can customize to fit your need. And now with Stylus and Bootstrap, you can easily restyle the grid to your liking.