When Pinterest became popular, grid-style layouts came to the fore. They quickly became a UX community favorite for displaying photography portfolios, product thumbnails on eCommerce sites, and article snippets on blogs. While they are primarily used to display text and image content, a number of products have used these plugins to create data-driven dashboards. Here are two examples of grid-style or modular layouts, Geckoboard and Freeboard:
(Related Read: 5 Dashboard Design Trends to watch out for)
In this post, we’ll help you compare jQuery grid plugins with the use of the Data Visualization Tool that helps you choose which is the best charting javascript library.If you’re building a dashboard, and are considering a grid-style layout, there are numerous options available. It would take a lot of searching, browsing, and note-taking to research the entire gamut of plugins. However, to save you some time, I’ve created a comparison table of the popular jQuery plugins that do the job and do it well.
Features | Masonry | Isotope | Packery | Gridster | ShapeShift | Shuffle.js |
---|---|---|---|---|---|---|
Browser support | IE8+ | IE8+ | IE8+ | IE9+ | IE9+ | IE7+ |
jQuery dependency | ✖ | ✖ | ✖ | ✔ | ✔ | ✔ |
Responsive | ✔ | ✔ | ✔ | ✖ | ✔ | ✔ |
No gaps | ✖ | ✖ | ✔ | ✖ | ✖ | ✖ |
Drag & drop | ✖ | ✖ | ✔ | ✔ | ✔ | ✖ |
Sorting | ✖ | ✔ | ✖ | ✔ | ✔ | ✔ |
Filtering | ✖ | ✔ | ✖ | ✔ | ✔ | ✔ |
Multiple layouts | ✔ | ✔ | ✔ | ✖ | ✔ | ✔ |
Animations | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Licensing | MIT | Commercial | Commercial | MIT | MIT | MIT |
StackOverflow Qs | 3824 | 2511 | 144 | 312 | 45 | 17 |
Github forks | 1283 | 965 | 125 | 688 | 264 | 50 |
Github commits | 375 | 727 | 324 | 253 | 397 | 132 |
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
This is extremely informative. Could you add where mason.js from Drew Dahlman stands on all this. It claims that there are no gaps.
One major drawback of Isotope: it is really slow when more than 50 items are used, which could render it useless for galleries etc.
Thanks for the list and breakdown. I found Shuffle.js suited my needs perfectly.
Richard, we are glad you found this helpful :)
Could you define what you mean by responsive in the comparison grid?
Nice list!
My favorite is Gridifier - http://gridifier.io. It also supports multi-touch drags and is well suited for usage with modern SPA frontend frameworks.
Some of you might wish to take a look at Filterizr, a jQuery plugin I have developed for similar functionality.
Moreover as regards Filterizr:
-Shuffles, sorts, filter and searches! (with preset controls)
-Lightweight (only 10kb)
-Highly customizable (allows you to use custom CSS for your transitions)
-Optimized for performance (even with a big number of items on mobile)
-MIT licensed
To download it, take a look at the docs or a live demo: http://yiotis.net/filterizr
There are plenty of plugins based on Isotope, I can recommend one of them, which is the Media Boxes Portfolio https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020