Flarnie Marchán

Hello! I'm a software engineer with a passion for the web.

Best Javascript Grids

Published Mon Feb 04 2013 00:00:00 GMT-0800 (PST)
There are so many options for creating a grid or table with javascript, including features like pagination, column sorting, and fluid width or adjustable columns. Know your options: from old favorites such as jqGrid to the shiny new Recline JS and Backgrid.

Free Javascript Grid Libraries

DataTables

Based on: jQuery License: dual licensed under the GPL v2 license or a BSD (3-point) license Cost: Free Features: pagination, sorting, filtering, page length, infinite scrolling, ajax data sourcing, server-side processing, saving, styling (with themes), jQuery UI ThemeRoller support, and internationalization (i18n). Note: Additional features provided by commercial plugins for Datatables. Size:369KB full, 70.5 minified

EditableGrid

Based on: Vanilla JS License: a dual MIT/GNU license Cost: Free Features: pagination, sorting, filtering, ajax data sourcing, saving, and editing Size: 1.8MB

Flexigrid

Based on: jQuery License: dual licensed under the MIT or GPL Version 2 licenses Cost: Free Features: pagination, sorting, filtering, infinite scrolling, ajax data sourcing, styling (with theme) Size: 32K

inigrid

Based on: jQuery License: GNU GPL v3 Cost: Free Features: pagination, sorting, styling, saving Size:15.8KB

jqGrid

Based on: jQuery License: Basic grid is MIT licensed, and extra features/widgets are commercially licensed Cost: Basic version for Free Features: pagination, sorting, filtering, page length, infinite scrolling, ajax data sourcing, server-side processing, saving, styling (with themes), editing, and internationalization (i18n). Full documentation provided in the jqGrid wiki. Size: Full Basic Package is 542KB, and can be customized based on desired features.

SlickGrid

Based on: Vanilla JS License: MIT Cost: Free Features: sorting, filtering, infinite scrolling, ajax data sourcing, server-side processing, saving, styling (with themes), editing, and full width/fluid width. Note: SlickGrid is somewhat lacking in documentation, but on the plus side it is optimized to deal with "millions" of rows. Size: 257 kb

TableSorter

Based on: jQuery License: Dual licensed (just pick!)under MIT or GPL licenses Cost: Free Features: sorting, styling (with themes), and full width/fluid width.

Recline JS

Based on: Backbone JS License: MIT Cost: Free Features: pagination, sorting, filtering, page length, infinite scrolling, ajax data sourcing, server-side processing, and styling Size: 3.9 MB

Backgrid

Based on: Backbone JS License: Cost: Features: pagination, sorting, page length, ajax data sourcing, server-side processing, styling, and mobile browser support. Size: 4.7 MB

Commercial Javascript Frameworks with Grid Module

DHX: dhtmlxGrid

Based on: Vanilla JS License: Available under Open Source (GPL), Commercial, and Enterprise licenses, with advanced features restricted to paid licenses Cost: 0-449$ Features: Standard dhtmlxGrid includes sorting, filtering, editing, ajax data sourcing, basic drag'n drop, styling (with online skin builder). The Pro dhtmlxGrid adds pagination, page length, saving, advanced drag'n drop, and exporting.

jQWidgets: jqxGrid

Based on: jQuery License: For non-profit use the Creative Commons Attribution-NonCommercial 3.0 License is available, with three additional levels of professional licensing. Cost: 0-699$ Features: pagination, sorting, filtering, page length, infinite scrolling, ajax data sourcing, server-side processing, styling (with themes), full width/ fluid width, and internationalization (i18n).

Kendo UI: Grid

Based on: Kendo UI License: GPL v3 (no support), or a range of commercial licenses and packages that include customization and support Cost: Free for the basic package, and a range of options from a few hundred to 999$ Features: pagination, sorting, filtering, ajax data sourcing, server-side processing, styling, and editing.

Sencha ExtJS Grids

Based on: ExtJS License: GPL v3 for Open Source projects, and two professional level licenses Cost: Free for open source projects, and a range of support and licensing packages from a few hundred to 11,185$ Features: pagination, sorting, filtering, page length, infinite scrolling, ajax data sourcing, server-side processing,editing, styling, and a "sliding pager" among other widget add-ons.

Looking to the Future

jQuery UI Grid Delayed

The jQuery Project made a recent announcement that their much anticipated Grid component will be delayed in order to devote more resources to jQuery 1.9. For the moment there are an abundance of other grid libraries to choose from, but if and when there is a jQuery UI grid component it will provide another open source grid option that promises to combine the best of existing grid libraries in a format compatible with the popular jQuery library.

HTML5 Grids? Mobile Friendly Grids?

With mobile web set to surpass desktop browsing by 2015, (according to Morgan Stanley analysts), one would assume that the next generation of javascript grids will need to cater to devices ranging from a mobile flip phone to a wide-screen TV. They will also need to make the jump to HTML5 while continuing to provide fallback support for old browsers. What new libraries will meet these needs, and what libraries have I missed that could be useful?