Best jQuery Tables Plugins & Tutorials with Demo

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

CHAP Links JavaScript Library

CHAP Links JavaScript Library

CHAP Links Library is a web based visualization library for displaying graphs, networks, and timelines.The library is specially designed to be easy to use, to handle large amounts of data, and to enable manipulation of the data. The library consists of Graph, Graph3d, Network, Timeline, and Treegrid.

Stupid Table : jQuery table sorter plugin

Stupid Table : jQuery table sorter plugin

This is a stupidly simple, absurdly lightweight jQuery table sorting plugin. As long as you understand basic JavaScript sorting, you can make this plugin do as much or as little as you want.

Most table sorting plugins try to account for a limitless number of data types and their limitless ways of being presented. This leads to an extremely bloated code base with only a tiny portion of the code ever used by your project.

ParamQuery Grid : jQuery Grid Plugin

ParamQuery Grid : jQuery Grid Plugin

ParamQuery grid is a lightweight jQuery grid plugin inspired by MS Excel and Google spreadsheet. It’s based upon jQueryUI Widget factory which is an excellent design pattern for UI controls with consistent API.

Features:

  • Sorting
  • Paging
  • Resizable columns
  • Resizable height and width
  • Customizable theme
  • Hiding / Showing columns
  • Freeze any number of Columns like Excel
  • Display any data source format like HTML, Array, XML, JSON, etc
  • Can be used with any server side framework e.g. ASP.NET, MVC3, JSP, JSF, PHP, etc
  • Virtual Scrolling and Rendering
  • Inline Editing of cells
  • Supports all the major browsers and has been tested in IE 6,7,8, Firefox, Chrome, Opera, etc

stacktable.js : jQuery plugin for Stacking Tables on small screens

stacktable.js : jQuery plugin for Stacking Tables on small screens

The jQuery plugin for equalizing the height or width of elements. The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format.Use media queries to toggle the visibility of the original table and the stacktable (check out the stacktable.css example).

jqGrid Inline Editing With jQuery Autocomplete FlexBox

jqGrid Inline Editing With jQuery Autocomplete FlexBox

This post explains how to use jQuery FlexBox plugin for Google like auto-suggestion box to edit data in jqGrid . Suppose jqGrid has Country column and we want to give auto-suggestion box during editing. When user enters letter, It will auto-populate related country names.

jQuery Plugin for Fixed Header Tables

jQuery Plugin for Fixed Header Tables

jQuery plugin for tables with fixed headers.FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.

Some options include a fixed footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is meant to be lightweight, easy to use and performant.

Fuel UX : Clean and lightweight UI controls

Fuel UX : Clean and lightweight UI controls

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

FooTable : jQuery Responsive Table plugin

FooTable : jQuery Responsive Table plugin

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.FooTable transforms your HTML tables into expandable responsive tables.It hides certain columns of data at different resolutions (we call these breakpoints).Rows become expandable to show the data that was hidden.

So simple! So all the data that is hidden can always be seen just by clicking the row.

BootMetro : Create web apps with Windows 8 Metro user interface

BootMetro : Create web apps with Windows 8 Metro user interface

BootMetro provides simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 MetroUI” style, without the need to run on Windows 8. It is built on top of Twitter Bootstrap and was originally inspired by the Metro UI CSS by Sergey Pimenov.

The framework permit to create web applications with the look&feel of the not-yet-released Windows 8 MetroUI style. Maybe not ideal for internet web sites, the MetroUI style can be adopted for modern intranet web sites. I’ve choosen to use as base the awesome Twitter Bootstrap framework, applying a set of customizations in pure css (but planning to do it in LESS for future version).