Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

JQUERY PLUGINS TO WORK WITH DATA GRID

This is a very useful list of jQuery plugins that will help avoiding messing up data table, that at times may intimidate you. There are some that may duplicate features. But, the choice is yours and you can compare them. Choose the one that best fits your project’s requirement.

Compass Datagrid for jQuery

Compass DataGrid has a nice looking UI design. It is an ajax-driven data grid that relies on server-side code for its data. Compass DataGrid populates an empty table by requesting a server-side url via ajax, then update the table using the data return from the server-side in JSON format. This jQuery plugin for data table also has a nice pagination for data table. It’s really a worthwhile plugin to try.

jqGrid

jqGrid is a jQuery plugin that works in fun and easy way to save time for web developers. You won’t need to mess up with javascript code if you don’t like it because everything is handled with PHP (ASP.NET is now supported). The interesting thing is you can export your data table to an Excel format.

Zentable

Zentable is a plug-in for the jQuery Javascript library that allows to show and manipulate tabulated data on a web page but with many functionalities: scrolling with the mouse wheel, resizing column widths or using keys to move through the data. You can also editable the data field in the table.

jgrideditor

This jQuery plugin allow you to add on-the-flight cell editing functionality in your table. Very lightweight and easy to use.

columnManager

ColumnManager is light-weight jQuery plugin that helps to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too.

jqGridView

This jqGridView is the best jQuery plugin for data table I would recommend for people. jqGridView is a hight bowser compatibility jQuery plugin. It provide web developers, client-rich, XML-based, ajax grid plugin for jQuery library. jqGridView provides professional solution for representing and editing tabular data on the web. Via CSS, you can easily to customize the look-and-feel of this plugin. Also with the real-time data rows editing/updating, this one will make you happier.

ingrid

Datagrids supports good datagrid behaviors(column resizing, paging, sorting, row and column styling, and more) to your tables and you won’t have any difficulty to use.

Flexigrid

Flexigrid is lightweight jQuery plugin that can be used to convert any ordinary table into a feature rich control. Main features include: resizable columns, scrolling data and the ability to connect to xml based data source using AJAX to load content. Just like Compass Datagrid, Flexigrid has a nice looking interface and easy to customize via CSS.

SlickGrid

It’s very light script made for jQuery. SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance.

jQuery treeTable

treeTable is a plugin for jQuery that helps you to display a tree in a table, i.e. a directory structure or a nested list. It’s great idea for display additional data besides the tree in multiple columns.

Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. As the name said, Tablesorter works like charm in data table sorting.

DataTables

DataTables is a highly flexible jQuery plugin, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. It’s also the plugin for data grid which is easiest to implement.

uiTableFilter

uiTableFilter is a jQuery plugin for filtering table rows. It allows you to filter the data rows based on your mouse selection. You can sort the table by any of the columns, in both ascending and descending order, and even by multiple columns.

Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings. Small plugin for jQuery but enough for a simple use such as data table pagination.

Grider

Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way. Nice for trying!

jQuery Week Calendar

The most completed calendar plugin for jQuery is here. The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

FireScope Grid

FireScope Grid

FireScope Grid is a jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used.

BI Grid

BI Grid is designed to present your data, especially in the reports for enterprises. It would be able to edit data easily, drill down to details easily and ajax enabled. With Bi Grid, users management or users data reporting is not a nightmare anymore.

Table Drag and Drop JQuery plugin (TableDnD)

This TableDnD plugin allows the user to reorder rows within a table. Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements. This plugin also allows you to enable table real-time editing.

zzGrid

zzGrid is a Javascript grid control with continuous scroll. Your users do not have to click on distinct page numbers or forth and back buttons to see another portion of data, data is loaded from a server upon need in a natural way via AJAX.

JQUERY PLUGINS TO WORK WITH LAYOUT DESIGN

Be confident now! Designing in Grid with these jQuery plugins, will help you manage your grid layout better. Most of these plugins are to help you enhance design, but they can also be used during developing a project.

jQuery designerGrid

The {css} designerGrid jQuery plugin enables a web designer to view their design work in a standard browser with rulers and grids similar to that of Photoshop. Nice idea! Currently {css} designerGrid does not work in Internet Explorer as it is the only browser that does not natively support the HTML 5 canvas element.

Expanding Grid

Expanding Grid helps you to create a grid system from some class items that then expand on hover and contract on hover off. On hover the active grid expands to ratio set by the config, fades out the background. It gave me an idea for an interactive image gallery in my next project.

Columnizer

he Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.

Variable Grid Layout

This is my second favorite after Masonry. This plugin can do the grid layout for you with any height of layout element just like Masonry. Furthermore, Variable Grid Layout supports some effects such as fadein/fadeout that make your grid more attractive.

jQuery Panel Magic

If you are going to build a portfolio in only one page but you think the windows size doesn’t have enough space for you, this is the solution. jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

Css-Template-Layout

This plugin provides web designers a way to use the W3′s CSS Template Layout Module. The script parses a given set of CSS rules and displays the content as indicated in the specification.

jPhotoGrid

Actually it’s an image gallery by jQuery instead just a plugin for jQuery. This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

jQuery Masonry

Masonry is a layout plugin for jQuery that is awesome for generate a perfect grid layout. It re-arrange the float elements vertically then horizontally. And the result is no vertical gaps between elements of varying height.

Equal Heights with jQuery

The simple jQuery script loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.

960gs Grid Overlay

This is a nice plugin to work with 960gs Grid framework. You will work with it when developing your web site design. It provides a visual grid overlay for the 960.gs grid framework. The grid can be toggled on and off, and is configurable (e.g. opacity). Works for both 12 column and 16 column grids.

CTRL + SHIFT + G

The Grid Layout Javascript enables web-developers to stick to a Grid Layout quickly and simply by including the Grid Layouts Javascript file and simple XHTML code. Currently, the Grid Layouts Javascript relies on jQuery.

jLayout

The jLayout jQuery plugin provides four layout algorithms for laying out HTML elements in web pages.

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com.

MORE RESOURCES

Grid Calculator

Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid.

Grid Calculator by Designers Bookshop

Grid Calculator Basic Edition calculates grid systems for you really fast, all you need to do is to paste the information into your layout software.

The grid system

You can find a lot of information about grid in layout design here.

960 Grid System

The 960.gs was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project.

Blueprintcss

Same features as 960 grid system, Blueprint is a CSS framework, which aims to cut down on your development time especially in grid system.

YUI 2: Grids CSS

The 4kb file in YUI Grids CSS provides over 1000 page layout combinations.

Fluid 960 Grid System

It’s really nice looking CSS framework for fluid-width support.