10 jQuery Data Grid Plugins for Creating Data Layouts

jQuery is pretty legit when it comes to stuff like manipulating the elements on the page, or arranging data in any way you’d like. The only requirement is of course the jQuery dependency, and that isn’t at all a problem.

I think it was back in 2011 when grids were first introduced, at least to jQuery they were. I still remember how excited the web was, and all of the buzz that happened around the news.

Today, there are hundreds of these plugins to choose from, and of course a bunch of them have been around for long enough to have formed amazing communities. I’m going to outline some of the most popular jQuery data grid plugins that there are, based on their popularity on the web as a whole.

Image Grid or Table Grid?

This post will address both types of grids, and I’ll do my best to make it clear how each of the plugins work, and whether it can be used to build an image grid, or a data grid in table format. I don’t see the point in creating another blog post, just to separately write about each of the types.

The word data can mean a lot of things, hence it’s in the title.

1. gridster.js

gridster.js
This is an absolutely spectacular plugin, and you can do pretty much anything with it. Gridster has a smooth design style, and has plenty of demos to showcase itself. I love how easy it is to build draggable widgets for any type of project, plus it’s all intuitive.

The documentation is easy enough so that a child can understand it, and there is also an API available. Great little plugin.

2. jqGrid

jqGrid Demos
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

3. HTML5 Sortable

HTML5 Sortable
I love this, it’s so lightweight and easy to use. It’s also utilizing flat UI style, and can be easily modified to suit your project. You can easily create lists that you can either drag, or sort according to your own needs. It’s possible to have both grid style layouts and also list style.

4. Mason.js

MASON.JS

Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.

It’s a pretty technical explanation for the average man who needs a decent grid style plugin, but this is definitely one of the better choices from the whole list, due to its dedication to building solid and aligned grid system.

5. Grid—A—Licious

Grid A Licious
This is the go-to plugin when you need fluid, floating grid layouts for your projects. It’s totally responsive, visit the demo page for a preview, and there is nothing more to it. I recommend hitting CTRL+A on the demo page to see the text that’s hidden inside of the grids.

6. Freewall

Freewall jQuery plugin for creating grid layouts
Freewall is incredibly rich with functions that can help you to build any grid type imaginable, be it Pinterest or Windows 8 Metro style; it has got the capability to do it all. I couldn’t help but think how useful this particular grid plugin could be to an image site.

Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.

7. RowGrid.js

RowGrid.js Demo by brunjo
You should use this for smaller projects, most likely portfolios and similar stuff. It’s a very neat, and minimal grid plugin; but doesn’t do much more than place images in straight rows. Though, it does its function well, and deserves to be on the list.

8. Flex

jQuery plugin Flex Demo
A fluid asymmetrical animated grid plugin for jQuery, or in other words – it’s a plugin that will allow you to build a grid like gallery, and then expand images once someone scrolls over them. I enjoy this stuff a lot, mostly because it offers something unique and something that not many other developers dare to try and build.

9. DataTables

DataTables table plug in for jQuery
I was running low on these type of grid systems for this post, and so the last two posts are going to be focused on displaying data through a jQuery grid plugin. DataTables is a community of its own, and offers extensive documentation, community support and even extendable features through plugins.

It’s used by top companies like Amazon, and Open Library, which goes to show that they must be doing something right. You’ll find plenty of examples on the official website.

10. Ingrid

Ingrid the jQuery Datagrid.

Ingrid is an unobtrusive jQuery component that adds datagrid behaviors like column resizing, paging, sorting, row and column styling (and more) to your tables. This is the perfect plugin to play with for beginners, to learn and explore the way of working with data in this way.

Conclusion
I guess the list turned out better than I had initially planned, I had no idea that DataTables existed, but it looks like it’s an amazing project to work with, and I’m looking forward to watching some real demos of how it is being used.

The hardest part is getting one of these up and running, the rest is piece of cake, would you agree to that statement?