Top JavaScript Dynamic Table Libraries

Since @sematext focuses on Search, Data and Text Analytics, and similar areas that typically involve exclusively backend, server-side work, we rarely publish anything that deals with UI, UX, with JavaScript, front ends, and do on. However, our Search Analytics and Scalable Performance Monitoring services/products do have rich, data-driven UIs (think reports, graphs, charts, tables), so we are increasingly thinking (obsessing?) about usability, intuitive and clean interfaces, visual data representations, etc. (in fact, we have an opening for a UI/UX designer and developer).  Recently, we decided to upgrade a group of Search Analytics reports that, until now, used a quickly-thrown-together HTML table that, as much as we loved its simplicity, needed a replacement.  So we set out to look for something better, more functional and elegant.  In the process we identified a number of JavaScript libraries for rendering and browsing tabular data.  Eventually we narrowed our selection to 6 JavaScript libraries whose characteristics we analyzed.  In the spirit of sharing and helping others, please find their feature matrix below.

Feature

DataTables

JqGrid (aka Sigma2)

Slickgrid

dhtmlxGrid

Flexigrid

ExtJs

License GPL v2 license or a BSD (3-point) license LGPL MIT Grid License $449 MIT License from $600
Show/Hide columns yes No/no No/no
Update: Yes, using ColumnPicker plugin 
Yes/yes Yes/yes Yes/yes
Resize/Reorder columns yes/yes Yes/yes Yes/yes Yes/yes Yes/yes Yes/yes
Client side sorting yes yes yes yes no yes
Support JSO as data sourc yes yes yes yes yes yes
Export data to Excel/CSV yes yes no Excel and PDF no No, but see forum
on this topic 
Endless scroll yes no yes yes no yes
Filter by columns yes yes Not very useful but exists in different area, not in header yes no yes
Search(all columns simultaneously). yes yes yes(server) no yes no
Aggregation footer no no no yes no no
Additional information Has a lot extensions and plug-ins Looks nice Handles hundreds of thousands of rows with good speed Easy java integration
www.dhtmlx.com/
blog/?tag=java

Guess which of the above libraries we chose?

If you think we missed a library that deserves a spot in our matrix or if anything looks wrong, please let us know, via comments for example.

18 Responses to Top JavaScript Dynamic Table Libraries

  1. crazy4groovy says:

    Thanks! Could you post links for each of these libs — notably DataTables ;)

  2. Mal Lypous says:

    Any links for Slickgrid? ;)

  3. Scott Smerchek says:

    Slickgrid supports Show/Hide columns with the ColumnPicker plugin that is packaged with Slickgrid.

  4. woelfle says:

    Show/Hide columns is supported in JQGrid as a user module (http://www.trirand.com/jqgridwiki/doku.php?id=wiki:show_hide_columns)

  5. Jovan says:

    Hi,

    Very useful table. Could you include pine grid in the matrix? See http://pines.sourceforge.net/pgrid/. It is also nice one. Also you might include support for the data management (adding, deleting, and editing rows), grouping, etc.

    Jovan

    • roger tubby says:

      Thanks for the good round-up of grid/tables. I’ve been playing around with some of these and a few others that no longer seem active.

      @Jovan – I’m interested in your pgrid and found the examples to be nice and demonstrative. However, I seem to be unable to find any documentation on the options that can be applied. Should I just parse your .js files?

  6. samket says:

    I’m hoping to find out if these grids support dynamic width. Some grids have a static width and they won’t automatically resize themselves if the area in HTML shrinks or grows. For example, the user can resize the browser window to shrink or grow the area where the grid component is in. This is an important feature for me. In fact, I tried demos of all of these grids and all of them had static width. I just can’t be sure if this is just the default behavior or if automatic resizing/dynamic width can be enabled somehow in these libraries. Does anyone know? Thanks in advance.

  7. Gavin Engel says:

    I love Datatables. I’ve used it on 10+ projects so far. Nothing else comes close.

  8. Steven says:

    Thank you for this comparison. Just a small correction for the licenses: dhtmlxGrid and ExtJs can be used for free under GNU GPL, and minimal prices are $199 and $329 accordingly.

  9. Singapore Web Design Company says:

    Thanks for the good round-up of grid/tables. I’ve been playing around with some of these and a few others that no longer seem active.

  10. Another one is DynamicTable, a small JavaScript library for sorting, filtering and paging HTML tables. Here is a demo. MIT licensed.

  11. pjog says:

    I need a js library that will help me edit a cell value, add/remove rows and provides me with some onsubmit so i can do some server-side. Tried handsontable and datatable, not very helpful.

  12. pjog says:

    would’nt this be very slow? since you need to include both datatables and this plugin ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 143 other followers

%d bloggers like this: