Best jQuery Tables Plugins & Tutorials with Demo

jQuery editTable Plugin

jQuery editTable Plugin

jQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables. jQuery editTable can be used both in ajax and/or HTTP POST contest and let you preset the title and number of columns or just let complete freedom to the user. You can even append custom behaviors to single column cells (ex. jQuery UI Datepicker).

DTable : jQuery Data Table plugin

DTable : jQuery Data Table plugin

It’s a data table for jQuery. I made it to study grunt and it’s first part of my Symfony 2 admin boundle. The plugin is highly customizable, It’s uses html template to generate the table (it’s not necessary to be a table, can be anything see “Custom template” example) and the whole plugin module based, so you can add new features easily.

jQuery Tabelizer : Multi level grouping indicators for Tables

jQuery Tabelizer : Multi level grouping indicators for Tables

Tabelizer  is a jQuery multi level grouping indicators for tables.

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.