jQuery UI Blog

Check back frequently for development status updates and news about the jQuery UI library and community.

Unleash The Grid

By Richard D. Worth, February 3, 2011, 10:41 am EST () | Development

The jQuery UI Team is proud to announce that we are building a rich, fast grid widget that will enhance an HTML table with data linking, sorting, paging, filtering, row selection, and inline editing. As part of this process, we’ll be building the features of the grid as standalone widgets and revisiting existing jQuery UI components. At the end of this process, not only will we have a grid, but also a better-tested, more feature-complete user interface library.

Current Progress

We are nearing completion of development on Stage 1 of the project, which encompasses the creation of a generic data model, data type parsing, and markup. This stage will culminate in a “zero feature grid,” an enhanced HTML table that supports the jQuery UI CSS Framework and serves as a base for other grid features. See the roadmap for details on work planned for future stages.

Development Approach

There are already a number of high quality jQuery grid plugins. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. We are studying and applying practices and techniques from today’s most popular grid and data table plugins, including current favorites, SlickGrid, jqGrid, DataTables and a few that have not been updated in a while, like Tablesorter, Flexigrid, and Ingrid. We invite all authors and users of these and any other grid plugins to get involved in the design of the jQuery UI Grid.

Not Invented Here?

As you may imagine, we’re pretty big fans of the jQuery UI API. We believe that having a consistent interface to complex plugins is a big win for users. Sometimes in the past, we’ve adapted already-complete plugins. Unfortunately, this approach can lead to headaches related to legacy bugs, inconsistencies with the rest of our API, and lack of familiarity with the original design decisions. By building from the ground up, we can ensure that each line of code has been vetted and that any grid we call “jQuery UI’s” conforms to our standards.

More Than Just A Grid

We’re not just developing a grid, but rather designing and building modular and extensible components, like sorting, paging, filtering, and in-place editing, that can be combined into a grid. We’re confident that jQuery UI users will find compelling and creative uses for the new suite of tools that are being built to support the grid.

Refactoring Interactions

While jQuery UI’s mouse interaction plugins work well enough in many cases, we are well aware that they have lingering shortcomings – including their ability to work properly on tables. As part of the Grid development, we’ll be giving the interaction plugins a long-awaited refactoring to simplify their APIs, address edge cases, and generally ensure their suitability for a wider variety of contexts.

Join Us!

Do you want to help design and build the jQuery UI Grid? Share your feedback? Join us on the grid planning wiki page. You can stay up-to-date with development and test the latest iterations on jQuery UI’s grid branch.

31 Comments

Keep up the great work, everybody. I’m really excited to see where this goes!

Comment by Jerod Santo — February 3, 2011 @ 11:03 am
Very cool! Can’t wait to try it out and use it in my projects!

Comment by Skywalker — February 3, 2011 @ 11:10 am
Ask Google to donate, they’ll surely do….
or maybe not, because they’re capable of doing respectable javascript, something other “software giants” are just incapable of.

Seeing such a big Microsoft logo in a open source project give me the creeps… Why they don’t go and make a web browser that works, respect standards and doesn’t make us web developers work double because of IE inconsistencies

Comment by Juan Ignacio — February 3, 2011 @ 11:24 am
Can you make it work with an arbitrarily large number of rows (ie. lazy loading of rows)? I sometimes work with millions of rows, and it’s nice for the grid to load rows on the fly when they’re scrolled to.

For example, see this: http://stackoverflow.com/questions/2402953/javascript-data-grid-for-millions-of-rows

Comment by Rudiger — February 3, 2011 @ 12:09 pm
The grid UI component is welcomed for sure. But what about other components that have been in development for ages – the menu and tooltip widgets? Does it make any sense to start a new widget development without completing existing open projects?

Comment by dryu — February 3, 2011 @ 12:41 pm
Thanks @Jerod Santo and @Skywalker

@Rudiger – Some grids call this virtual rendering or virtual scrolling. Both SlickGrid and jqGrid have such a feature. We will first start to tackle this as part of Stage 2 when we work on the Paging feature.

@dryu – That’s actually one of the main reasons we didn’t start the grid as soon as 6-8 months ago, when the planning was done, we had to get other things in order first. We need to ensure we have sufficient resources for the grid as well as to maintain and advance the rest of jQuery UI. We now have 1.8 in a good spot; Menu and Tooltip and Spinner have already landed in master so they’ll be in the 1.9 release (a few months out, sooner than grid – see http://wiki.jqueryui.com/Roadmap ). As of July 2010 we have 20 hours per week dedicated of Scott Gonzalez’s time to ensure existing code and new code continues to be developed and maintained. This has been a tremendous boon, and should continue for another 5 months. Also he’s not alone. He has a growing team that will focus on that, not grid. Even with that, it took us until December to get to a point where we felt we could handle the grid in addition to all that, as a parallel effort.

Comment by Richard D. Worth — February 3, 2011 @ 5:54 pm
Hey thats a gr8 news, really looking forward for this one…. Keep up guys!

Comment by dipesh — February 4, 2011 @ 1:41 am
While building this grid please don’t forget that some users will want the grid to support the azure cloud table storage.

Thanks,

Richard

Comment by richard_alan — February 7, 2011 @ 9:40 am
[...] For Richard’s full blog post on the new Grid see here. [...]

Pingback by jQuery: » jQuery Community Updates For February 2011 — February 7, 2011 @ 4:58 pm
What about column span? Will you implement it?

Comment by hello — February 7, 2011 @ 5:03 pm
Sorry for double post. But what about row span as well?

Comment by hello — February 7, 2011 @ 5:03 pm
Good news…

Comment by Paulo R. Pereira de Souza — February 7, 2011 @ 6:13 pm
Good news indeed.

I’d like to see there’re some cool features in http://www.sigmawidgets.com/products/sigma_grid2/ will be token account into this component.

Comment by Yahasana — February 7, 2011 @ 6:38 pm
think the grid will be great.

but: [...]they’ll be in the 1.9 release (a few months out, sooner than grid)[...]
think its sad to wait another few month for the final release of the 1.9 branch. Love the spinner widget, but as it required core changes since 1.8, i have to build it every time… is there a smart way to get a single, not minimized file of the UI?

Comment by wallenium — February 8, 2011 @ 1:08 am
And do you think of the powerful jqGrid (http://www.trirand.com/blog/) or lighter flexigrid (http://www.flexigrid.info)?

Comment by Christophe Méresse — February 8, 2011 @ 3:55 am
great news! I hope it will be possible to select ranges and blocks of cells just like the YUI datatable.

Comment by Ben Utzer — February 8, 2011 @ 6:01 am
@hello – not currently features that are in scope, but we’d certainly appreciate if you could add some detail on them to this page http://wiki.jqueryui.com/Grid-Features so we have a chance to consider them in the future

@Yahasana – Thanks for the link. I have added it to http://wiki.jqueryui.com/Grid-CoolDemos so we can use it as a reference

@wallenium – there are many programs that’ll do concatenation of JavaScript files, and you could point them at the files in GitHub, if you want the latest. Otherwise, use the 1.9 milestone releases. We’re getting ready to do another one, will be the first after moving menu, tooltip, and spinner into master.

@Christophe Méresse – I think this post (under development approach) as well as http://wiki.jqueryui.com/w/page/34246941/Grid#DevelopmentApproach and http://wiki.jqueryui.com/Grid-OtherGrids show fairly well that we have done our homework; we’re aware of existing grid implementations and are looking to learn as much as we can from them.

Comment by Richard D. Worth — February 8, 2011 @ 6:07 am
Rather interested in the group’s vision of the data model.

Having played with jLinq ( http://www.hugoware.net/Projects/jLinq ) and seen how it’s rolled into jqGrid, I grew to like the ability of massaging the dataset in-place, instead of relying on server or external code to prune the result set and trigger the redrawing of the grid.

I wonder how you see the relationship between dataset and grid. MVC like? Would the sorting and filtering be a presentational function of grid, where underlying data stays same, or the dataset is changed in-place, including change of the order, which is reflected in the grid, or there is a “filter and order” proxy between a dataset and the grid? How is paging being imagined? Grid calling pack the paging events through dataset that calls server-side? Caching?

I, for example, shifted completely to MVCs like Sammy ( http://code.quirkey.com/sammy/ ) and do not quite expect to go to the server all the time to get my dataset massaged. In that respect $.ajax for data really happens once. If i massage the presentation of the data (filter or sort) I might need to come back to the “pristine, unfiltered” original at some point, hopefully without reasking the server for full data. In that respect, a chain of “dataset — data window control (filter, sort, in-memory paging) proxy — grid” would make most sense to me.

Could you expand on any of this?

Comment by daniel — February 8, 2011 @ 12:10 pm
One more angle or complication to the dataset question is how would “multihead” (having several views into the same data set) would be accomplished with the Grid?

Example:
1. Grid linked to dataset. “detailed, filtered list with edit capabilities” linked to the same dataset.
2. Is the paging, filtering, order controlled at the level of presentation widget or dataset or some “data window proxy”?
2. New entry added through “detailed, filtered list with editing capabilities” Will the “we have new data” propagate to and update Grid through datastore?

Comment by daniel — February 8, 2011 @ 12:20 pm
You guys rock! Can’t wait to replace my GWT grid with this.

Comment by Rugger — February 9, 2011 @ 5:57 am
[...] Hey, jQuery UI logo Last week, the jQuery UI team made a great announcement : they are finally going to include into the core a plugin to do table manipulation. http://blog.jqueryui.com/2011/02/unleash-the-grid/ [...]

Pingback by Giant Table is dead, long live jQuery UI ! | Thomas Genin — February 10, 2011 @ 12:21 am
When probably this widget will be completed?

Comment by BlueMan — February 10, 2011 @ 2:14 am
This is superb news! Consistency is key and this gives me a warm fuzzy.

You mention “building modular and extensible components, like sorting, paging, filtering, and in-place editing”. May we take away from that statement that there will finally be a solid jQuery implementation of such things generically?

In particular, I am EXTREMELY interested in ditching my use of YUI just to support AJAX paging via URL bookmarking for history support. Since this is likely something that many of us consider when supporting client-side paging (with grids or without), can you speak to a possible implementation of a history module?

http://developer.yahoo.com/yui/3/history/

Thanks in advance,

-Matt

Comment by Ventaur — February 10, 2011 @ 10:00 am
One cannot help but ask two questions.

1. ETA … progress updates on the grid.
2. WYSYWIG Editor (heh, had to throw that in, but don’t corrupt the post and answer)

Comment by John Farrar — February 10, 2011 @ 3:14 pm
Hi,
I just want to give a heads up about virtual scrolling.
If you decide to implement it you probably are aware of the limitations of scroll height in all browsers (IE being the worse with around 50000px). This means that if you use the jqgrid way of calculating the virtual rows in pixels you will run in this limitation. SlickGrid has solved this issue somehow but I am not familiar with the exact solution.

Keep up the great work!

Comment by Alex — February 15, 2011 @ 1:36 pm
That’s a great news.
Can’t wait.

Thank You…

Comment by Kasim — February 15, 2011 @ 4:53 pm
@daniel – Thanks for your interest and feedback. These are great questions. I’d encourage you to read up on the planning we’ve done in these areas so far on the wiki http://wiki.jqueryui.com/Grid and post any questions as comments on the appropriate page(s). Thanks.

Comment by Richard D. Worth — February 28, 2011 @ 5:27 pm
@BlueMan – A few months yet.

Comment by Richard D. Worth — February 28, 2011 @ 5:28 pm
@Ventaur – Yes, that is precisely our design.

No plans for history directly related to the Grid project, but you can follow progress on any history efforts within UI at http://wiki.jqueryui.com/History

Comment by Richard D. Worth — February 28, 2011 @ 5:30 pm
Much awaiting for this!

Will the following features be implemented?

1. Using keyboard navigation keys
2. ‘Fixed Header’ when scrolling

Comment by Prakash Thangavelu — March 5, 2011 @ 3:33 am
@Prakash

1. Depends on what you’re asking. We’re not creating a spreadsheet with editable cells you would navigate with tab and arrow keys, but wherever possible we will support keyboard interaction as well as mouse.

2. Yes. In fact, there’s already a prototype http://view.jqueryui.com/grid/grid-markup/grid.html

Comment by Richard D. Worth — March 5, 2011 @ 4:03 am