Pages

Wednesday 7 November 2012

Best JQuery Grid Plugins And JQuery Tables

Showing data in grid is the basic requirement all the time.Once the grid is ready, other necessary features gives good shape to grids like :

  1. Sorting grid columns
  2. Adding check boxes or other fields to the column
  3. Having constant headers (This is many time a basic requirement of the data grid)
  4. Loading data to data grid from xml,jason object via ajax call.
  5. editing and saving details in the grid.
  6. Free
  7. Many more.


Below I have listed the best JQuery Grid Plugins which full-fills above requirement and features of grids:



1) jQuery Grid Plugin – jqGrid
This is the most popular and most efficient free JQuery Grid Plugin.Provides very nice documentation for customization.This grid is my favorite one.

Features: 
1) Supports XML,Jason,Arrray
2 )Ajax support
3) Well documented and good customization examples.
4) Demo’s with php support.
5) Many more.


        DEMO AND DOCUMENTATION

         Note * : JQuery grid is not free only 30 days of trial is available. Please check commercial licenses details.jQuery Grid Plugin  jqGrid



2)Jquery mleibman/SlickGrid · GitHub


This is one of the other nice free jquery grid.Grid has nice support for colspans..Key features of this grid is nice support for filtering grid data.It has nice customisation demos listed.


DEMO AND DOCUMENTATION


Jqury Grid Plugin By Slick Grid
Jquery Grid plugin by Slick Grid


3)JQuery Grid Data Table

Key Features :

    1. Nice Ajax support.
    2. Fully internationalizable.
    3. jQuery UI ThemeRoller support.
    4. Nice colspan support.


    5. CUSTOMIZATION AND DEMO EXAMPLE

JQuery Grid Provided By Data Table
JQuery Grid By Data Table

4)JQuery Data Grid :Flexigrid :


        This simple
easy to use JQuery Grid with nice UI, which comes with very less configuration and basic features.

DEMO
JQuery Data Grid By Flexigrid
JQuery Data Grid :Flexigrid



5)Jquery Grid : JTable (JQuery Table)    :

This is one of the nice jquery grid plugin which needs some nice custom css. This has almost all the features.Listed below some key features:

Key features :
  • Supports server side paging using AJAX.
  • Supports server side sorting using AJAX.
  • Row expanding feature is very nice
  • Theme Changer
  • Well updated and stable
  • Many More:
DEMO AND DOCUMENTATION
Jquery Grid By JTable (JQuery Table)
Jquery Grid By JTable (JQuery Table) 





6) JQuery Table : WATable 

This simple grid and easy to use grid comes with very less configuration.

          DEMO and DOCUMENTATION
JQuery Table By WATable
JQuery Table By WATable


7) JQuery Data Grid : INGRID 


This is simple jquery data grid. This grid is not updated from long time.

Demo And Documentation


JQuery Data Grid By INGRID
JQuery Data Grid : INGRID


8)Jquery Excel Table : Handsontable


This jquery table works like excel spreadsheet. If you want to implement excel like features then use this Jquery datagrid.

Features :

1) Simple spreadsheet and easy to configure
2) Nice simple  UI
3) Supports Ajx
4) XML,JASON suppot
Jquery Excel Table By Handsontable
Jquery Excel Table By Handsontable

If you want to implement just sorting feature use this jquery grid plugin.

DEMO AND DOCUMENTATION

Jquery Grid Plugin - Table Sorter
Jquery Grid Plugin - Table Sorter
This provides many excel sheet like features:

DEMO


Jquery Grid by JQuery Sheet



11)Jquery Grid: Tree Table


This jquery table plugin provide tree structure inside table like folder hierarchy.


          DEMO

Tree Structured JQuery Data Grid
Tree Structured JQuery Data Grid

12)Below are some more grids which has some very basic features:


    1. Jquery Data Grid For Filtering Data By column : This grid filters data by column.
    2. Best colspan manager Jquery Data Grid : If you have data greed and you want manage colspans efficiently then use this grid.
    3. tGrid
    4. Nice Table Sorter JQuery Data grid plugin : This provides animated table sorting and animated pagination.


    Non-Free JQquery Data Grids

    Below Listed Some fully featured well documented non-free JQuery data grid :

    1) Juery Easy UI grid :
    This is most efficient grid having all the features with well documentation.



     



    2) JQuery Grid By JQWidgets : Below is full featured grid by JQWidgets


    If you find this post useful please share and leave a comment below, thanks! :)


    15 comments:

    1. Very good list, thanks a lot.

      ReplyDelete
    2. thanks a bunch....thanks for the heads up

      ReplyDelete
    3. thats not correct ! jqgrid IS NOT free !!!!!!!! its just a 30 days trial, update your posts! its important for other users to know

      ReplyDelete
    4. Very useful post. I'll try to select one and use it in my development

      ReplyDelete
    5. Great article. One detail that I found incorrect is that SlickGrid does offer pagination. As can be seen in this demo: http://mleibman.github.io/SlickGrid/examples/example4-model.html

      ReplyDelete
    6. Please ! can u help me ,in may project i never learnt jquery but I need that grid , can u give the code source ready and works well ?

      ReplyDelete
      Replies
      1. Well this is the right time to learn jQuery.

        Delete
    7. Definitely some cool jquery plugins. Extending jQuery with plugins and methods is very powerful and can save you and your peers a lot of development time by abstracting your most clever functions into plugins. jquery is awesome.
      Write less and do more with jquery. Best jQuery Table Sorter Plugins

      ReplyDelete
    8. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
      Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai .
      or learn thru Javascript Training in Chennai.
      Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

      ReplyDelete