87

I'm working with JavaScript, JQuery and HTML. UI Of my project is completely dynamic. I am looking for a dynamic JavaScript/JQuery Grid which supports following features.

Can anybody tell me is there any good looking open sources Grid which supports the following features?

  1. I should be able to create an instance of the grid at run-time and add to DOM.
  2. Supports column templates (textbox, select, checkbox or any inputs or simple text)
  3. Supports set new column template or replace existing column template at real-time.
  4. Few input control (e.g textbox, checkbox..) present under a column may be enabled and few may be disabled.
  5. Supports setData() at real-time.
  6. Supports event if any input data changed by user.
  7. It should support selection of a Row
  8. Add row or delete row support at real-time without rendering the whole grid.
  9. Supports Paging.
  10. Supports sorting by any column at real-time.
  11. Fires an event if data is sorted by user at real-time.
  12. Grid UI must support realizable columns
  13. Auto re-sizable (It will be great if grid is auto re-sizable according to the size of the parent element)
  14. Definitely has good documentation.
Tim M.
  • 53,671
  • 14
  • 120
  • 163
Somnath
  • 3,247
  • 4
  • 28
  • 42
  • 7
    Write it yourself. If you want all those features, you need to do it yourself. The custom solution is always the best solution. – Raynos Dec 30 '11 at 09:16
  • 29
    I'm not sure it's always the best solution. I mean - I'm not about to build my own database engine rather than use InnoDB... – Grim... Dec 30 '11 at 09:43
  • 2
    @Roynos, I have written few things myself but I need to invest lots of time to implement all features like sorting, resizing...etc.. so I'm looking for a grid control. I'm still evaluating all grids one by one. – Somnath Dec 30 '11 at 11:41
  • 23
    @Raynos That's ridiculous. The best solution is the solution that works at the lowest cost. Why build it if it's already been done? – richard Oct 03 '13 at 07:04
  • @RichardDesLonde you are right. My option is to select the existing best solution and extend it according to your requirements. – Somnath Oct 07 '13 at 07:09
  • This is an old question, but for any one's reference, `IgniteUI Grid` is also a very good choice. It supports almost all feature in a Grid that any one can need. See here at http://www.igniteui.com/ – Vivek Vardhan Jan 08 '15 at 05:59
  • Try jsGrid. It supports all features you've specified. The project site http://js-grid.com/ – tabalin Feb 27 '15 at 20:27

4 Answers4

42

Some useful are:

Free:

Paid:

The best entries in my opinion are Flexigrid and jQuery Grid.

Vladimir Georgiev
  • 1,949
  • 23
  • 26
Soham
  • 1,281
  • 7
  • 15
  • Till now I started liking jQuery Grid. http://www.trirand.com/blog/jqgrid/jqgrid.html But still I'm not sure. Keep you updated... – Somnath Dec 30 '11 at 13:48
  • @Somnath - Is jQuery grid the one you were most happy with? I have a similar need, and have been evaluating DataTables, but adding rows (and having them be part of the sort order) is not working well. – MattW Jan 12 '12 at 14:50
  • @MattW Yes i like jQuery Grid, Adding data is really easy. Also you can make every column sortable just by setting a flag. My requirements list was really big. But few thing I build myself and for few cases I'm using jQuery Grid. It got cool and easy API also. At this point of time i'm happy with jQuery Grid. Its good. – Somnath Jan 19 '12 at 17:22
  • @Somnath So, finally which one did you pick? I header DataTable is also a good option. Which one is fastest? And which one supports grouping? – Vivek Vardhan Oct 07 '14 at 11:58
  • @VivekVardhan im using http://www.trirand.com/blog/jqgrid/jqgrid.html – Somnath Jan 30 '15 at 18:00
  • I would also recommend ShieldUI grid. It provides a rich variety of features.https://demos.shieldui.com/web/grid-general/basic-usage – lyub35 Aug 11 '16 at 10:57
  • I chose SlickGrid because it is able to handle large amounts of data efficiently (100,000 rows or more in a single table without paging). The current version is maintained by 6pac, who has been very helpful with making fixes. https://github.com/6pac/SlickGrid/wiki – Sam Watkins Sep 06 '16 at 02:49
  • Keeps the COPY and PASTE compatibility. http://www.bossanova.uk/jexcel – Paul H. Feb 17 '17 at 20:25
38

you can try http://datatables.net/

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. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Scrolling options for table viewport
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid - backed by a suite of 2600+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
  • It's free!
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Advanced data source options
  • Extensive plug-in support
  • Sorting, type detection, API functions, pagination and filtering
  • Fully themeable by CSS
  • Solid documentation
  • 110+ pre-built examples
  • Full support for Adobe AIR
Jeremy
  • 307
  • 1
  • 6
  • 24
enclaved
  • 405
  • 3
  • 4
  • 3
    Please do proper formatting for key features. Don't use just copy/paste. Have to read it once after copy/paste? –  Dec 30 '11 at 10:10
  • What does "Non-destructive DOM interaction" mean? Having a tough time understanding why this is novel or a feature, and what it covers/guarantees. – John Zabroski Dec 29 '13 at 04:39
  • 1
    @John it's not mentioned on the linked page anymore, but if you search the web for that sentence, you'll find _"The biggest change in v1.4 is the non-destructive DOM interaction. What this means is that DataTables will not overwrite the table elements in order to perform it's functions (true progressive enhancement!), rather it moves the elements around. In v1.3 and before it would dynamically create the HTML required for the tbody on each draw, this is no longer the case. The immediate advantage is that all attributes (classes etc) on the original table are preserved [...]"_ – CodeCaster Jan 29 '14 at 08:09
  • 5
    it is not free software I think, mmm, a problem with it. – Dave Feb 13 '15 at 10:29
  • 4
    seems these cool DataTables grids are not editable, and if you need it - you have to pay for the editable version: http://editor.datatables.net/purchase/index – yetanothercoder Apr 05 '15 at 00:29
  • I would not recommend it for someone looking for good API, support for Promises and FLOSS – Marecky Sep 21 '15 at 00:10
  • Here is another jquery plugin. http://www.bossanova.uk/jexcel/tracking-changes-on-the-spreadsheet – Paul H. Feb 17 '17 at 20:24
  • and no manual column resize. I don't get it... :( – Kai Hartmann Mar 27 '18 at 07:39
8

My suggestion for dynamic JQuery Grid are below.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

Best one is :

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.

Variable length pagination

On-the-fly filtering

Multi-column sorting with data type detection

Smart handling of column widths

Display data from almost any data source

DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)

Scrolling options for table viewport

Fully internationalisable

jQuery UI ThemeRoller support

Rock solid - backed by a suite of 2600+ unit tests

Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more

Dynamic creation of tables

Ajax auto loading of data

Custom DOM positioning

Single column filtering

Alternative pagination types

Non-destructive DOM interaction

Sorting column(s) highlighting

Advanced data source options

Extensive plug-in support

Sorting, type detection, API functions, pagination and filtering

Fully themeable by CSS

Solid documentation

110+ pre-built examples

Full support for Adobe AIR

5

Have a look at agiletoolkit.org as this has a simple to use CRUD which supports 2,4,6,7,9,10 and 12 out of the box (uses Ajax to defender the grid when adding,deleting data and it integrates with jquery.

I would post some examples but on an iPad at the moment.

Trevor North
  • 2,286
  • 1
  • 16
  • 19