Best jQuery Tables Plugins & Tutorials with Demo

table_filter.js : jQuery Plugin to filter HTML Table rows

table_filter.js : jQuery Plugin to filter HTML Table rows

This is a jQuery plugin that uses input from a textbox to filter rows in HTML tables. its fast and lightweight (the minified version is just 872 bytes).

SlickGrid : A lightning fast jQuery grid/spreadsheet

SlickGrid : A lightning fast jQuery grid/spreadsheet

SlickGrid is a JavaScript grid/spreadsheet component.
It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

Responsive Tables with CSS & jQuery

Responsive Tables with CSS & jQuery

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.
The JS will help us create some new elements on small devices, so we don’t have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

GridNic : lightning fast JavaScript grid/spreadsheet

GridNic : lightning fast JavaScript grid/spreadsheet

SlickGrid is a JavaScript grid/spreadsheet component.It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

dynoTable: A jQuery plugin for creating editable tables

dynoTable: A jQuery plugin for creating editable tables

I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product.

DynoTable makes an html table editable. With it you can:

  • Add rows
  • Remove rows
  • Clone rows
  • Click and Drag to Re-arrange rows (If you have Jquery UI included on
    your page)

The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number
of properties and callback functions to configure it further if needed.

ezEditTable – Enhance Html Tables in jQuery

ezEditTable - Enhance Html Tables in jQuery

ezEditTable 2.0 is a javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation. With just a line of code you can easily convert a regular HTML table in an advanced editable and selectable grid control.

Features:

  • Attach to an existing HTML table
  • Advanced selection model
  • Extended keyboard navigation
  • Inline cell or row editing
  • Insert and remove rows
  • Send changes to server via GET or POST methods by form submission or by including script elements in the head section (only GETs)
  • Integration with any server-side technology as this is a pure client-side solution
  • Callbacks for all events, and delegates for most actions
  • Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in etc.)
  • Exhaustive documentation and API

Handsontable : jQuery Excel-like table editor

Handsontable : jQuery Excel-like table editor

Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery.

  • Type in any cell and see how the grid adds new rows and cols automatically.
  • The legend feature, which makes the first row uneditable and have an green font
  • You can define rules for autocompletition.
  • You can drag it (drag-down) to repeat the values from the cell.
  • Right click to see the context menu.
  • Use the onChange callback to track changes made in the table.
  • There is also the NEW onBeforeChange callback, which can be used to validate changes before they are applied to the table.

tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

tablecloth.js : jQuery bootstrap to Style & Manipulate data tables

tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.Either you’re redesigning a large site or working on a completely new one… styling tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting

Drag and Drop table content with JavaScript

Drag and Drop table content with JavaScript

Content of HTML table cells can be dragged to another table cell or another table. It isn’t difficult to define onMouseMove handler and change top / left element styles to move the object. In case with tables, you will have to determine somehow destination table cell. Attaching onMouseOver handler on table cells will not work, because browser doesn’t fire events to the elements beneath the dragged object.

jQuery Scrollable Table Plugin

jQuery Scrollable Table Plugin

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.

The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.