14 jQuery Plugins For Grid

  • Jonh
  • Aug 26, 2012
  • Comments Off

1. ingrid

Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

source | demo

2. flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

source | demo

3. jqGrid

qGrid (a jQuery plugin) is a Ajax-enabled JavaScript control that provides solution for representing tabular data on the web. Since the grid is client-side solution and loading data dynamically through Ajax callbacks, it can be integrated with any server side technology.

source | demo

4. DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

source | demo

5. jTPS

jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.

source | demo

6. tgrid

This plugin was created when i was upgrading a small framework of mine and i needed a table to present the records. It was then when i first heard about jQuery library and began to study it. Then i have seen tablesorter plugin and thought it was exact thing that i needed to my project. I needed to add some functionality to it, though. Firstly, i noticed that when i filled tablesorter with a big ammount of data and turned ‘pagination’ option on, my browsers [firefox and opera] just went nuts when it came to memory usage. So i thought i could add my own method of pagination. Then, i wanted to add some filtering and thirdly, i needed to combine it with the models of my framework (so that the tablesorter would sort of “create” the sql queries for me. I think i have succeded :)

source | demo

7. OpenJS Grid

OpenJS Grid is the easiest jQuery Data Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it’s all done.

source | demo

8. jQgrid

jQgrid provided a centralize event handler for you to customize.

source | demo

9. JQuery Accesible RIA Table

This widget extends a standard HTML table. You could add a sorting functionality, add a pager functionality, hide cols and rows — pretty cool when a user has to handle huge tables.

source | demo

10. GridNic

GridNic utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. In fact, there is no difference in performance between working with a grid with 10 rows versus a 100’000 rows. This is achieved through virtual rendering where only what’s visible on the screen plus a small buffer is rendered. As the user scrolls, DOM nodes are continuously being created and removed. These operations are highly tuned to provide optimal performance under all browsers. The grid also adapts to the direction and speed of scroll to minimize the number of rows that need to be swapped out and to dynamically switch between synchronous and asynchronous rendering.

source | demo

11. pgrid

Pines Grid is a JavaScript data grid plugin for the jQuery JavaScript library, developed by Hunter Perrin as part of Pines. It is designed to provide maximum flexibility, while still being easy to use and easy to implement.

source | demo

12. EditableGrid, make your HTML tables editable

EditableGrid is an open source JavaScript library aimed at turning tables into fully editable components. Its API is focused on simplicity : only a few lines of code are necessary to get your first editable grid up and running.

source | demo

13. Compass Datagrid for jQuery

Compass DataGrid is an ajax-driven data grid that relies on server-side code for its data. Rather than manipulating an existing table or breaking it down into multiple pages, Compass DataGrid takes an empty table and populates it by connecting to a server-side url via ajax. As users interact with the grid, the grid talks with the server-side script letting it know what the user is requesting. The server-side script then provides JSON encoded data for the plugin to update the table.

source | demo

14. 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.

source | demo